ca88官网梳理前端开发使用eslint和prettier来检查和格式化代码难题

梳理前端开发使用eslint和prettier来检查和格式化代码难题

2018/06/11 · JavaScriptca88官网,
· 格式化

原文出处:
Edwin   

一 、难点痛点

  • 在集体的档次支出进度中,代码维护所占的时刻比重往往超出新功效的支出。因而编写符合协会编码规范的代码是必不可缺的,那样做不仅能够十分的大程度地防止基本语法错误,也确保了代码的可读性。
  • 对于代码版本管理体系(svn 和
    git或然其余),代码格式不平等带来的题目是惨重的,在代码一致的情状下,因为格式差距,触发了本子管理种类标记为
    diff,导致不能检查代码和校验。

可是急需知道的是,开发规范不仅仅包涵代码格式规范,还有为数不少内容,这里只是独自说秦代码格式化规范而已。

(一)关于代码格式规范难点

代码格式规范的正式可以参见各大主流集团和社区,以下都是一些常用主流规范:

参照旁人的正儿八经,制定符合本人协会利用的正规化,太过复杂的业内实施起来太辛劳,太过简单的正规不如没有正式。

从未断然的规范,只有顺应的标准!

(二)关于为啥要用 eslint 和 prettier难点

  • prettier 紧假使为了格式化代码,而在尚未 prettier 以前,是用
    eslint —fix和 编辑器自带代码格式来进展代码格式化的。

    • 缺点:每一种编辑器会有分歧的代码格式,而且配置会相比费心。
    • prettier 已经渐渐成为业界主流的代码风格格式化工具。
    • 减轻 eslint 等工具的校验规则,因为将代码样式校验交给了
      prettier,所以可以将代码校验的平整更确切地使用到代码真正的正规地方。
  • eslint 是重点依旧承受代码规则校验,prettier
    只调整代码风格,代码样式,eslint
    才是当真反省代码是还是不是符合规范的工具。

就此两岸是内需同盟使用的。

二 、化解办法

旧有的化解办法是:

  • 运用 editorconfig 帮助合作开发工具的代码格式化。
  • 拔取 eslint 检查代码
  • 使用 eslint —fix来修复不相符 eslint
    规则的代码,它会自动依照设置的平整来改变代码(它会含有代码样式的条条框框,但是eslint 的体裁规则并不太可相信)。
  • 手动修改剩下的有题目的地方,可能有个别地点很难用规则来判定的时候,就要求手动修改。

