>

使用eslint和editorconfig规范代码

- 编辑:至尊游戏网站 -

使用eslint和editorconfig规范代码

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

2018/06/11 · JavaScript · 格式化

原来的书文出处: Edwin   


后生可畏、难题痛点

  • 在集体的项目支出进度中,代码维护所占的光阴比重往往超过新功效的支出。因而编写切合协会编码标准的代码是至关心器重要的,那样做不只能够比十分大程度地防止基本语法错误,也准保了代码的可读性。
  • 对此代码版本管理种类(svn 和 git恐怕别的),代码格式不一样等带来的难点是严重的,在代码意气风发致的动静下,因为格式区别,触发了本子管理种类标志为 diff,导致不可能检查代码和校验。

可是须求精晓的是,开拓规范不仅包罗代码格式标准,还应该有众多内容,这里只是独自说大顺码格式化标准而已。

title: 使用eslint和editorconfig规范代码
date: 2018-01-17
tags: [eslint]
categories: 情状布署

(生龙活虎)关于代码格式标准难题

代码格式规范的标准能够参见各大主流公司和社区,以下都以生机勃勃对常用主流标准:

  • 前端开荒标准之命名规范、html规范、css规范、js标准 – TencentWeb前端 IMWeb 团队社区 | blog | 团队博客 腾讯的
  • 编排「可读」代码的实践 | 天猫 FED | Tmall前端团队 淘宝的
  • GitHub – airbnb/javascript: JavaScript Style Guide airbnb 的
  • google 的
  • vue 的

参照别人的正经八百,制订相符本人团队选用的业内,太过复杂的行业内部实施起来太辛劳,太过轻易的正式不及未有专门的职业。

从未绝对的标准,独有顺应的标准!


(二)关于为啥要用 eslint 和 prettier问题

  • prettier 首借使为着格式化代码,而在尚未 prettier 早先,是用 eslint —fix和 编辑器自带代码格式来实行代码格式化的。
    • 症结:每一种编辑器会有不均等的代码格式,并且配置会比较费力。
    • prettier 已经逐步改为产业界主流的代码风格格式化学工业具。
    • 缓和 eslint 等工具的校验法规,因为将代码样式校验交给了 prettier,所以可以将代码校验的平整改进确地应用到代码真正的科班地点。
  • eslint 是至关重大照旧承受代码准绳校验,prettier 只调治代码风格,代码样式,eslint 才是的确反省代码是或不是切合规范的工具。

进而两个是内需相当使用的。

动用eslint和editorconfig标准代码

该文章总括自:慕课网: Webpack+React全栈工程框架结构项目实战精讲

参考:
vue项目配置eslint(附visio studio code配置)

VS Code里面怎么依照eslint来格式化代码?-刘祺的对答

VS Code中的插件以至有关布署

二、解决办法

旧有的排除办法是:

  • 应用 editorconfig 帮忙合营开垦工具的代码格式化。
  • 选择 eslint 检查代码
  • 使用 eslint —fix来修复不相符 eslint 准绳的代码,它会活动依照设置的平整来改换代码(它会蕴藏代码样式的规行矩步,然而eslint 的体裁法规并不太标准)。
  • 手动改革剩下的有题指标地方,大概有个别地点很难用准则来剖断的时候,就要求手动改良。

