vue2.0版本的 vuecli3.x以上创建的项目，在项目中配置eslint，并且执行自动修复eslint报错

要不，在试一下

已于 2023-05-11 10:48:23 修改

阅读量243

点赞数

文章标签： vue.js javascript 前端

于 2023-05-10 17:04:14 首次发布

本文链接：https://blog.csdn.net/qq_36571836/article/details/130605108

版权

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

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

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: [
    'vue'
  ],
  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"
}

4. 运行 `npm run lint-fix` 命令，即可自动修复项目中的 ESLint 报错。

注意：如果你的项目中使用了 Vue CLI 3.x，那么 ESLint 的配置文件已经在项目创建时自动生成了，你只需要在 `.eslintrc.js` 文件中添加相应的插件和规则即可。同时，你可以在 `vue.config.js` 文件中添加以下配置，使得在开发过程中自动修复 ESLint 报错：

```javascript
module.exports = {
  lintOnSave: 'error'
}