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

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

2018/06/11 · JavaScript
· 格式化

初稿出处:
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 模块)

设置那几个模块的意思在于,实际上,整个工艺流程最基本就是以此地方,开发工具即使匡助了那2个模块,不过最终运行是必需要以那2个模块安装好才能运用的。

JavaScript

// 那里须要全局安装最关键的多少个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

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
      只担负格式化代码,那么她们之间互不干扰,也就是说,也是能够不安装那几个插件的,不过因为组织的人手的差别性(尽管同一个开发工具也有版本差别,也有利用
      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
模块调用形式就可以运用了(必须配备)。图片 1

图片 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其一插件,前面再统一验证。

图片 3
图片 4

  • ②是直接采纳 prettier 作为额外工具来利用。
    图片 5图片 6图片 7
    图片 8地点三种情势的默许快速键都是Cmd/Ctrl-Shift-A(在
    mac 下是comm+shift+A),觉得不爽快,按需修改快捷键即可。

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

1. eslint 的配置

eslint 的检讨规则是通过配备文件.eslintrc 已毕的,不过各家有各家的
eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint
规则

图片 9图片 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

  • EditorConfig可以扶持开发者在分化的编辑器和IDE之间定义和掩护一致的代码风格。
  • EditorConfig包罗一个用以定义代码格式的公文和一批编辑器插件,这几个插件可以让编辑器读取配置文件并依此格式化代码。

对此我个人的明亮就是,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

详见参考:

(五) 严厉督查,根据流程检查和格式化代码,根据正规和须要开展代码提交。

内需鲜惠氏(Nutrilon)点,代码格式化必要由上而下执行,若是没有强制性压力督促,那么是对立不了人类的惰性的。

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

  1. 运用eslint 并且尝试自动修复所有难题(eslint 有 autofix
    提醒,可以开展—fix 修复,根据 .eslintrc 配置文件来拓展修复)。
  2. 使用 prettier 格式化所有代码。
  3. 差距性修复代码,因为有点格式或者其余标题造成出错而被前两部过滤之后还余下的。(日常前边两步基本解决了具备难点了)
  4. 把大好的格式化后的代码提交到版本库。

参考文档:

图片 11

相关文章