新的杀绝办法是:

  • 行使 editorconfig 扶植协作开采工具的代码格式化。
  • 使用 eslint 检查代码。
  • 利用 prettier 格式化代码。(可见为prettier是 eslint —fix 的狠抓版,用 prettier 来取代 eslint-fix
  • 手动纠正剩下的有题目标地方,大概有个别地点很难用准绳来判断的时候,就供给手动改良。

咋生龙活虎看,其实没啥不一致,以致只怕发掘新解决办法会越发艰巨了部分,其实步骤上着实如此,不过真的操作上,会减轻eslint 的规行矩步编写,也会巨惠扣过多手动改善样式的地点,格式化后的代码会更为精彩,耐看。

干什么要接收那几个

  1. 标准代码有扶植团队协作
  2. 纯手工标准费时费劲且不能够保障准确性
  3. 能合营编辑器自动提示错误,进步成本成效

三、具体操作

是因为英特网著作证实的比较混乱,这里主假若为着梳理整个工艺流程和笔触。

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 来做,但那边凭仗理编辑辑器会更方便人民群众。

eslint是什么

elint是随着ECMAScript版本一向更新的Js lint工具,插件丰裕,并且能够套用规范,法规特别丰裕,可以知足一大半团伙的需要。

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

开辟工具能够做过多东西,是付出代码的利器,可是分化的开垦工具会有差别的代码提示,代码格式化,代码检查的体制,那样的差距化会对组织代码标准(开垦和检查)带来众多主题材料,所以需求统风度翩翩。

理之当然,如若个人不乐意改动自个儿用惯的开荒工具的话,也没涉及,只要可以成功跟团队的支出规范保持大器晚成致也是能够的,但个人认为,这样难度十分大,毕竟开采工具和团体的费用标准不那么轻松融入。

这里只表达前端产业界最近最常用的开采工具来做例子 webstorm 。

eslint的使用

  1. 全局安装eslint及其正视
npm i eslint -g

npm i babel-eslint 
eslint-config-airbnb 
eslint-loader 
eslint-plugin-import 
eslint-plugin-jsx-a11y 
eslint-plugin-node 
eslint-plugin-promise 
eslint-plugin-react -g
  1. 在品种中安装eslint及其依赖
npm i eslint -D

npm i babel-eslint 
eslint-config-airbnb 
eslint-loader 
eslint-plugin-import 
eslint-plugin-jsx-a11y 
eslint-plugin-node 
eslint-plugin-promise 
eslint-plugin-react -D
  1. 在类型根目录下新建 .eslintrc 文件,如下图所示:

图片 1

.eslintrc文件

  1. 编写制定准则
{
  "parser": "babel-eslint", // 使用babel-eslint而非eslint自带的parser
  "env": {
    "browser": true,        // 代码执行环境: 浏览器 可以使用window的环境变量
    "es6": true,
    "node": true            // 可以使用node的一些环境变量
  },
  "parserOptions": {
    "ecmaVersion": 6,       // ecma语言版本
    "sourceType": "module"
  },
  "extends": "airbnb",      // 继承airbnb规范
  "rules": {
    "semi": [0],             // 不检测分号 0 = off, 1 = warn, 2 = error
    "react/jsx-filename-extension": [0] // 允许在js文件中编写jsx
  }
}
  1. 配置webpack
{
  enforce: 'pre',           // 在webpack编译之前进行检测
  test: /.(js|jsx)$/,
  loader: 'eslint-loader',
  exclude: [                // 除去node_modules
    path.resolve(__dirname, '../node_modules')
  ]
},
  1. 开发银行webpack,你就能够意识第一次全国代表大会堆报错新闻

图片 2

报错消息

一个多个找呢,考验耐性的每一日,原本小编个性这么好 :P

假诺不亮堂不当是怎么样看头,看到报错前边的森林绿字体吗,那一个正是法则名,copy一下来eslint rule翻开准则详细的情况。

(二)安装 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 语法),所以须要增多那一个插件来维系宽容性。
    • 官方有详细介绍:
  • eslint-plugin-html:
    • 为了让eslint 能够检查.vue文本的代码。

配置调节台的eslint检验条件

假如您想在调控台查看项目中兼有的warning 和 error,即手动在调节台通过eslint命令举行代码检查实验,就供给确认保障注重包都在全局景况目录下安装。

接下来施行

eslint --ext .js --ext .jsx client/

命令就可以。

--ext用来钦赐检验的文件格式,client/是检查评定的目录。

也能够给该指令提供三个越来越好记的别称,编辑package.json,在script属性中新添一条。就可以通过 npm run lint来检验连串中的warning 和 error了。

"scripts": {
   "lint": "eslint --ext .js --ext .jsx client/"
 },

什么样给品种配置eslint到这里就说罢了,最终说下问什么要在大局景况下安装信任包吗。

唯有全局蒙受下安装了eslint技能实施 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。
当项目实行eslint检查实验时,会先检查评定全局情形下有未有eslint,明显随笔第一步正是在全局安装了,那么全局意况下的eslint援引依赖包时也只会在大局意况下寻觅。
假如您以后或之后不要求给项目初叶化八个eslint配置,也无需在决定台出口全部的warning和error,那么就不用全局情形下的eslint。试行npm configs 查看全局意况下的包的装置路径,如果发掘存eslint就删掉好了。
[那生龙活虎段摘自简书]

下面小说中批评有一人朋友切磋:“eslint不断定必要全局安装
本地安装的话能够通过./node_modules/.bin/eslint --init来运行”

不情愿全局安装超级多信任包的同班能够大器晚成试。

注:上面是指命令行运营eslint。假使通过npm scripts运转eslint,没有必要全局安装,命令也无需丰裕路线前缀,npm会自动寻觅当地品种信任eslint

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

越来越多安顿形式仿效:WebStorm Setup · Prettier

凭借官方介绍webstorm 分别有2种管理:

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

假设用AMDliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, 则供给设置prettier插件和 eslint 插件,而webstorm 的话默许会帮你安装上,那也是推荐 webstorm 的来头。

eslint配合git

