vue2專案增加eslint設定程式碼規範範例

2022-08-08 14:01:03

正文

eslint用於程式碼檢查，prettier用於程式碼格式化，具體操作如下

1.安裝以下eslint外掛

安裝以下eslint外掛，並增加.eslintrc.js組態檔，.eslintignore設定忽略檢查的檔案

（1）eslint

用於檢查和標示出ECMAScript/JavaScript程式碼規範問題工具。

（2）@babel/eslint-parser

簡而言之就是一個解析器，允許您使用ESLint對所有有效的Babel程式碼進行檢查。

ESLint允許使用自定義解析器，當使用此外掛時，程式碼會被Babel解析器解析，並且生成的AST被轉換成一個ESLint可以理解的符合ESTree的結構，所有的位置資訊如行列也會保留，因此可以輕鬆的追蹤錯誤

（3）eslint-plugin-vue

Vue.js的官方ESLint外掛,即使用eslint檢查.vue檔案的template和script

（4）eslint-config-prettier或者@vue/eslint-config-prettier

當prettier與eslint有些規則衝突時，使用prettier的規則進行覆蓋

其中@vue/cli-plugin-eslint是特別為@vue/cli&create vue setups使用而設計的

（5）@vue/cli-plugin-eslint

vue-cli的eslint 外掛，檢查和修復檔案

1.1 .eslintrc.js檔案設定

module.exports = {
  root: true, // 在根目錄下尋找.eslintrc.js檔案，如果當前工作區開啟的專案不是在根目錄，則查詢.eslintrc.js檔案會失敗，且eslint檢查也不會生效
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended', // 衝突時使用prettier的規則進行覆蓋
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off', // 不校驗元件名
    "vue/no-multiple-template-root": 0, // 不需要使用根元素包裹template的內容
  }
};

1.2 .eslintignore檔案的設定

node_modules
dist

2. 安裝prettier

安裝prettier，並增加.prettierrc.js檔案

程式碼格式化工具，通過.prettierrc.js檔案進行設定程式碼規範 .prettierrc.js相關設定如下

//設定參照 https://prettier.io/docs/en/options.html
module.exports = {
    tabWidth: 2, // tab 使用兩個空格
    endOfLine: "auto", // 保持現有的行尾
    useTabs: false, // 不使用製表符縮排，使用空格縮排
    semi: true, // 程式碼需要分號結尾
    singleQuote: true, // 單引號
    bracketSpacing: true, // 物件左右兩側需要空格
    jsxBracketSameLine: false, // html 關閉標籤換行
    arrowParens: 'avoid', // 單引數的箭頭函數引數不需要括號
    proseWrap: 'never', // markdown檔案不換行
    trailingComma: 'none' // 結尾處不加逗號
  }

3. package.json相關程式碼

"devDependencies": {
  "@babel/eslint-parser": "^7.18.9",
  "@vue/cli-plugin-eslint": "^5.0.8",
  "eslint": "^7.32.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-vue": "^8.7.1",
  "prettier": "^2.7.1",
}

4. vscode的設定

（1）設定eslint、prettier外掛

vscode工具列右下角兩個外掛的啟用狀態

（2）setting.json檔案的設定

{
   // 用於儲存時使用進行程式碼格式化
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
    // 用於vscode右下角工具列展示eslint標識
    "eslint.alwaysShowStatus": true,
}