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

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

2018/06/11 · JavaScript
· 格式化

初稿出处:
Edwin   

如出一辙、问题痛点

  • 在组织的类别支出进程中,代码维护所占的时日比重往往超出新成效的开发。因此编写符合组织编码规范的代码是生死攸关的,这样做不仅可以很死程度地避免基本语法错误,也确保了代码的可读性。
  • 于代码版本管理网(svn 和
    git或者其它),代码格式不等同带来的题材是惨重的,在代码一致的状下,因为格式不同,触发了版本管理体系标记为
    diff,导致无法检查代码和校验。

但是急需理解之是,开发规范不仅仅包含代码格式规范,还有为数不少内容,这里只是独自说明代码格式化规范而已。

(一)关于代码格式规范问题

代码格式规范之科班可参照各大主流公司及社区,以下且是有常用主流规范:

  • 前端开发规范之命名规范、html规范、css规范、js规范 – 腾讯Web前端
    IMWeb 团队社区 | blog |
    团队博客 腾讯的
  • 修「可读」代码的执行 | Taobao FED |
    淘宝前端团队
    淘宝的
  • GitHub – airbnb/javascript: JavaScript Style
    Guide airbnb 的
  • https://google.github.io/styleguide/jsguide.html google 的
  • https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md
    vue 的

参考别人的专业,制定符合自己组织利用的科班,太过复杂的正儿八经执行起来最好费事,太过粗略的业内不如没有标准。

尚未绝对的正式,只有顺应之正式!

(二)关于为何而就此 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 和重新早的本子

设若用IntelliJ 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

详细参考网址:

  • AlloyTeam ESLint
    规则
  • 摆脱令人抓捕狂的ESlint 语法检测配置说明 – web攻城方略 – SegmentFault
    思否
  • ESLint配置文件.eslintrc参数说明 ·
    GitHub

而此不纠用啦一样种 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

详细参考:

  • 【译】EditorConfig介绍 |
    AlloyTeam
  • EditorConfig

(五) 严格督查,按照流程检查以及格式化代码,按照专业以及要求进行代码提交。

要明确一点,代码格式化需要由上而下执行,如果没强制性压力督促,那么是相持不了人类的惰性的。

任何代码检查及格式化流程应该规范也如下步骤:

  1. 动eslint 并且尝试自动修复所有题目(eslint 有 autofix
    提示,可以拓展—fix 修复,按照 .eslintrc 配置文件来进展修补)。
  2. 应用 prettier 格式化所有代码。
  3. 差异性修复代码,因为小格式或其他题目导致差而给眼前片管过滤后还剩下的。(通常前面两步基本化解了具有题目了)
  4. 将美好之格式化后底代码提交到版本库。

参照文档:

  • 什么样花30分钟解决 eslint 产生的各种不当 |
    Tomyail的记现场
  • Introducing Prettier with Eslint – Michael Hsu –
    Medium
  • Efficient Code Analyzing and Formatting (for Vue.js) with ESLint
    and
    Prettier

    1 赞 收藏
    评论

图片 11

相关文章