| eslint

eslint

Eslint 是什么

是一种编码规范;
Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等

安装配置

项目中安装,开发环境使用–save-dev

1
$ npm install eslint --save-dev

package.json

1
2
3
4
5
"scripts": {
    "lint": "eslint src --fix", // 执行lint命令,检查代码中不合规的写法并自动修改
    "lint": "eslint src",   // 执行lint命令,检查代码中不合规的写法
    "lint:create": "eslint --init"  // 创建.eslintrc.js,用于配置lint规则
}

.eslintrc.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
module.exports = {
  root: true,   // 此项是用来告诉eslint找当前配置文件不能往父级查找
  env: {    // 此项指定环境的全局变量，下面的配置指定为浏览器环境
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true,
    "amd": true
  },
  extends: [    // 选择规范模板
    'plugin:vue/essential', // 不明
    '@vue/standard',    // 一种常用的规则,如需单独规则可在rules里配置
    '@vue/typescript/recommended'
  ],
//   "parser": "vue-eslint-parser",     解析器选项
  parserOptions: {  // 解析器选项,因为parser项只能有一个解析器,所以通过此项配置更过解析器
    ecmaVersion: 2020
  },
  rules: {  // 自定义规则
    // "规则名": [规则值, 规则配置]
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        mocha: true
      }
    }
  ]
}

rules里配置说明

  • “off” 或 0 - 关闭规则
  • “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

关闭eslint

  • 代码块范围
    1
    2
    3
    /* eslint-disable */
    alert('foo');
    /* eslint-enable */
  • 单行
    1
    2
    3
    4
    alert('foo'); // eslint-disable-line

    // eslint-disable-next-line
    alert('foo');
  • 单行某个属性
    1
    2
    3
    4
    alert('foo'); // eslint-disable-line no-alert

    // eslint-disable-next-line no-alert
    alert('foo');

.eslintignore忽略配置

1
/dist/

vscode中配置eslint

将以下代码添加到setting.json中,在保存代码时会根据根目录.eslintrc文件中配置的规则自动修改简单语法错误

1
2
3
4
5
6
7
8
9
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
],
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

坑

  • css深度选择器>>>报错
    1
    css原生>>>报错,换成/deep/同样报错,可用::v-deep替代
  • export’ is only available in ES6
    1
    2
    3
    4
    5
    6
    7
    8
    9
    export 这个是ES语法，既然提示这个，说明项目中要要用ES6的语法来实现，但是当前没将项目设置为ES6项目，所以才提示

    解决方法:
    1. 在页面上方添加/* jshint esversion: 6 */;但比较麻烦
    2. 在项目根目录创建".jshintrc",内容如下
        {
          "esversion": 6
        }

ESC