为什么需要编程规范?
对于一些大型的企业级项目而言,通常情况下我们都是一个团队来进行开发的。而又因为团队人员对技术理解上的参差不齐,所以就会导致出现一种情况,那就是《一个项目无法具备统一的编程规范,导致项目的代码像多个不同材质的补丁拼接起来一样》
比如:
有的地方有空格进行分割,有的地方却没有
有的地方是单引号,有的地方却是双引号
有的地方有分号,有的地方没有分号
....
为避免这个问题,所以需要规范
代码检测工具 ESLint
首先 ESLint
是 2013年6月
创建的一个开源项目,它的目标非常简单,只有一个,那就是 提供一个插件化的 javascript
代码检测工具 ,说白了就是做 代码格式检测使用的
现代工程化项目中,有规范化的,都包含一个 .eslintrc.js
文件,这个文件就是 eslint
的配置文件。
或者在创建项目时,就进行过这样的选择:
? Pick a linter / formatter config:
ESLint with error prevention only // 仅包含错误的 ESLint
ESLint + Airbnb config // Airbnb 的 ESLint 延伸规则
ESLint + Standard config // 标准的 ESLint 规则
标准的 ESLint 规则.eslintrc.js
文件
// ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象
// 文档:https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
// 表示当前目录即为根目录,ESLint 规则将被限制到该目录下
root: true,
// env 表示启用 ESLint 检测的环境
env: {
// 在 node 环境下启动 ESLint 检测
node: true
},
// ESLint 中基础配置需要继承的配置
extends: ["plugin:vue/vue3-essential", "@vue/standard"],
// 解析器
parserOptions: {
parser: "babel-eslint"
},
// 需要修改的启用规则及其各自的错误级别
/**
* 错误级别分为三种:
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
* "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
*/
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};
对比.eslintrc.js
文件,基于 ESLint
如果我们出现不符合规范的代码格式时,那么就会得到一个对应的错误。
比如:
这个错误表示:
- 此时我们触发了一个 《错误级别的错误》
- 触发该错误的位置是 在
Home.vue
的第 13 行 第九列 中 - 错误描述为:字符串必须使用单引号
- 错误规则为:
quotes
那么想要解决这个错误,通常情况下我们有两种方式:
- 按照
ESLint
的要求修改代码 - 修改
ESLint
的验证规则
按照 ESLint
的要求修改代码:
在
Home.vue
的第 13 行中把双引号改为单引号
修改 ESLint
的验证规则:
- 在
.eslintrc.js
文件中,新增一条验证规则
"quotes": "error" // 默认
"quotes": "warn" // 修改为警告
"quotes": "off" // 修改不校验
ESLint 与 代码保存格式化Prettier
(https://www.prettier.cn/) prettier
中文官网!)
prettier
是什么?
- 一个代码格式化工具
- 开箱即用
- 可以直接集成到
VSCode
之中 - 在保存时,让代码直接符合
ESLint
标准(需要通过一些简单配置)
在vscode中使用
-
在
VSCode
中安装prettier
插件(搜索prettier
),这个插件可以帮助我们在配置prettier
的时候获得提示
-
在项目中新建
.prettierrc
文件,该文件为perttier
默认配置文件 -
在该文件中写入如下配置:
{
// 不尾随分号
"semi": false,
// 使用单引号
"singleQuote": true,
// 多行逗号分割的语法中,最后一行不加逗号
"trailingComma": "none"
}
-
打开
VSCode
《设置面板》
-
在设置中,搜索
save
,勾选Format On Save
至此,即可在 VSCode
保存时,自动格式化代码!
VSCode 而言,默认一个 tab 等于 4 个空格,而 ESLint 希望一个 tab 为两个空格
如果 VSCode 安装了多个代码格式化工具
ESLint 和 prettier 之间的冲突问题
比如:
这个错误的意思是说:created
这个方法名和后面的小括号之间,应该有一个空格!
但是当我们加入了这个空格之后,只要一保存代码,就会发现 prettier
会自动帮助我们去除掉这个空格。
那么此时的这个问题就是 prettier
和 ESLint
的冲突问题。
针对于这个问题我们想要解决也非常简单:
-
打开
.eslintrc.js
配置文件 -
在
rules
规则下,新增一条规则
'space-before-function-paren': 'off'
- 该规则表示关闭《方法名后增加空格》的规则
至此整个的 perttier
和 ESLint
的配合使用就算是全部完成了。
在之后我们写代码的过程中,只需要保存代码,那么 perttier
就会帮助我们自动格式化代码,使其符合 ESLint
的校验规则。而无需我们手动进行更改了。