vscode自動修復eslint規範的插件及配置

在開發大型項目中，常常都是須要多人合做的。相信你們必定都很是頭疼於修改別人的代碼的吧，而合理的使用eslint規範可讓咱們在代碼review時變得輕鬆，也可讓咱們在修改小夥伴們的代碼的時候會更加清晰。可是每每在開發過程當中因爲咱們我的習慣的不通常常會先關掉一些eslint的屬性，又或者每一個人對於eslint的配置也是不同的，因此當咱們統一配置eslint以後，咱們能夠經過vscode或者webstorm插件配置eslint規範，自動修改關於eslint的問題。

1、eslint規範

使用vue-cli3搭建vue項目初始化時，會有選擇eslint的設置，通常狀況下，設置使用 'eslint:recommended'，也能夠在.eslintrc.js配置其餘以爲適合項目的一些eslint規範（詳細eslint規則參考：https://cn.eslint.org/docs/rules/）：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-trailing-spaces': 'error', // 禁止行尾空格
    'linebreak-style': [0, 'error', 'windows'],
    'import/extensions': 'off',
    "comma-dangle": ["error", "never"], // 禁止行尾逗號
    "semi": ["error", "never"], // 禁止分號
    "space-before-blocks": "error", // 強制在塊以前使用一致的空格
    "comma-spacing": "error", // 逗號後面加空格
    'indent': [2, 2, {
      'SwitchCase': 1
    }], //代碼首行縮進規定，switchcase的設置比較特別，若是直接設置'indent':2,使用代碼自動校驗會發現switch代碼段沒法校驗經過
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

 2、自動修復eslint報錯

vscode安裝插件vetur,prettier,eslint配置相對應的eslint規範可自動幫咱們修復一些eslint報錯問題，如下是一些基本的配置：

  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned"
  },
  "editor.detectIndentation": false,
  // 從新設定tabsize
  "editor.tabSize": 2,
  // "editor.formatOnSave": true,  // 保存時自動格式化 --vscode編輯器自帶自動格式化會與設置的eslint規範有所衝突致使eslint報錯
  "eslint.autoFixOnSave": true, //保存時使用eslint規範自動格式化
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "prettier.eslintIntegration": true, // 讓prettier使用eslint的代碼格式進行校驗 （若是未安裝prettier或者不須要prettier格式化能夠不用設置prettier這些屬性）
  "prettier.semi": false,  // 去掉代碼結尾的分號 
  "prettier.singleQuote": true,  // 使用帶引號替代雙引號 

收藏：https://www.haorooms.com/post/vscode_eslint