Vue项目中ESLint配置超全指南(VScode)

下面我将详细解释如何在Vue项目中配置ESLint，并使用VS Code进行代码提示和自动修复。

步骤一：安装ESLint

首先，我们需要在Vue项目中安装ESLint和相关依赖包：

npm install eslint eslint-plugin-vue --save-dev

其中，eslint-plugin-vue用于支持Vue文件的ESLint检查。

步骤二：创建ESLint配置文件

接下来，我们需要在Vue项目根目录中创建一个名为.eslintrc.js的ESLint配置文件。这个文件包含了ESLint的所有配置。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 在这里添加你的规则
  }
}

以上代码展示了ESLint的基本配置，其中：

• root: true表示这个配置文件是根配置文件，不需要再继承其他配置文件。
• env指定了代码的运行环境为Node.js。
• extends指定了继承的规则，这里我们使用了plugin:vue/vue3-essential和eslint:recommended两个规则。plugin:vue/vue3-essential规则是Vue官方推荐的一组规则，eslint:recommended是ESLint官方推荐的一组规则。
• parserOptions指定了使用哪种解析器，这里使用的是babel-eslint。
• rules部分则用于自定义规则。比如，你可以添加类似'no-console': 'off'这样的规则来取消对console的检查。

步骤三：配置VS Code的ESLint插件

接下来，我们需要在VS Code中安装ESLint插件，以便进行代码提示和自动修复。

安装完成后，打开VS Code的设置界面，并搜索eslint.validate关键字。将其设置为auto，以自动启用ESLint检查。

步骤四：配置npm脚本

最后，我们需要在package.json中添加一个npm脚本，以方便执行ESLint的检查和自动修复：

"scripts": {
  "lint": "eslint --ext .js,.vue src",
  "lint:fix": "eslint --fix --ext .js,.vue src"
}

以上代码表示，运行npm run lint可以对src目录下的所有.js和.vue文件进行检查；运行npm run lint:fix则可以对检查结果中的一些错误自动进行修复。

示例

假设我们有下面这个Vue单文件组件：

<template>
  <div>
    <p :class="foo">Hello world!</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      foo: 'bar'
    }
  }
}
</script>

在使用ESLint检查后，会发现一个错误：

Unexpected use of binding foo in context script

这是因为我们在脚本中使用了模板中定义的变量而没有声明，需要改为：

<template>
  <div>
    <p :class="foo">Hello world!</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    const foo = 'bar'
    return {
      foo
    }
  }
}
</script>

然后再运行npm run lint:fix自动修复错误即可。另外，ESLint还会有其他的检查和建议，可以根据需要配置相关规则。