前端代码规范最佳实践:eslint + prettier + editorconfig + lint-staged + vscode的settings.json文件

.prettierrc常用配置


{
“printWidth”: 200,
“tabWidth”: 4,
“useTabs”: false,
“semi”: true,
“singleQuote”: true,
“bracketSpacing”: true,
“arrowParens”: “avoid”,
“eslintIntegration”: true,
“trailingComma”: “none”
}

{
“printWidth”: 200, // 超过最大值换行
“tabWidth”: 4, // 缩进字节数
“useTabs”: false, // 缩进不使用tab,使用空格
“semi”: true, / 句尾添加分号
“singleQuote”: true, // 使用单引号代替双引号
“bracketSpacing”: true, // 在对象,数组括号与文字之间加空格 “{ foo: bar }”
“arrowParens”: “avoid”, // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
“eslintIntegration”: true, // 让prettier使用eslint的代码格式进行校验
“trailingComma”: “none” // 在对象或数组最后一个元素后面是否加逗号
}


前言

项目开发过程中,用到各种代码规范性工具。

时不时就会出现,多种工具重复作用,相互之间有冲突的情况。

比如:按照 prettier 的规则格式化的代码,不符合 eslint 的规定。于是 eslint 报错。

一、开始做事之前,先明确目的

问自己一个问题:为项目配置代码规范,要达到什么目的?

【答案】

1.开发过程中,如果写出不符合我们规范的代码,能够及时提醒开发者,便于及时修复(eslint的能力)

2.保存/粘贴代码时、使用格式化快捷键时,能够自动按照我们制定的规范、格式化代码(prettier的能力)

3.不同开发者如果使用不同的编辑器(sublime/vscode)或系统(windows/mac),能够执行统一的代码风格标准。比如:缩进是tab还是space,结尾end_of_line是lf还是crlf(editorconfig的能力 —— 用于覆盖编辑器的默认配置)

二、再次明确 eslint、prettier、editorconfig 各自能力

1.eslint

通过配置 .eslintrc.* 制定团队代码规范。在代码编写的过程中,出现不符合规范的代码,进行红线提示。帮助开发者及时更正不符合规范的代码。同时,提供命令行检查规范及 auto-fix 能力。

【具体】

检查 main.js 文件的代码规范:

npx eslint main.js

自动修复 main.js 部分规范问题(通常如:缺少/多余分号,缩进格式等):

npx eslint main.js --fix

【注意】

eslint 的 auto-fix,能够修复的规范问题比较有限。

通常,需要较大变动才能修复的规范问题,eslint 无法自动修复。如:单行不能超过 80 个字符。

2.prettier

根据规范,自动格式化代码。具有比 eslint auto-fix 更加强大的代码规范性修复能力。

npx prettier main.js --write

prettier 会根据.eslintrc.* 的约定,修复 main.js 的规范性问题。包括较大变动才能修复的规范问题。如:单行不能超过 80 个字符。

3.editorconfig

编辑器配置。用于覆盖编辑器默认配置,以确保不同编辑器之间,代码格式的统一。

比如,使用 editorconfig,规定开发过程中,按键 tab 按钮,是以 tab 格式进行缩进,还是以 space 格式进行缩进。

如果没有约定,不同的编辑器,或者相同编辑器、不同开发者的配置存在差异,可能出现,有的人是 tab 缩进、有的人是 space 缩进的情况,造成代码风格的差异。

【注】

vscode 这类编辑器,需要自行安装 editorconfig 插件。

4. settings.json是什么?对VS Code有什么用?

settings.json文件是VS Code众多“配置文件”中的一个,用来控制诸多工作项的配置。

按快捷键【Ctrl】+【,】,打开VS Code的设置界面,
在这里插入图片描述
可以看到设置内容有“用户” “工作区”两个分支,它们其实就分别对应了两个不同位置的settings.json文件,前者位于与用户相关联的特定文件夹中,后者就会位于你当前打开的文件夹的.vscode子目录下。这两个settings.json文件其实都只会包含你修改过的设置项而软件的全局默认设置则记录在软件安装目录中的某个位置,用户是不必理会的。
在这里插入图片描述
这些配置文件具有工作区 用户 全局默认 的优先级,前面的配置覆盖后面的,这样做的好处是你可以为不同工作区、不同用户做不同配置,而不会互相干扰。而当你不小心在某个工作区做了错误的配置导致软件不能正常工作时,只需删除相应的设置项,或者settings.json文件,即可恢复到用户配置或默认配置。

早期的时候VS Code开发尚不完善时,是没有UI形式的设置界面的,那时全凭json文件自定义配置。现在的Sublime等著名编辑器也在使用这种配置方法。

三、进行配置(js文件)

1.安装 eslint + prettier

yarn add eslint prettier -D

安装 eslint-config-prettier

yarn add eslint-config-prettier -D

【作用】

