ESLint

什么是ESLint

• eslint的目标是提供一个插件化的 JavaScript代码规范检测工具。

  • 开发人员编写javascript代码的时候保持一种统一风格。
  • 好处：提升项目开发速度、增强代码可维护性。

见到这样子的错误, 证明你的代码不严谨

代码自动规范 - VsCode插件

• 给vscode安装eslint插件以便代码自动规范，插件名字为"ESLint"。
• 在vscode中有一个名称为eslint的插件，可以帮助给js或vue文件做自动代码规范设置，非常好用，省却了手工调整代码规范的繁琐工作，提高项目开发速度。

步骤：

1. 给vscode编辑器安装插件：ESLint

2. 全局方式安装eslint依赖包

npm install -g eslint

该依赖包安装完毕是对1步骤扩展做支撑的

3. 打开vscode配置文件 settings.json

在最末尾添加如下内容

"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
    "extensions": [".js",".vue"]
},
"eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "vue", "autoFix": true }
]

4. 重启vscode

现在：Ctrl+s： 保存编辑的文件后，会对vue文件或js文件 做js自动代码规范操作，并且是遵守eslint规范的，有时vue文件内容html/css代码部分不规范，可以通过Shift+Alt+f键格式化，之后再Ctrl+s一下

ESLint具体应用

官方文档

1. 开启eslint规范检测，具体在vue.config.js中配置

lintOnSave: true,      // 文件保存时(Ctrl+s)就做eslint规范检测

//lintOnSave: false   //关闭eslint检查

注意:

更改配置文件后，要重启服务 npm run server

2. ESLint的具体的规范

1. 声明变量但是未使用会报错
2. 简单语句结尾不能有分号
3. 给变量赋值 等号 左右要求有空格
4. 在行结尾处，多余的空格不允许
5. 字符串必须使用单引号圈选，不能是双引号
6. 对象成员名称冒号与值之间需要有一个空格
7. 方法名称小括号 的左右需要保留一个空格
8. 在每一个文件的结尾处，必须有一个空行
9. 文件中如果出现空白行，要求只能有一行空白，不能连续出现两行或以上的空白行

注意:

eslint只是针对 js文件 和 vue文件的js部分 做规范检查, 而且eslint只是检查代码规范，不是语法错误，不规范的代码是可以正常运行的

自定义规则配置

• 根据需求给eslint配置规范，修改配置文件.eslintrc.js，给其中的rules段做配置即可

// 匹配规则:[开启规则参数，要求/禁用参数]
'semi':['error','always'],  // 简单语句后边要求设置分号，不设置会报错
'semi':['error','never'],  // 简单语句后边不要设置分号，设置会报错
    
'semi':['off','always'],  // 关闭规则检测
'semi':['off','never'],  // 关闭规则检测
  
'space-before-function-paren': ['error', 'never'],  // 禁止在function小括号左边设置空格，否则报错
'space-before-function-paren': ['error', 'always'], // 要求在function小括号左边设置空格，否则报错
    
'space-before-function-paren': ['off', 'always'], // 关闭规则
'space-before-function-paren': ['off', 'never'], // 关闭规则
  
'no-multiple-empty-lines': ['error', { 'max': 3 }], // 文件中间允许出现3个或以内的空白行
'no-multiple-empty-lines': ['off', { 'max': 3 }], // 关闭规则

开启规则参数：
​ error：将规则视为一个错误 off：关闭规则


要求/禁用参数：
​ always：要求规则 never：禁止规则

注意：

更改了配置文件要重启服务