VSCode 下正确配置 ESLint

1. 安装 VSCode 插件 ESLint 和 Vetur

2. 修改 VSCode 设置（Code - Preferences - Settings）

{
  "editor.tabSize": 2,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,

  "eslint.validate": [
      "javascript",
      "javascriptreact",
      { "language": "typescript", "autoFix": true },
      { "language": "html", "autoFix": true },
      { "language": "vue", "autoFix": true },
  ],
  "eslint.autoFixOnSave": true,

  "vetur.validation.template": false,
}

resolve alias

webpack 里配置了 resolve alias 时，ESLint 里也需要相应配置才能正确校验 import 行为。 具体办法是在 .eslintrc.js 里加上一段：

{
  'settings': {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js 文件路径',
      },
    },
  }
}

若使用了 vue-cli，没有明确的 webpack 配置文件，可以这样：

{
  'settings': {
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            alias: {
              a: 'xxx'
              b: 'xxx'
            },
          },
        },
      },
    },
  }
}

以上行为需要 eslint-import-resolver-webpack 这个依赖，此包已将它引入进来（虽然这个包自己用不到），无需再次引入。