vue3配置eslint

好的，Vue 3 项目中配置 ESLint 的步骤如下：

1. 安装 ESLint 和相关插件

打开终端，进入 Vue 3 项目根目录，执行以下命令：

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

其中，`eslint` 是 ESLint 核心库，`eslint-plugin-vue` 是 ESLint 用于检查 Vue 文件的插件，`@vue/cli-plugin-eslint` 是 Vue CLI 提供的 ESLint 插件。

2. 创建 ESLint 配置文件

在 Vue 3 项目根目录下创建 `.eslintrc.js` 文件，并添加以下内容：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

其中，`root` 表示该配置文件为 ESLint 的根配置文件，`env` 表示环境变量，`extends` 表示使用的 ESLint 规则，`parserOptions` 表示解析器选项，`rules` 表示规则配置。

3. 配置 ESLint 规则

在 `.eslintrc.js` 文件中，可以添加自定义的 ESLint 规则，例如：

rules: {
  'no-console': 'off', // 允许使用 console
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁止使用 debugger
  'vue/no-unused-components': 'warn', // 检查未使用的组件
  'vue/no-unused-vars': 'warn', // 检查未使用的变量
  'vue/require-default-prop': 'warn' // 检查 props 缺省值
}

4. 配置 ESLint 脚本

在 `package.json` 文件中，可以添加 ESLint 的脚本，例如：

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

其中，`--ext` 表示需要检查的文件扩展名，`src` 表示需要检查的目录。

5. 执行 ESLint 检查

执行以下命令：

npm run lint

即可进行 ESLint 检查。

希望以上内容能够帮助到您。