VSCode配合ESLint自動修復格式化

開發Vue或者React的項目的時候，我們經常用到ESLint進行代碼的校驗，當代碼出現不符合規范的格式的時候，ESLint會在控制台提示相關的異常信息。

ESLint極大的提高了團隊代碼的一致性和規范性，接下來老馬介紹一下我的VSCode的相關配置和插件實現保存代碼的時候，根據ESLint的配置自動修復代碼和格式化。

VSCode安裝插件

• ESLint，VSCode代碼中提示錯誤
• vetur：Vue開發的神器，格式化、代碼段等不用說了....
• Prettier - Code formatter,代碼格式化插件，非常牛，可以自定義格式化的配置

配置VSCode的用戶配置

{
  ...
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 保存自動修復
  "eslint.autoFixOnSave": true,
  // jsx自動修復有問題，取消js的format
  "editor.formatOnSave": false,
  // Enable/disable default JavaScript formatter (For Prettier)
  "javascript.format.enable": false,
  "prettier.singleQuote": true,
  // 點擊保存時，根據 eslint 規則自定修復，同時集成 prettier 到 eslint 中
  "prettier.eslintIntegration": true,
   ...
}

 

注意事項

如果需要啟動ESLint的自動修復，需要在項目根目錄下，或者package.json文件中配置ESLint的配置。

參考我的Vue項目的ESLint的校驗規則：

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevent
    // ion consider switching to `plugin:vue/strongly-recommended` or
    // `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  globals: {
    NODE_ENV: false
  },
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 添加，分號必須
    semi: ['error', 'always'],
    'no-unexpected-multiline': 'off',
    'space-before-function-paren': ['error', 'never'],
    // 'quotes': ["error", "double", { "avoidEscape": true }]
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true
      }
    ]
  }
};

 

參考我的React項目的ESLint的校驗規則：

需要安裝的插件

npm i -D eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint prettier eslint-config-prettier eslint-config-react-app eslint-plugin-prettier 

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    // 檢查 ES6 語法
    parser: 'babel-eslint',
  },
  env: {
    browser: true,
  },
  // extending airbnb config and config derived from eslint-config-prettier
  // 這里是 vue
  extends: ['react-app', 'prettier'],

  // 選擇 eslint 插件
  plugins: ["react", "jsx-a11y", "import", 'prettier'],

  // react
  // extends: ['airbnb-base', 'prettier'],
  // plugins: ['prettier', 'react'],

  // 不需要框架
  // extends: ['airbnb-base', 'prettier'],
  // plugins: ['prettier'],

  // 自定義 eslint 檢查規則
  rules: {
    // 自定義 prettier 規則 (實際上，可配置項非常有限)
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
      },
    ],
    camelcase: 'off', // 強制駝峰法命名
    'no-new': 'off', // 禁止在使用new構造一個實例后不賦值
    'space-before-function-paren': 'off', // 函數定義時括號前面不要有空格
    'no-plusplus': 'off', // 禁止使用 ++， ——
    'max-len': 'off', // 字符串最大長度
    'func-names': 'off', // 函數表達式必須有名字
    'no-param-reassign': 'off', // 不准給函數入參賦值

    // react 如果在項目中文件名后綴是 .js 而不是 .jsx 避免報錯
    // "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    // react props validation 錯誤
    // "react/prop-types": 0,
  },
};