为了最大程度调整种种人的正统,大家可以在git commit代码的时候,使用git hook调用eslint举办代码规范验证,不专门的职业的代码不只怕提交到仓库。

  1. 安装husky (哈士奇:D)
npm i husky -D
  1. 修改package.json的scripts
"scripts": {
  ...
  "lint": "eslint --ext .js --ext .jsx client/",
  "precommit": "npm run lint"
}

precommit是三个钩子,当实践git commit的时候,独有经过了precommit才可以奉行成功(注意,此时的eslint是在调控台通过全局命令eslint运营的,所早先边须要全局安装eslint以致依附插件(第0步)。

1. WebStorm 2018.1 和上述的本子

法定私下认可已经集成了 prettier 协助,只要求安顿好一个大局的 prettier 模块调用形式就能够运用了(必得布置)。图片 3

图片 4

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

氪金王的平价,进级快,帮忙快,免破解,省心省力不积累闲钱!

editorconfig

不等编辑器对文本的格式会有自然的界别,假若不合併一些专门的学问,或者你跟旁人同盟的时候,每一次换代下来别人的代码就能够一大堆报错。

诸如:indent_style/indet_size/charset/end_of_line/insert_final_newline/trim_trailing_whitespace等等差别都会招致难题。

  1. 安装插件(webstorm跳过) 此处以VS Code为例

    去商铺中搜索 EditorConfig for VS Code进行设置,那样VS Code就能够先行依据项目根目录的.editorconfig文件对缩进之类风格进行配置,覆盖VS Code暗中同意配置。

    EditorConfig 插件会从文件所在目录开始逐级向上查找 .editorconfig,直到到达根目录大概找到富含属性 root=true 的 .editorconfig 文件截至。

    当找到全体满意条件的 .editorconfig 配置文件后,插件会读取这一个布署文件的剧情,间隔文件路线最短的配备文件中的属性优先级最高,同贰个文本依据从上到下格局读取,后面部分定义的同名属性优先级要大于顶上部分概念的。

    大好多编辑器皆有其黄金年代插件,尽管团队成员使用不一致的IDE,也得以很好的统一代码风格。

    若果有限补助.editorconfig那一个文件平昔就可以。

  2. 在档期的顺序根目录新建 .editorconfig

图片 5

editorconfig

  1. 编写配置文件
root = true                     // 表示当前是项目根目录

[*]                             // 所有文件都使用配置
charset = utf-8                 // 编码格式
indent_style = space            // Tab键缩进的样式,由space和table两种 一般代码中是space
indent_size = 2                 // 缩进size为2
end_of_line = lf                // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true     // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格

注: 如若开采IDE自动的格式化与eslint法规产生了冲突,记得本身去匡正格式化法规。

在VS Code中,点击 文件>首选项>设置

在搜寻框中输入“eslint.autoFixOnSave”

别忘了先在扩展商店安装好"ESLint"那个插件哦。

那样的话不须要自己手动格式化,保存的时候便格式化成功了,假使现身谬误还也许会产出波浪线友好提示。

小tip:若是有后生可畏对准绳自身不想设置完全失效,不过真正有意气风发行代码小编不能让她检查如何做?

答: 在该代码后边加多注释

import App from './App.jsx'; // eslint-disable-line

越来越多学学请参见官方文书档案:

  1. ESlint 官网:https://eslint.org/
  2. editorconfig 官网: http://editorconfig.org/

2. WebStorm 2017.3 和更早的版本

以此版本有2种景况:

  • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint 插件同盟,这里相当于选用 eslint 模块来驱动 prettier 模块,然后中间驱动则是靠eslint-plugin-prettier

第豆蔻梢头启用 eslint,何况安顿 eslint 模块地点,暗中同意会自动读取当前目录的 eslint.rc 配置文件,然后须求打开 npm 安装eslint-plugin-prettier其大器晚成插件,后边再统后生可畏验证。

图片 6
图片 7

  • ②是直接行使 prettier 作为额外工具来利用。
    图片 8图片 9图片 10
    图片 11地点三种形式的暗中同意火速键都以Cmd/Ctrl-Shift-A(在 mac 下是comm+shift+A),以为不舒性格很顽强在荆棘载途或巨大压力面前不屈,按需修改快速键就能够。

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

1. eslint 的配置

eslint 的检查法则是透过安排文件.eslintrc 达成的,不过各家有各家的 eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint 规则:

图片 12图片 13

详尽参照他事他说加以考察网站:

  • 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 发生的各样不当 | 汤姆yail的记得现场
  • Introducing Prettier with Eslint – Michael Hsu – Medium
  • Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier

    1 赞 收藏 评论

图片 14

本文由门户名站发布,转载请注明来源:使用eslint和editorconfig规范代码