来自 软件资讯 2019-09-17 16:05 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

使用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

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:使用eslint和editorconfig规范代码

关键词: