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

贰. WebStorm 201柒.3 和更早的本子

其1本子有二种景况:

  • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint
    插件合营,这里一定于选拔 eslint 模块来驱动 prettier
    模块,然后中间驱动则是靠eslint-plugin-prettier

率先启用 eslint,并且布署 eslint 模块地点,默许会自动读取当前目录的
eslint.rc 配置文件,然后须求实行 npm
安装eslint-plugin-prettier本条插件,后边再统一验证。

图片 1
图片 2

  • 贰是平昔接纳 prettier 作为额外工具来行使。
    图片 3图片 4图片 5
    图片 6上边三种办法的私下认可火速键都以Cmd/Ctrl-Shift-A(在
    mac 下是comm+shift+A),感觉不爽快,按需修改急忙键就能够。

三、具体操作

由于英特网文章证实的相比散乱,这里根本是为了梳理整个流程和思路。

(四) 配置 editorconfig

  • 艾德itorConfig能够补助开垦者在不一致的编辑器和IDE之间定义和敬服一致的代码风格。
  • 艾德itorConfig包涵七个用于定义代码格式的文本和一批编辑器插件,那几个插件能够让编辑器读取配置文件并依此格式化代码。

对此小编个人的领会正是,editorconfig能够帮忙开采工具在自行格式化恐怕电动排版只怕录入排版的时候实行代码格式化,但是只可以帮忙相比较简单的平整,可是也缓慢解决了1有些代码格式化的下压力和本钱,所以有比未有好,而且最佳要有。

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

详细参考:

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

(5) 严酷监督,遵照流程检查和格式化代码,根据专门的学问和要求开始展览代码提交。

要求明显一点,代码格式化须求由上而下执行,假诺未有强制性压力督促,那么是周旋不了人类的惰性的。

整整代码检查和格式化流程应该标准为如下步骤:

  1. 采取eslint 并且尝试自动修复全数标题(eslint 有 autofix
    提醒,能够开展—fix 修复,依据 .eslintrc 配置文件来开展修补)。
  2. 使用 prettier 格式化全数代码。
  3. 差别性修复代码,因为有点格式也许其余标题导致出错而被前两部过滤之后还余下的。(常常后面两步基本化解了有着题目了)
  4. 把大好的格式化后的代码提交到版本库。

参考文书档案:

图片 7

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

安装那个模块的意义在于,实际上,整个工艺流程最宗旨就是这几个地点,开荒工具纵然援救了那二个模块,但是最后运转是须要求以这二个模块安装好本事运用的。

JavaScript

// 这里须求全局安装最重点的四个node 模块,首假诺要让 ide
编辑器能够读取全局情状来调用那1个模块 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
      来做代码检查的话,就能够唤醒二种报错,固然他们都针对同一种代码错误,那一年就能够由这几个插件来关闭掉额外的报错。
    • 但一旦是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文本的代码。

1. WebStorm 201八.壹 和上述的版本

合法默许已经集成了 prettier 帮助,只需求安顿好一个大局的 prettier
模块调用方式就能够选择了(必须布署)。图片 8

图片 9

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

氪金王的裨益,晋级快,协理快,免破解,省心省力不省钱!

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

  • prettier 首若是为着格式化代码,而在尚未 prettier 之前,是用
    eslint —fix和 编辑器自带代码格式来进行代码格式化的。

    • 症结:各个编辑器会有差别的代码格式,而且配置会比较麻烦。
    • prettier 已经日趋成为产业界主流的代码风格格式化学工业具。
    • 缓慢解决 eslint 等工具的校验规则,因为将代码样式校验交给了
      prettier,所以能够将代码校验的规则更加纯粹地利用到代码真正的专门的职业地点。
  • eslint 是重中之重依旧担负代码规则校验,prettier
    只调节代码风格,代码样式,eslint
    才是实在反省代码是或不是符合标准的工具。

故此双方是亟需相称使用的。

1. eslint 的配置

eslint 的反省规则是透过安顿文件.eslintrc 落成的,不过各家有各家的
eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint
规则

图片 10图片 11

详尽参考网站:

