ESLint的配置使用

ESLint

介绍

什么是eslint:

• ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。

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

目标：全部开发人员编写javascript代码的时候保持一种统一风格。

好处：提升项目开发速度、增强代码可维护性。

应用

了解eslint具体代码规范

• 官网参考https://cn.eslint.org/

• 如果eslint报代码不规范，可以到官网查找原因

步骤：

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

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

   配置开启后，要重启服务 npm run server

   eslint针对 js 或 vue文件的js代码部分都会检测

2. 具体规范

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

注意：

1. eslint只是代码规范，不是语法错误，不规范的代码可以正常运行
2. 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：禁止规则

注意：

​ 在.eslintrc.js文件中对规则进行修改需要重启服务(npm run serve)才会生效。

代码自动规范

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

步骤：

1. 给vscode编辑器安装扩展：VS Code ESLint extension

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

   npm install -g eslint
   

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

3. 打开vscode配置文件 settings.json (by File-> Preferences->Settings)

   在最末尾如下内容

   "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一下

注意：

​ 如果 Ctrl+s 不给做规范设置，请给eslint扩展做版本降级处理(降级为 1.9.1 或 1.7.2 尝试)