一步步详细讲解vue3配置ESLint

下面是一步步详细讲解vue3配置ESLint的完整攻略：

步骤一：安装ESLint

首先，我们需要在项目中安装ESLint。可以使用下面的命令来进行安装：

npm install eslint --save-dev

步骤二：安装Vue3的ESLint插件

接下来，我们需要安装Vue3的ESLint插件。可以使用下面的命令进行安装：

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

步骤三：创建ESLint配置文件

然后，我们需要在项目根目录下创建一个ESLint配置文件。可以使用下面的命令来创建：

npx eslint --init

在执行此命令之后，会出现一些问题，需要逐步回答：

1. How would you like to use ESLint?
   • To check syntax, find problems, and enforce code style
2. What type of modules does your project use?
   • JavaScript modules (import/export)
3. Which framework does your project use?
   • Vue.js
4. Does your project use TypeScript?
   • No
5. Where does your code run?
   • Node
6. How would you like to define a style for your project?
   • Use a popular style guide
7. Which style guide do you want to follow?
   • Airbnb (https://github.com/airbnb/javascript)
8. What format do you want your config file to be in?
   • JavaScript

步骤四：修改ESLint配置文件

在创建了ESLint配置文件之后，我们需要对配置文件进行修改。我们可以打开.eslintrc.js文件进行修改，并添加下面的内容：

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
  ],
  plugins: [
    'vue',
  ],
  rules: {
    'no-console': 'off', // 如果你不想限制console输出，可以把这个规则关闭
    'vue/max-attributes-per-line': ['error', {
      singleline: 5, // 在单行上最多允许5个属性
      multiline: {
        max: 1, // 在多行上允许一个属性
        allowFirstLine: false // 不允许属性和开始标签放在同一行
      }
    }],
    // 在vue模板文件中强制使用4个空格缩进
    'vue/html-indent': ['error', 4]
  },
};

步骤五：使用ESLint进行代码检查

设置好配置文件之后，我们就可以使用ESLint进行代码检查了。

可以使用下面的命令来检查所有的.js和.vue文件：

npm run lint

示例说明一：关闭console出现no-console错误

在刚才修改ESLint配置文件的时候，我提到可以关闭no-console规则来避免console输出出现错误。

下面是一个可以触发no-console错误的例子：

console.log('hello world');

在这个例子中，我们使用了console.log()来输出一段文字，这会触发no-console错误。

可以使用下面的代码关闭no-console规则：

/* eslint-disable no-console */
console.log('hello world');

在这个例子中，我们在console.log()之前添加了一个注释，用来禁用no-console规则，这样就不会出现错误提示了。

示例说明二：修改属性最大数量限制

在上面修改ESLint配置文件的时候，我提到可以修改vue/max-attributes-per-line规则来控制单行和多行最多允许的属性数量。

下面是一个可以触发vue/max-attributes-per-line错误的例子：

<template>
  <button
    class="btn btn-primary btn-lg"
    type="button"
    value="click me"
    @click="handleClick"
  >
    Click Me!
  </button>
</template>

在这个例子中，我们在button标签上使用了4个属性，而vue/max-attributes-per-line规则会限制单行上最多只能有5个属性，所以这里会出现错误提示。

可以修改.eslintrc.js中的vue/max-attributes-per-line规则来解决这个问题，例如将单行最多允许的属性数量改为6个：

'vue/max-attributes-per-line': ['error', {
  singleline: 6, // 在单行上最多允许6个属性
  multiline: {
    max: 1, // 在多行上允许一个属性
    allowFirstLine: false // 不允许属性和开始标签放在同一行
  }
}],

这样就可以通过ESLint的检查了。