新的化解办法是:

  • 接纳 editorconfig 协理协作开发工具的代码格式化。
  • 采纳 eslint 检查代码。
  • 应用 prettier 格式化代码。(可以领略为prettier是 eslint —fix
    的抓好版,用 prettier 来代替 eslint-fix
  • 手动修改剩下的有标题标地点,只怕有个别地点很难用规则来判断的时候,就必要手动修改。

咋一看,其实没啥分裂,甚至可能发现新消除办法会特别忙碌了一些,其实步骤上实在如此,可是的确操作上,会减轻
eslint
的平整编写,也会缩减过多手动修改样式的位置,格式化后的代码会愈加雅观,耐看。

叁 、具体操作

由于网上小说证实的可比散乱,那里根本是为着梳理整个流程和思路。

大纲

  1. 统一团队拔取的开发工具(webstorm,ide 编辑器)
  2. 安装 eslint 和 prettier (node 模块)
  3. 安装 eslint 和 prettier ( ide 编辑器的插件)
  4. 配置 eslint 和 prettier
  5. 配置 editorconfig (可选)
  6. 适度从紧监控,根据流程检查和格式化代码,根据正规和要求开展代码提交。

那边多了一步是安装 eslint 和 prettier ( ide
编辑器的插件),首要就是运用 ide
编辑器做代码格式错误指示和代码格式处理,那些操作也可以应用 webpack
打包的时候来做,也足以接纳 gulp 大概 npm
来做,但那里借助编辑器会更有益于。

(一)统一团队拔取的开发工具(webstorm,ide 编辑器)

开发工具可以做过多事物,是付出代码的利器,可是区其他开发工具会有区其他代码指示,代码格式化,代码检查的建制,那样的差别化会对团队代码规范(开发和反省)带来诸多题材,所以须求统一。

自然,假设个人不甘于更换自身用惯的开发工具的话,也没提到,只要可以不辱职分跟团队的支付规范保持一致也是足以的,但个体认为,那样难度比较大,终归开发工具和团队的开发规范不那么简单融合。

那里只表明前端业界方今最常用的开发工具来做例子 webstorm 。

(二)安装 eslint 和 prettier (node 模块)

设置这么些模块的含义在于,实际上,整个工艺流程最中央就是这些地点,开发工具就算支持了那三个模块,不过最后运营是必需要以那二个模块安装好才能动用的。

JavaScript

// 那里须要全局安装最根本的四个node 模块,紧即使要让 ide
编辑器能够读取全局环境来调用那一个模块 npm install eslint prettier -g
–save-dev // 这一个是为着 eslint 跟 prettier 可以联手利用 npm install
–save-dev eslint-plugin-prettier // 那一个是为着让 eslint 跟 prettier
包容,关闭 prettier 跟 eslint 冲突的rules npm install –save-dev
eslint-config-prettier

1
2
3
4
5
6
7
// 这里需要全局安装最主要的两个node 模块,主要是要让 ide 编辑器能够读取全局环境来调用这2个模块
npm install eslint prettier -g –save-dev
 
// 这个是为了 eslint 跟 prettier 可以联合使用
npm install –save-dev eslint-plugin-prettier
// 这个是为了让 eslint 跟 prettier 兼容,关闭 prettier 跟 eslint 冲突的rules
npm install –save-dev eslint-config-prettier

增补备注:

  • eslint-config-prettier :
    • 以此插件是只要eslint的条条框框和prettier的规则爆发冲突的时候(首假设不必要的争论),例如eslint
      限制了亟须单引号,prettier也限制了总得单引号,那么一旦用 eslint
      驱动 prettier
      来做代码检查的话,就会指示2种报错,尽管她们都指向同一种代码错误,那几个时候就会由这一个插件来关闭掉额外的报错。
    • 但如果是eslint 只担负检测代码,prettier
      只承担格式化代码,那么她们中间互不苦恼,相当于说,也是足以不设置那么些插件的,可是因为社团的人手的差别性(固然同3个开发工具也有版本差别,也有应用
      prettier 和 eslint
      的差异),只怕有存在种种情形,所以最好只怕安装上那些插件。
    • 官方有详细介绍:GitHub – prettier/eslint-config-prettier: Turns
      off all rules that are unnecessary or might conflict with
      Prettier.

模块参考音讯:Integrating with ESLint ·
Prettier

以下顺便说一下别样咱们常用到的eslint 模块:

JavaScript

npm -g install babel-eslint eslint-plugin-html –save-dev

1
npm -g install babel-eslint eslint-plugin-html –save-dev
  • babel-eslint :
    • 有个别代码是没被 eslint 援救的(因为 babel
      也是负责那种工作,转译不被辅助的 js
      语法),所以需求加上这么些插件来维持包容性。
    • 法定有详实介绍:https://github.com/babel/babel-eslint
  • eslint-plugin-html:
    • 为了让eslint 可以检查.vue文本的代码。

(三)安装webstorm 的eslint 插件和 prettier 插件并启用插件

更多配备格局参考:WebStorm Setup ·
Prettier

基于官方介绍webstorm 分别有2种处理:

  1. WebStorm 2018.1 和上述的版本
  2. WebStorm 2017.3 和更早的版本

假诺用速龙liJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs,
则要求安装prettier插件和 eslint 插件,而webstorm
的话暗中同意会帮您安装上,那也是推荐 webstorm 的来由。

1. WebStorm 2018.1 和上述的本子

合法暗中同意已经集成了 prettier 帮忙,只需要配备好一个大局的 prettier
模块调用方式就足以接纳了(必须安顿)。ca88官网 1

ca88官网 2

火速键是:Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux

氪金王的益处,升级快,协助快,免破解,省心省时不省钱!

2. WebStorm 2017.3 和更早的版本

以此版本有2种情景:

  • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint
    插件协作,那里相当于接纳 eslint 模块来驱动 prettier
    模块,然后中间驱动则是靠eslint-plugin-prettier

第三启用 eslint,并且布置 eslint 模块地点,默许会自动读取当前目录的
eslint.rc 配置文件,然后须求进行 npm
安装eslint-plugin-prettier其一插件,前面再统一验证。

ca88官网 3
ca88官网 4

  • ②是直接接纳 prettier 作为额外工具来利用。
    ca88官网 5ca88官网 6ca88官网 7
    ca88官网 8上面三种方法的默许快速键都是Cmd/Ctrl-Shift-A(在
    mac 下是comm+shift+A),觉得不舒服,按需修改急迅键即可。

(三) 配置 eslint 插件和 prettier插件

1. eslint 的配置

eslint 的自我批评规则是通过安插文件.eslintrc 达成的,但是各家有各家的
eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint
规则

ca88官网 9ca88官网 10

详见参考网址:

然而那里不纠结用哪类 eslint
的布局,具体看项目和公司,那里只是表明需求做 eslint
的配置,并且要求做一些表明:

.eslintrc 配置文件必要添加修改地点,重假诺为着
prettier插件和eslint-config-prettier
插件和eslint-plugin-prettier插件使用的:

JavaScript

// 因为使用了 eslint 和 prettier,所以要加上她们 extends: [
‘eslint:recommended’, ‘plugin:prettier/recommended’], // required to
lint *.vue files 使用 html参数 plugins: [‘html’, ‘prettier’], //
rules 规则就依据各家写法。

