vscode中vue-cli项目es-lint的配置方法

下面是详细讲解“vscode中vue-cli项目es-lint的配置方法”的完整攻略：

1. 安装ESLint

首先请确保你的vscode里已经安装了 ESLint 插件，如果没有安装可以在插件市场中搜索并进行安装。ESLint 是 Javascript 的语法规范，可以用于代码的静态检查，还可以进行代码风格的约束。ESLint还支持vue、react等框架的代码检测，非常强大，是前端开发必备的工具之一。

2. 配置ESLint

(1) 方式一：安装已有ESLint配置文件

如果已经有了ESLint配置文件，比如说有厂商前辈的配置文件config.js，那么只需要在 .vscode/settings.json 文件中声明一下即可。比如这样：

{
  "eslint.options": {
    "configFile": "./config.js"
  }
}

(2) 方式二：自定义配置

如果没有ESLint配置文件，可以在项目根目录下通过终端命令，自动生成 ESLint 配置文件。

// 全局安装 eslint
npm i -g eslint
// 初始化配置文件
eslint --init

生成配置文件之后，vue-cli 项目结构大致是这样的：

project-name/
├── node_modules/
├── public/
├── src/
├── tests/
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── package-lock.json
└── README.md

其中，.eslintrc.js 文件就是我们刚刚通过自定义配置生成的 ESLint 配置文件。它会指示 ESLint 如何对代码进行检查。

(3) 针对vue-cli3自动化配置的ESLint

如果你使用的是 vue-cli3+，那么你可以在创建项目时选择支持ESLint，这样它会在创建项目的时候自动配置ESLint。如果是之前的项目需要手动添加。

比如，你已经创建了一个vue-cli3的工程，但是没有启用eslint，安装过程如下：

vue add eslint

或者

vue create project-name --force && cd project-name
vue add eslint

安装完成eslint后，可以通过下面的配置增强eslint的规则和检查代码范围：

{
  "eslint.enable": true,
  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ]
}

通过上述配置，我们在vscode中使用vue-cli3搭建的工程时，就可以灵活配置eslint了。如果需要快速修复eslint语法检测的话，可以通过在终端输入："eslint --fix"，可以自动修复大部分的格式错误。