不过这里不纠结用哪1种 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用作配置文件。

大纲

  1. 集合团队选择的开拓工具(webstorm,ide 编辑器)
  2. 安装 eslint 和 prettier (node 模块)
  3. 设置 eslint 和 prettier ( ide 编辑器的插件)
  4. 配置 eslint 和 prettier
  5. 配置 editorconfig (可选)
  6. 从严监察和控制,依据流程检查和格式化代码,依照标准和供给进行代码提交。

此处多了一步是设置 eslint 和 prettier ( ide
编辑器的插件),首要正是利用 ide
编辑器做代码格式错误提示和代码格式管理,那么些操作也足以行使 webpack
打包的时候来做,也能够动用 gulp 或然 npm
来做,但此处借助理编辑辑器会更有利。

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

越多布署格局参考:WebStorm Setup ·
Prettier

依据官方介绍webstorm 分别有2种管理:

  1. WebStorm 201八.1 和上述的本子
  2. WebStorm 20一⑦.三 和更早的本子

假诺用英特尔liJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs,
则必要设置prettier插件和 eslint 插件,而webstorm
的话暗中认可会帮你安装上,那也是引进 webstorm 的来头。

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 帮忙合作开垦工具的代码格式化。
  • 运用 eslint 检查代码
  • 使用 eslint —fix来修补不适合 eslint
    规则的代码,它会自动根据设置的规则来改换代码(它会含有代码样式的平整,但是eslint 的体制规则并不太可相信)。
  • 手动修改剩下的不寻常的地方,恐怕某个地点很难用规则来剖断的时候,就供给手动修改。

新的解决办法是:

  • 运用 editorconfig 帮助协作开采工具的代码格式化。
  • 采纳 eslint 检查代码。
  • 应用 prettier 格式化代码。(能够知晓为prettier是 eslint —fix
    的抓实版,用 prettier 来代替 eslint-fix
  • 手动修改剩下的有毛病的地点,可能某些地方很难用规则来推断的时候,就须要手动修改。

咋一看,其实没啥差别,以致可能开采新消除办法会尤其辛劳了壹部分,其实步骤上真正如此,不过的确操作上,会缓慢化解eslint
的平整编写,也会缩减过多手动修改样式的地点,格式化后的代码会进一步赏心悦目,耐看。

(一)关于代码格式标准难点

代码格式规范的正经能够参照各大主流公司和社区,以下都以有的常用主流规范:

参考旁人的正统,制定切合自个儿协会利用的标准,太过复杂的规范施行起来太费事,太过简短的职业不比未有正儿捌经。

一贯不相对的正规化,唯有顺应的业内!

(一)统一团队利用的开拓工具(webstorm,ide 编辑器)

开辟工具能够做过多东西,是支付代码的利器,不过不一致的开辟工具会有两样的代码提醒,代码格式化,代码检查的建制,那样的差别化会对共青团和少先队代码规范(开拓和自己斟酌)带来繁多标题,所以须要统一。

自然,假如个人不情愿更改自个儿用惯的开辟工具的话,也没涉及,只要能够一呵而就跟团队的开辟标准保持1致也是足以的,但个人以为,那样难度一点都比十分的大,毕竟开垦工具和团体的开销标准不那么轻巧融入。

此间只表明前端产业界近期最常用的开采工具来做例子 webstorm 。

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

2018/06/11 · JavaScript
· 格式化

初稿出处:
Edwin   

1、难题痛点

  • 在集体的品种支出进度中,代码维护所占的光阴比重往往超越新作用的开支。因而编写符合公司编码标准的代码是至关心珍贵要的,那样做不仅能够相当大程度地幸免基本语法错误,也准保了代码的可读性。
  • 对此代码版本管理体系(svn 和
    git只怕其余),代码格式不等同带来的主题素材是严重的,在代码一致的情形下,因为格式不一样,触发了版本管理体系标志为
    diff,导致力不从心检查代码和校验。

而是急需知道的是,开辟标准不仅仅包涵代码格式规范,还有为数不少剧情,这里只是独自说东晋码格式化标准而已。

相关文章