1
2
3
4
5
6
7
// 因为使用了 eslint 和 prettier,所以要加上他们
extends: [ ‘eslint:recommended’, ‘plugin:prettier/recommended’],
 
// required to lint *.vue files 使用 html参数
plugins: [‘html’, ‘prettier’],
 
// rules 规则就按照各家写法。

在 webstorm 下,在档次根目录.eslintrc作为配置文件。

2. prettier的配置

prettier 的反省规则是因此安顿文件.prettierrc
完成的,不过貌似的话,只须求布置少部分规则即可:

JavaScript

{ “printWidth”: 100, “singleQuote”: true, “semi”: false }

1
2
3
4
5
{
  "printWidth": 100,
  "singleQuote": true,
  "semi": false
}

有或许会油可是生的意况是,prettier 格式化后,全体加了子公司,可是 eslint
又要去掉分号,那么就会再也了,这里可以简不难单地设置 prettier 的分店设置跟
eslint
保持一致,其余如此类推,但只适用在多少个比较特别的地点,可以参考官方文档。官方有详细的牵线:Configuration
File · Prettier

(四) 配置 editorconfig

  • 艾德itorConfig可以资助开发者在不同的编辑器和IDE之间定义和保安一致的代码风格。
  • 艾德itorConfig包括3个用以定义代码格式的文本和一批编辑器插件,这个插件可以让编辑器读取配置文件并依此格式化代码。

对此作者个人的通晓就是,editorconfig可以匡助开发工具在自行格式化或许电动排版可能录入排版的时候进行代码格式化,但是只好协理比较不难的条条框框,然则也减轻了一有的代码格式化的下压力和基金,所以有比尚未好,而且最好要有。

JavaScript

// 放在项目根目录的.editorconfig文件 root = true [*] charset = utf-8
indent_style = space indent_size = 2 end_of_line = lf
insert_final_newline = true trim_trailing_whitespace = true

1
2
3
4
5
6
7
8
9
10
// 放在项目根目录的.editorconfig文件
root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

详见参考:

(五) 严峻监督,依照流程检查和格式化代码,根据正规和须求开展代码提交。

内需鲜美赞臣点,代码格式化须求由上而下执行,假如没有强制性压力督促,那么是势不两立不了人类的惰性的。

全总代码检查和格式化流程应该规范为如下步骤:

  1. 采纳eslint 并且尝试自动修复全部难题(eslint 有 autofix
    提示,可以展开—fix 修复,依据 .eslintrc 配置文件来举行修补)。
  2. 使用 prettier 格式化全体代码。
  3. 差距性修复代码,因为有个别格式只怕其余题材造成出错而被前两部过滤之后还剩下的。(日常前面两步基本缓解了独具难题了)
  4. 把卓绝的格式化后的代码提交到版本库。

参考文档:

ca88官网 11

相关文章