来自 前端知识 2019-11-28 13:24 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

动用eslint和editorconfig标准代码

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

2018/06/11 · JavaScript · 格式化

初稿出处: Edwin   


生龙活虎、难题痛点

  • 在公司的品种成本进度中,代码维护所占的小时比重往往超过新成效的费用。因而编写切合组织编码标准的代码是根本的,那样做不仅可以够一点都不小程度地制止基本语法错误,也确认保证了代码的可读性。
  • 对于代码版本管理种类(svn 和 git大概别的卡塔 尔(英语:State of Qatar),代码格式不均等带给的标题是悲惨的,在代码生龙活虎致的动静下,因为格式分化,触发了本子管理连串标志为 diff,诱致不恐怕检查代码和校验。

不过急需理解的是,开垦规范不仅富含代码格式规范,还应该有许多内容,这里只是独自说南齐码格式化标准而已。

title: 使用eslint和editorconfig标准代码
date: 2018-01-17
tags: [eslint]
categories: 景况安排

(黄金时代卡塔尔国关于代码格式标准难点

代码格式标准的正规化能够参见各大主流集团和社区,以下都以有个别常用主流规范:

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

参谋外人的正式,拟定适合自身团队选拔的正经,太过复杂的正经实行起来太费力,太过简短的标准不比没有正经八百。

并未有断然的科班,唯有顺应的正经八百!


(二卡塔 尔(英语:State of Qatar)关于为什么要用 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 的体裁法规并不太正确卡塔 尔(英语:State of Qatar)。
  • 手动更正剩下的有题目标地点,或许有个别地点很难用准则来判断的时候,就须要手动改正。

新的消释办法是:

  • 选用 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 编辑器的插件卡塔 尔(英语:State of Qatar),主要正是运用 ide 编辑器做代码格式错误提示和代码格式管理,那些操作也得以动用 webpack 打包的时候来做,也足以采用 gulp 可能 npm 来做,但此处依附理编辑辑器会更有益。

eslint是什么

elint是随着ECMAScript版本一向更新的Js lint工具,插件足够,并且能够套用标准,法则特别丰硕,能够满意大多数团队的要求。

(生龙活虎卡塔 尔(阿拉伯语:قطر‎统一团队利用的开辟工具(webstorm,ide 编辑器卡塔 尔(英语:State of Qatar)

开辟工具能够做过多东西,是支付代码的利器,可是分裂的开垦工具会有两样的代码提示,代码格式化,代码检查的建制,那样的差距化会对团队代码标准(开荒和反省卡塔 尔(英语:State of Qatar)带来繁多题目,所以须要联合。

当然,若是个人不情愿更改自个儿用惯的开荒工具的话,也没涉及,只要能够文不加点跟团队的开垦标准保持生机勃勃致也是足以的,但个人感到,那样难度非常的大,终究开采工具和公司的开支规范不那么轻易融入。

那边只表明前端产业界这段时间最常用的开采工具来做例子 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 的差别卡塔 尔(英语:State of Qatar),也可以有存在各个情形,所以最佳依然安装上那几个插件。
    • 官方有详实介绍: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标准代码

关键词: