eslint - vue 项目中 package.json 和 .eslintrc.js 配置

直接先创建一个helloworld vue项目

package.json 文件

{
  "name": "hello",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "id-length": ["warnings", { "min": 1, "max": 20 }]
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201111001156796.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1MTYyODI5OTk1OA==,size_16,color_FFFFFF,t_70#pic_center

可以直接在 package.json 中配置代码检测规则

我写的这个代码检测规则 是 变量名不能超过20个字符

变量名为21个字符 运行项目时 编译报错了

变量名为20个字符时 编译通过了

以上是在package.js 文件中配置

也可以在 .eslintrc.js 文件中进行配置

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201111001827755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1MTYyODI5OTk1OA==,size_16,color_FFFFFF,t_70#pic_center
在与package.json 文件同级目录中创建 .eslintrc.js 文件
并先将 package.json 红框代码删掉
然后 将以下代码块 写入 .eslintrc.js 文件中

module.exports = {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "id-length": ["warnings", { "min": 1, "max": 20 }]  // 强制标识符的最小和最大长度  默认 最小是2个  最大不限
    }
  }

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201111002037951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1MTYyODI5OTk1OA==,size_16,color_FFFFFF,t_70#pic_center

跑项目（当然这里是热更新 不存在跑不跑 避免缓存 最好重新跑）

编译可以通过

21个字符编译不通过