Vue中使用eslint和editorconfig方式

2022-05-25 14:00:39

使用eslint和editorconfig方式

使用eslint的好處

1、避免執行時因格式問題報錯

2、方便團隊合作，程式碼風格統一

安裝eslint

命令列執行：

  npm i 
  eslint eslint-config-standard 
  eslint-plugin-standard 
  eslint-plugin-promise 
  eslint-plugin-import 
  eslint-plugin-node 
  eslint-plugin-html -D

eslint-plugin-html外掛識別html檔案中的script標籤裡面的JavaScript

檔案設定說明

在專案目錄新建.eslintrc檔案:

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  }
}

啟動命令設定

在package.json的scripts中加入：

"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"

client/ 為要檢查的資料夾

執行：

npm run lint          //語法檢查
npm run lint-fix      //自動修復語法檢查出現的問題

自動檢查語法設定

命令列執行：

npm i eslint-loader babel-eslint -D

然後在.eslintrc檔案中新增"parser": "babel-eslint"：

{
 "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint",
  "rules": {
    "no-new": "off"
  }
}

在webpack的組態檔的module.rules中加入：

{
   test: /.(vue|js|jsx)$/,
   loader: 'eslint-loader',
   exclude: /node_modules/,
   enforce: 'pre'   //預處理
},

新增editorconfig

在專案目錄新建.editorconfig檔案：

root = true
    
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

vue editorconfig編輯器設定說明

editorconfig是什麼，有什麼用

editorconfig是定義編碼樣式的組態檔，幫助多人合作專案或者不同編輯器下保持程式碼風格統一。

editorconfig範例

# http://editorconfig.org  (Editorconfig 的官方網站)
# 控制 EditorConfig 約定的範圍 
root = true 

# 匹配全部檔案
[*]

# 設定字元集
charset = utf-8

# 縮排風格 可選"space"、"tab"
indent_style = space

# 縮排大小 可以是數位（空格數）， tab(如果tab大小沒設定則按編輯器預設tab大小)
indent_size = 2

# tab的寬度
tab_width = 4

# 結尾換行符，可選"lf"、"cr"、"crlf"
end_of_line = lf

# 檔案最後插入一個空行
insert_final_newline = true

# 刪除行尾空格
trim_trailing_whitespace = true

# 匹配.java結尾的檔案
[*.java]

# 匹配.md結尾的檔案
[*.md]
trim_trailing_whitespace = false

root=true 控制 EditorConfig 約定的範圍 , Visual Studio 會在開啟的檔案的目錄和每個父目錄中查詢名為 .editorconfig 的檔案。到達根檔案路徑時或找到具有 root=true 的 .editorconfig 檔案時搜尋結束。