让所有可能会与 prettier 规则存在冲突的 eslint rule,失效,并使用 prettier 的规则进行代码检查。

相当于,用 prettier 的规则,覆盖掉 eslint:recommended 的部分规则。

后面 prettier 格式化,也会根据这个规则来。因此,不会再有冲突。

【使用】

.eslintrc.js

{
    "extends": ["eslint:recommended", "prettier"]
}

3.安装 eslint-plugin-prettier

yarn add eslint-plugin-prettier -D

【作用】

将 prettier 的能力集成到 eslint 中。按照 prettier 的规则检查代码规范性,并进行修复。

【使用】

.eslintrc.js

{
    "rules":{
        "prettier/prettier":"error" // 不符合 prettier 规则的代码,要进行错误提示(红线)
    },

    "plugins": ["prettier"]
}

{
    "extends": ["eslint:recommended","plugin:prettier/recommended"]
}

【看一下效果】

npx eslint --fix main.js

至此,eslint 会拥有和 prettier 一样的修复能力。

像 prettier 一样,格式化所有不符合规范的代码。

四、ESLint和Prettier的区别:

4.1 ESLint

ESLint 是什么呢?是一个开源的 JavaScript 的 linting 工具,使用 espree 将 JavaScript 代码解析成抽象语法树 (AST),然后通过AST 来分析我们代码,从而给予我们两种提示:

  1. 代码质量问题:使用方式有可能有问题(problematic patterns)
  2. 代码风格问题:风格不符合一定规则 (doesn’t adhere to certain style guidelines)

4.2 Prettier

上面我们说到,ESLint 主要解决了两类问题,但其实ESLint 主要解决的是代码质量问题。另外一类代码风格问题其实 Airbnb JavaScript Style Guide 并没有完完全全做完,因为这些问题"没那么重要",代码质量出问题意味着程序有潜在 Bug,而风格问题充其量也只是看着不爽。

这时候就出现了 Prettier,Prettier 声称自己是一个有主见 (偏见) 的代码格式化工具 (opinionated code formatter),Prettier 认为格式很重要,但是格式好麻烦,我来帮你们定好吧。简单来说,不需要我们再思考究竟是用 single quote,还是 double quote 这些乱起八糟的格式问题,Prettier 帮你处理。最后的结果,可能不是你完全满意,但是,绝对不会丑,况且,Prettier 还给予了一部分配置项,可以通过.prettierrc 文件修改。

所以相当于Prettier 接管了两个问题其中的代码格式的问题,而使用 Prettier + ESLint 就完完全全解决了两个问题。但实际上使用起来配置有些小麻烦,但也不是什么大问题。因为 Prettier 和 ESLint 一起使用的时候会有冲突。这些冲突可以通过上面的 三、进行配置(js文件) 来进行解决

五、使用编辑器,自动格式化代码

  1. 使用自己编辑器的快捷键,格式化代码

    以 vscode 为例:shift + option + f

    默认格式化规则选择 prettier,即可完成代码格式化。

  2. 保存代码,自动格式化
    同样以 vscode 为例,打开你的 settings.json,添加下面这句话:

"editor.formatOnSave": true

【注】

至此,js、json、less等文件,均可实现自动格式化。

文件格式化规则,遵从我们在 .eslintrc.js 里的配置。也就是,使用我们的 prettier 插件默认规则去格式化。

【附】

如果你使用的是 webstorm,或许可以参考这个 https://www.jianshu.com/p/2f3cad152192

六、规范检查增强(husky + lint-staged)

在 git commit 之前,先强制执行prettier格式化(防止某些成员开发期间不开启编辑器格式化)、再检查代码规范,如果检查不通过、阻止提交。

6. 1.新建 .eslintignore + .prettierignore

.eslintignore、.prettierignore,参考如下:

.DS_Store
node_modules
dist
.gitignore
.eslintignore
.prettierignore
LICENSE
README.md
yarn.lock
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

6.2 安装

yarn add husky lint-staged -D

6.3 使用

package.json添加:

"scripts": {
    "lint": "eslint --fix",
    "prettier": "prettier --config .prettierrc --write"
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
   "src/**.{js,jsx}": [
        "npm run prettier", 
        "npm run lint",
        "git add ."
    ]
  }

git commit 之前,会自动使用 prettier 格式化 ignore 之外的代码。格式化后,自动检查所有文件,是否全部符合 eslint 规范。

存在不符合规范的代码,git commit 将被终止。

【注】

因为 prettier 只是会帮我们格式化代码,并不能够修复所有 eslint 错误,比如定义未使用的变量,prettier 不会自动帮我们删除,要手动删除。

因此,prettier 后再 eslint,是有必要的。


总结

参考链接

参考链接:搞懂 ESLint 和 Prettier
参考链接:前端代码规范最佳实践:eslint+prettier+editorconfig+lint-staged
参考链接: settings.json是什么?对VS Code有什么用?

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页