Vue 3 项目添加 ESLint 的详细步骤

要在已经搭建好的 Vue 3 项目中添加 ESLint，可以按照以下步骤操作：

在项目根目录下安装 ESLint 和相关依赖：

npm install eslint eslint-plugin-vue babel-eslint eslint-config-airbnb-base --save-dev

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

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

在项目根目录下的 package.json 文件中添加以下命令：

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

运行以下命令，检查代码是否符合 ESLint 规则：

npm run lint

如果有错误，可以使用以下命令自动修复：

npm run lint-fix

这样，就成功在已经搭建好的 Vue 3 项目中添加了 ESLint。