来自 奥门威尼斯网址 2019-09-19 11:06 的文章
当前位置: 威尼斯国际官方网站 > 奥门威尼斯网址 > 正文

采纳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标准代码

关键词: