vscode 自動修復eslint錯誤

一般情況下，在項目中使用eslint後，通過在vscode的插件中安裝eslint vetur即可通過工具的自我檢測功能，實現自動修復。可以首選-設置中，設置保存時自動修復，也可以通過快捷鍵使用

按F1，搜索eslint:fix all auto-fixable priblems 即可

最近遇到了一個奇葩問題，同一個項目，換了一臺電腦，同樣的配置，vscode工具突然失靈了，找了好久，才發現是它在搞怪，eslint-plugin-html，原因是同一臺電腦，打開了不同的項目，另一個項目使用的是eslint-plugin-vue，於是這個兩個東西產生了摩擦，最終eslint-plugin-vue戰勝了eslint-plugin-html，於是使用eslint-plugin-vue的項目可以自動檢測，使用eslint-plugin-html的失靈了，如果你也遇到了相同的問題，可以嘗試着換成eslint-plugin-vue試試。這裏同時給出eslint的添加方法（方法很多，這裏簡要說下）。
1，新建.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-prevention
      // 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'
    ],
    // add your custom rules here
    rules: {
       'vue/no-parsing-error': [2, {"x-invalid-end-tag": false}],
       'v/vue/valid-v-for': 0,
       'no-control-regex': 0,
       "quotes": [1, "single"], //引號類型 `` "" ''
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        "space-before-function-paren": 0,
        "indent": ["error", 2],
        "eqeqeq": [0, "always"],
        "standard/object-curly-even-spacing": [0, "either"],
    }
  }
  

2,在package.json中添加

 "scripts": {
    "lint": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",
 }
"devDependencies": {
		   "babel-eslint": "^8.2.1",
		   "eslint": "^4.15.0",
		   "eslint": "^4.15.0",
		   "eslint-config-standard": "^10.2.1",
		   "eslint-friendly-formatter": "^3.0.0",
	       "eslint-loader": "^1.7.1",
	       "eslint-plugin-html": "^3.0.0",
	       "eslint-plugin-import": "^2.7.0",
	       "eslint-plugin-node": "^5.2.0",
	       "eslint-plugin-promise": "^3.4.0",
	       "eslint-plugin-standard": "^3.0.1",
	       "eslint-plugin-vue": "^4.0.0"
	      }

3,在webpack.base.conf修改

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'),
        // emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})
  rules: [
            // ...(config.dev.useEslint ? [createLintingRule()] : []),
            createLintingRule(),
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            ...
     ]

4,cnpm install到此結束。

備註：也許這個方法經過你的嘗試，並不適合你。假如你有更好的解決方案，請留言。