用vue+eslint+vscode实现代码规范化 _规范化

书到用时方恨少，事非经过不知难。这篇文章主要讲述用vue+eslint+vscode实现代码规范化相关的知识，希望能为你提供帮助。
目的：这段时间我们组多人开发同一个前端项目，遇到同事提交的代码有大面的格式变更，找到原因是我们vscode安装的代码格式化规范插件和本地配置不同导致的，并且同事设置了保存自动格式化代码，这样的情况容易在合并代码时找不到实际的代码改动点，出现隐患。另一方面也是响应公司代码格式规范化的号召，所以花时间了解了下eslint，跟大家分享。
1. eslint介绍lint是检查代码格式工具的一个统称，具体的工具有JsLint、android-Lint等,本文介绍的eslint就是lint中的一种。
【用vue+eslint+vscode实现代码规范化】eslint官网介绍：可组装的javascript和JSX检查工具。
这里我们不讨论JSX，只讨论js。js是弱类型语言，不需要执行程序的编译，所以不容易在开发阶段及时的发现代码错误，需要在不断的调试中修改代码错误。eslint就是一种能够可以帮助前端工程师在编码过程中发现问题，而不是在执行过程中发现问题的工具。
2. eslint特点

内置规则和自定义规则共用一套规则 API；
内置的格式化方法和自定义的格式化方法共用一套格式化 API；
额外的规则和格式化方法能够在运行时指定；
规则和对应的格式化方法并不强制捆绑使用；
每条规则都是各自独立的，可以根据项目情况选择开启或关闭；
用户可以将结果设置成警告或者错误；
eslint 并不推荐任何编码风格，规则是自由的；
所有内置规则都是泛化的。

3. eslint+vscode规范化代码操作步骤 3.1. vue项目安装eslint插件终端输入：

npm install eslint --save-dev

3.2. 配置eslinteslint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，eslint 只会使用一个。优先级顺序如下：

javaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON -使用 .eslintrc.json 去定义配置的结构，eslint 的 JSON 文件允许 JavaScript 风格的注释。
Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

下面介绍一下第5种配置方式：

"eslintConfig": { "root": true, // 预定义的全局变量 "env": { "node": true }, // 扩展通过字符串或者数组来扩展规则 // extentds: \'standard\', "extends": [ "plugin:vue/essential", "eslint:recommended" // 启用推荐的规则 ], "parserOptions": { // 解析器，这里使用的是babel-eslint "parser": "babel-eslint" }, // 自定义规则可以根据项目需求自定义填写 "rules": {} },

3.3. vscode安装eslint扩展插件只是在项目中安装eslint是不够的，需要在vscode中安装eslint扩展插件，并进行对应的配置才能看到代码中各种颜色的报错，报错如下图：

文章图片

文章图片

如果不想被频繁的格式报错困扰开发过程，可以在vscode中安装代码自动修复的扩展插件，并在setting.json中进行配置，插件可以使用如：prettier-Code formatter、vetur 。
安装vetur插件后代码报错如下图：

文章图片

3.4. vscode setting.json配置需要设置的本地，私人的代码规范化处理可以写在vscode 的setting.json文件中。想要实现保存即格式化代码就可以设置在setting.json中。setting.json文件打开方式：vscode-文件-首选项-设置-搜索eslint-随意找一个“在settings.json”中编辑打开settings.json,如下图：

文章图片

旧版本配置，如果按照下面配置报错，则使用新版本配置。

{ "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, { "language": "html", "autoFix": true } ] }

新版本配置

"editor.codeActionsOnSave": { "source.fixAll.eslint": true, "eslint.probe": ["javascript", "vue", "html"] },

4. eslint规则 4.1. 三种级别值：

" off" 或者0，不启用这个规则
" warn" 或者1，出现问题会有警告
" error" 或者2，出现问题会报错

4.2.规则写法：规则名：值
规则名：[值，参数1，参数2……]
4.3. 常用规则举例：

规则名	规则介绍
no-console	禁用 console
no-debugger	禁用 `debugger`
init-declarations	要求或禁止var声名中的初始化
eqeqeq	要求使用=== 和!==
indent	强制使用一致的缩进
max-len	强制一行的最大长度
max-len	强制一行的最大长度
semi	要求或禁止使用分号代替ASI
no-var	要求使用let或者const而不是var

详细的eslint自定义规则可以查看：https://cn.eslint.org/docs/rules/
4.4. 格式关闭规则什么时候需要关闭格式，举个例子：当代码中出现正则/\\ .js$/,格式交易可能会出现" unnecessary escape character:/\\ ." ,这种情况不能通过修改代码来使报错消失，就可以使用格式关闭规则来跳过此类代码。
下面介绍几种规则：