什么是ESLint

官网传送门

中文传送门

ESLint 是用来规范代码风格的，特别是团队开发时，一般都会使用ESLint

在项目中使用ESLint

下面通过使用 vue-cil 来创建包含 ESLint 的项目，不清楚 vue-cil 可以看 vue-cil的使用

  1. 创建新项目

    1
    vue create demo

  2. 选择最后的一项进行项目定义

    前面的三个一个是之前创建vue2的时候用的，另外两个是自带的

  3. 选择需要的包，记得把css预处理器加上

    回车后，选择vue的版本 我还是创建 vue2项目

    在选择CSS预处理时，我使用的是 less

  4. 下面就是选择ESLint规范了

    我们选择倒数第二项，标准规范

    回车后会询问我们是在保存的时候触发 Lint 还是提交时触发

    一般我们就保存时触发代码规划的检查就好了

  5. 剩下的操作和之前的就一样了

    选择将配置文件独立开，以及选择是否保存预设，是否保存这个无所为，看需求

在项目根目录下，我们会看到 。eslintrc.js 这个文件，可以用来配置规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

可以看到 rules 节点下有两个规则 no-console 和 no-debugger

ESLint 报错

当我们语法格式不规范时，就会触发ESLint的报错

此时我们可以通过看后边提示的错误信息 比如 ： no-trailing-spaces 和 no-multiple-empty-lines 我们可以去官网的规则中查找改错误是对应的哪条规则

并且根据行号来进行修改

常见的ESLint规则

规则名称 规则约束
quotes 强制使用一致的反勾号、双引号或单引号
key-spacing 强制在对象字面量的属性中键和值之间使用一致的间距
comma-dangle 要求或禁止末尾逗号
no-multiple-empty-lines 禁止出现多行空行
no-trailing-spaces 禁用行尾空格
eol-last 要求或禁止文件末尾存在空行
spaced-comment 强制在注释中 // 或 /* 使用一致的空格
indent 强制使用一致的缩进
space-before-function-paren 强制在 function的左括号之前使用一致的空格
space-infix-ops 要求操作符周围有空格
import/first import必须在顶部

修改ESLint规则

如果我们不想遵守默认的规则，我们可以在.eslintrc.js 中进行修改

修改方式我们参考官网的文档进行

比如我不想遵守 space-before-function-paren 这个规则，我们可以在规则文档中找到它并进入详情页面查看如何修改

在.eslintrc.js 中按照文档提示进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': ['error', 'ignore']
  }
}

vscode相关插件和配置

ESLint插件

安装插件后，进入vscode的settings 进行配置

1
2
3
4
// ESLint插件配置
"editor.codeActionsOnSave": {
    "source.fixAll": true
},

Prettier - Code formatter 插件

安装插件后，进入vscode的settings 进行配置

1
2
3
4
5
6
// Prettier配置
"prettier.trailingComma": "none",
"prettier.semi": false,
"prettier.printWidth": 300,//每行文字数超过此限制会被迫换行
"prettier.singleQuote": true,//单引号替换双引号
"prettier.arrowParens": "avoid",//当箭头函数只有一个参数时加上括号

我们也可以直接创建一个 .perttierrc文件，将下面的内容放进去,并在 settings.json中加入"prettier.configPath": "C:\\Users\\YJR\\.prettierrc",

1
2
3
4
5
6
7
8
{
    "semi": false,
    "bracketSpacing": true,
    "trailingComma": "none",
    "printWidth": 300,
    "singleQuote": true,
    "arrowParens": "avoid"
}