在js开发前需要的东西,使用eslint和editorconfig规范

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

2018/06/11 · JavaScript · 格式化

原来的书文出处: Edwin   


1. 前言

俗话说,无规矩家有家规,工欲善其事必先利其器。

在开展前端职业快2年时光了,就算平时写代码会写注释,可是并从未太相符标准,即便很已经知道能够用eslint来标准代码,还应该有editorconfig来节制代码风格,可是在平日干活中并从未严俊依据那一个来做。

直到公司来了一个新同事把那事提了出去,并在集体中放大。当贰个公司逐步变大时,很有必不可少统一代码风格和正式。

对此写前端js代码,这里推荐vscode,本文介绍的插件相关的也是vscode的

小编简单介绍:ASCE1885, 《Android 高档进级》作者。

大器晚成、难题痛点

  • 在团队的档案的次序开支进度中,代码维护所占的时刻比重往往超过新职能的支出。由此编写切合公司编码规范的代码是根本的,这样做不仅可以够比较大程度地制止基本语法错误,也可能有限支撑了代码的可读性。
  • 对此代码版本管理体系(svn 和 git恐怕其余),代码格式不平等带来的难题是生死攸关的,在代码意气风发致的意况下,因为格式区别,触发了本子管理种类标识为 diff,导致不可能检查代码和校验。

而是必要驾驭的是,开采用国际标准和国外先进标准准不只有富含代码格式标准,还应该有大多内容,这里只是独自说唐宋码格式化标准而已。

title: 使用eslint和editorconfig规范代码
date: 2018-01-17
tags: [eslint]
categories: 情形安插

2. 代码注释标准

  • 微信公众号:asce1885
  • 小密圈:Android高端升级,详细情况见那篇文章。
  • Github,简书,微博,CSDN 知乎

(大器晚成)关于代码格式规范难点

代码格式标准的正经八百能够参照各大主流公司和社区,以下都以一些常用主流标准:

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

参照别人的正式,制定符合本人组织利用的正经,太过复杂的正统施行起来太辛勤,太过简短的规范不比未有专门的学问。

并未有绝没有错科班,只有顺应的正经八百!


2.1 文件最早

对此新建八个文本,有供给写明开辟者是什么人,注解,好让旁人只怕同事知道这是何人开拓的,不正常能高效稳定。对于标记开辟者消息的插件,这里介绍二个vscode-fileheader,在vscode上下载安装后,就足以团结陈设一下,来飞快转移笔者音讯,在插件下载页面有详尽的介绍如何运用。效果如下图:

图片 1

image.png

图片 2

(二)关于为啥要用 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中的插件以至有关配置

2.2 代码注释标准

加上须求的笺注,对三个有权利心、有道德轨范的前端必需有所的好习于旧贯,能够大大进步代码的可维护性、可读性。
首先熟识一下html、css、js的解说的写法:
1、HTML注释语法:

<!--注释的内容-->

2、css注释语法

/* 注释内容 */
/* ----------文字样式开始---------- */

3、javaScript注释

//注释内容
/*注释内容*/

接下去是对注释在此三种代码中应用的位置,怎么着写注释举办总括一下。(依照个体的习贯大概不风度翩翩致)

1、html注释
动用的岗位:
1)平时会采用在某个重大节点标签甘休的前面,如:

<div class="wrap">
<div class="main">
...
</div><!--main end-->
<div><!--wrap end-->

2)使用在一些巡回的完工的末端,如:

<ul class="list">
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ul><!--list loop-->

这一切皆以为了程序在嵌套的时候更为有助于、明了。方便了旁人同有时候也就有帮忙了一心一德。程序嵌套的很乱,到时要你去订正那也是意气风发份挺复杂的工序。

2、css注释
貌似会使用在概念某些模块样式的上边,表明这段样式是功力于哪段模块,如:

/*通用 - 评论*/
.comment{...}
/*相册*/
.photo{...}
/*分享*/
.share{...}
/*投票*/
.vote{...}

3、javascript注释
时下剧本、样式的注明格式都有一个早已成文的预订标准,最先是YUI Compressor制订。

/**
* 这里的注释内容【会】被压缩工具压缩
*/

/*!
* 这里的注释内容【不会】被压缩工具压缩
* 与上面一个注释块不同的是,第2个*换成了!
*/

其间提起此地聊起的压缩工具备YUI Compressor 、Google Closure Compiler、gulp-uglify、grunt-contrib-uglify等,那么些压缩工具都协助上述的裁减约定。日常把公文的要紧音讯放在第2种注释内容里,如文件名称、版本号、作者等。

关于那几个首要音讯,都由一些十分重要词和自然的格式来书写。关键词书写格式为:

/**
* @author ydr.me
* @version 1.0
*/

应用@key desc格式来书写,常用的首要性词有:

关键词 描述
@auhor 作者
@param 参数
@example 示例
@link 链接
@namespace 命名空间
@requires 依赖模块
@return 返回值
@version 版本号

当中,param关键词的格式为:

/**
* @param {String} 参数描述
*/

常用的js 函数注释比方

/**
 * 函数功能
 * @param 参数
 * @return 返回值
 */

聊到底,注释也是字符也是会有流量爆发。由此当页面公布到正规地址的时候,最棒增进一步优化流程。
减掉进程为非逆进程,保险本地是风尚的同时蕴藏注释的文本,压缩后上传服务器。服务器端的公文不可用作本地调节和测量检验用。那些,今后的包裹工具都得以解决。

cat.png

二、清除办法

旧有的解决办法是:

  • 选取 editorconfig 扶持协作开采工具的代码格式化。
  • 动用 eslint 检查代码
  • 使用 eslint —fix来修补不合乎 eslint 准则的代码,它会自行根据设置的规行矩步来更换代码(它会满含代码样式的准则,不过eslint 的样式准则并不太可信赖)。
  • 手动改善剩下的临时之处,或许稍微地方很难用法则来推断的时候,就要求手动修改。

新的解决办法是:

  • 应用 editorconfig 帮助合营开采工具的代码格式化。
  • 运用 eslint 检查代码。
  • 接收 prettier 格式化代码。(能够掌握为prettier是 eslint —fix 的压实版,用 prettier 来取代 eslint-fix
  • 手动改革剩下的反常的地点,或然有个别地点很难用准绳来决断的时候,就要求手动校勘。

咋意气风发看,其实没啥不相同,以致可能发掘新化解办法会特别辛劳了有的,其实步骤上的确这样,不过真的操作上,会减轻eslint 的法规编写,也会裁减过多手动更改样式的地点,格式化后的代码会愈发奇妙,耐看。

为啥要接纳那一个

  1. 专门的学业代码有助于团队通力合营
  2. 纯手工业标准费时费劲且不能确定保证准确性
  3. 能相配编辑器自动提示错误,提升开垦效能

3. editorconfig

editorConfig不是如何软件,而是一个称号为.editorconfig的自定义文件。该文件用来定义项目标编码标准,编辑器的一坐一起会与.editorconfig 文件中定义的相像,而且其事先级比编辑器自个儿的装置要高,那在多个人合营开荒项目时非常有用而且供给

稍微编辑器暗许协助editorConfig,如webstorm;而有个别编辑器则须求安装editorConfig插件,如ATOM、Sublime、VS Code等

当张开三个文本时,EditorConfig插件会在开垦文件的目录和其每一流父目录查找.editorconfig文件,直到有二个安顿文件root=true

EditorConfig的陈设文件是从上往下读取的同有的时候间近日的EditorConfig配置文件会被第意气风发读取. 匹配艾德itorConfig配置文件中的配置项会依据读取顺序被利用, 所以近来的配置文件中的配置项具有优先权

假设.editorconfig文件并未有进展一些配置,则应用编辑器暗中同意的设置

常用的安插为:

root = true

[*]
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = 120

vscode 插件 EditorConfig for VS Code

在《作者的 React Native 技巧树点亮安顿 の React Native 开采 IDE 选型和安排》 和 《最棒用的 Visual Studio Code 本性和插件》 这两篇小说中,大家对 Visual Studio Code 的特点和在 React Native 中的轻松计划有了自然的刺探,但针对 React Native 开采来说,还相当不足详细,本文就来详细探究怎样越来越好的为 React Natiev 开荒定制 VSCode。

三、具体操作

鉴于英特网文章证实的相比混乱,这里关键是为着梳理整个工艺流程和笔触。

eslint

4. eslint

在React Babel Webpack情形中利用ESLint
常用的布署

{
    'root': true,
    'parser': 'babel-eslint',
    'extends': ['standard', 'plugin:react/recommended'],
    'parserOptions': {
        'ecmaVersion': 6,
        'sourceType': 'module',
        'ecmaFeatures': {
            'jsx': true,
            'experimentalObjectRestSpread': true,
            'impliedStrict': true
        }
    },
    'env': {
        'browser': true,
        'node': true,
        'es6': true
    },
    'plugins': ['import', 'react'],
    'rules': {
        'no-console': ['error', {'allow': ['warn', 'error']}], // 禁止conosle 允许console.warn, console.error
        'no-alert': 'error',                                      // 禁止alert, promp, confirm
        'no-empty': ['error', {'allowEmptyCatch': true}],       // 禁止空代码块(catch除外)
        'no-extra-semi': 'error',                                 // 禁止不必要的分号
        'default-case': 'error',                                  // switch语句必须有default
        'dot-notation': 'error',                                  // 尽可能使用点号
        'no-else-return': 'error',                                // 禁止 if 语句中 return 语句之后有 else 块
        'no-empty-function': 'error',                             // 禁止出现空函数
        'radix': 'error',                                         // 强制在parseInt()使用基数参数
        'semi': ['error', 'always'],
        'quotes': ['error', 'single'],
        'indent': ['error', 'tab'],
        'no-tabs': 'off',
        'one-var': 'off',
        'no-mixed-spaces-and-tabs': ['off', 'smart-tabs'],
        'no-extra-parens': 'warn',
        'no-template-curly-in-string': 'off',
        'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}],
        'keyword-spacing': ['warn', {'before': true, 'after': true}],
        'no-multi-spaces': ['warn', {'ignoreEOLComments': true}],
        'spaced-comment': 'off',
        'comma-dangle': 'off',
        'react/display-name': 'off',
        'react/prop-types': ['warn', {ignore: ['match', 'location', 'history']}],
        'react/self-closing-comp': ['error', {'component': true}],
        'import/no-webpack-loader-syntax': 'off'
    }
}

更加多关于eslint 的情节可以看React Babel Webpack

vscode 插件 ESLint

React Native Tools[[1]](https://www.jianshu.com/p/caa802ee055b#fn1)

图片 3

MacHi 2017-05-01 18-38-52.png

微软官方为 React Native 开辟提供的特别的插件,依据官方网址的印证实行插件的装置就能够。这些插件使得开荒者能够在 VS Code 中调养 React Native 代码,飞速试行 react-native 命令,以致对 React Native 的 API 具有智能提示功用,如下所示:

图片 4

image_1ardliff01st41t5u19op1pgif129.png-153.7kB

大纲

  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工具,插件丰富,何况可以套用规范,准绳非常丰盛,能够知足一大半组织的需求。

5. 城门失火文章

  1. Visual Studio Code 编辑器使用
  2. 在React Babel Webpack意况中选择ESLint
  3. 编码标准

原来的书文地址: 在js开荒前必要的事物(规范)

Flow Language Support[[2]](https://www.jianshu.com/p/caa802ee055b#fn2)

图片 5

MacHi 2017-05-01 18-42-22.png

Flow[[3]](https://www.jianshu.com/p/caa802ee055b#fn3) 是 Twitter 出品的贰个用于 JavaScript 代码静态类型检查的工具,能够用来开掘Javascript 代码中的类型错误。那些插件是在 VS Code 中支持 Flow 的插件,当然前提是设置好 Flow。

(生机勃勃)统一团队采用的开荒工具(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 文件,如下图所示:

图片 6

.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,你就能开掘一大堆报错新闻

图片 7

报错音信

四个三个找呢,考验耐性的随即,原本自家性情这么好 :P

只要不领会不当是什么样意思,看到报错前边的丁香紫字体吗,那几个便是平整名,copy一下去eslint rule翻开法则实际情况。

ESLint[[4]](https://www.jianshu.com/p/caa802ee055b#fn4)

图片 8

MacHi 2017-05-01 18-41-40.png

静态代码检查入眼用来对代码的编制程序标准,语法错误等展开围观,进而在代码推行之前发掘可能存在的标题。在前后相继设计领域,大约每大器晚成种语言都有配套的静态代码检查工具,举个例子C 和 C 语言的 PC-lint[[5]](https://www.jianshu.com/p/caa802ee055b#fn5) 和 FlexeLint[[6]](https://www.jianshu.com/p/caa802ee055b#fn6),Java 语言的 FindBugs[[7]](https://www.jianshu.com/p/caa802ee055b#fn7),Android 开垦中的 Android Lint,iOS 开荒中的 OClint[[8]](https://www.jianshu.com/p/caa802ee055b#fn8) 等等。React Native 开荒中许多日子都以使用的 Javascript 语言,雷同其余语言,Javascript 也许有友好的静态代码检查工具,而个中近日使用最广的就是ESLint,那几个插件正是将 ESLint 集成进 VS Code 的插件,当然前提是亟需设置好 ESLint[[9]](https://www.jianshu.com/p/caa802ee055b#fn9)

(二)安装 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

Prettier - JavaScript formatter[[10]](https://www.jianshu.com/p/caa802ee055b#fn10)

图片 9

MacHi 2017-05-01 18-43-07.png

每一个企业各种团队都有友好的编码标准,而代码格式化成效是加强开拓者输出符合标准代码效用的工具,这一个插件是在 VS Code 中扶植 Prettier 的插件,Prettier[[11]](https://www.jianshu.com/p/caa802ee055b#fn11) 是一个 Javascript 代码的格式化学工业具。

(三)安装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步)。

Auto Close Tag[[12]](https://www.jianshu.com/p/caa802ee055b#fn12)

图片 10

MacHi 2017-05-01 18-35-30.png

增加支付效用的插件,在 VS Code 中支持电动补全 HTML/XML 关闭标签。

1. WebStorm 2018.1 和上述的本子

法定暗中同意已经集成了 prettier 扶助,只须求安顿好一个大局的 prettier 模块调用格局就能够运用了(必得陈设)。图片 11

图片 12

快捷键是: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

图片 13

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/

Auto Rename Tag[[13]](https://www.jianshu.com/p/caa802ee055b#fn13)

图片 14

MacHi 2017-05-01 18-36-51.png

增长支付功效的插件,在 VS Code 中扶助重命名 HTML/XML 对应标签。

2. WebStorm 2017.3 和更早的版本

这几个本子有2种意况:

  • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint 插件合营,这里也便是选拔 eslint 模块来驱动 prettier 模块,然后中间驱动则是靠eslint-plugin-prettier

首先启用 eslint,并且计划 eslint 模块地方,暗中同意会自动读取当前目录的 eslint.rc 配置文件,然后需求开展 npm 安装eslint-plugin-prettier本条插件,前边再统生机勃勃验证。

图片 15
图片 16

  • ②是直接使用 prettier 作为额外工具来接纳。
    图片 17图片 18图片 19
    图片 20地点两种办法的默许神速键皆以Cmd/Ctrl-Shift-A(在 mac 下是comm shift A),以为不舒服,按需改良快速键就能够。

Color Highlight[[14]](https://www.jianshu.com/p/caa802ee055b#fn14)

图片 21

MacHi 2017-05-01 18-43-44.png

代码中常常会并发设置颜色,常常是用十三进制格式来代表三个颜色值,比如 #EB6066,但以此值对开垦者来说是平昔不意义的,大家看不出来到底对应的是什么样颜色,这些插件帮忙开荒者在 VS Code 中援救十二进制格式的颜料实行预览。

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

Document This[[15]](https://www.jianshu.com/p/caa802ee055b#fn15)

图片 22

MacHi 2017-05-01 18-37-27.png

在 VS Code 中扶助在 TypeScript 和 JavaScript 文件中自动生成 JSDoc 注释的插件。

图片 23

1. eslint 的配置

eslint 的检讨准绳是通过布置文件.eslintrc 完结的,但是各家有各家的 eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint 规则:

图片 24图片 25

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

  • 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作为配置文件。

Git Blame[[16]](https://www.jianshu.com/p/caa802ee055b#fn16)

图片 26

MacHi 2017-05-01 18-38-02.png

在团队五个人合作开发进度中,我们平日须要领悟某行代码近来贰回是何人改进的,Git Blame 插件就提供了那样二个利于的成效。

图片 27

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

Rainbow Brackets[[17]](https://www.jianshu.com/p/caa802ee055b#fn17)

在 React Native 开荒中平时会存在三种括号混合使用,为了能够更加好的分别,那些插件支持分化品类的括号进行彩色着色,扶持圆括号,方括号和花括号。

图片 28

(四) 配置 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

React-Native/React/Redux snippets for es6/es7[[18]](https://www.jianshu.com/p/caa802ee055b#fn18)

图片 29

MacHi 2017-05-01 18-34-49.png

在 VS Code 中匡助 React Native,React,Redux 常见代码片段的插件。

(五) 严峻监督,遵照流程检查和格式化代码,依照正规和供给实行代码提交。

须要鲜可瑞康(Karicare)点,代码格式化需求由上而下推行,若无强制性压力督促,那么是对立不了人类的惰性的。

风流倜傥体代码检查和格式化流程应该规范为如下步骤:

  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 赞 收藏 评论

图片 30

TODO Highlight[[19]](https://www.jianshu.com/p/caa802ee055b#fn19)

图片 31

MacHi 2017-05-01 18-32-18.png

在 VS Code 中支持 TODO:FIXME: 等项目注释关键词高亮的插件。

图片 32

Path Intellisense[[20]](https://www.jianshu.com/p/caa802ee055b#fn20)

图片 33

MacHi 2017-05-01 18-49-37.png

在 VS Code 中协理活动补全文件路线名的插件。

AutoFileName[[21]](https://www.jianshu.com/p/caa802ee055b#fn21)

图片 34

MacHi 2017-05-01 20-13-03.png

另叁个自行补全文件名的插件,如下所示:

图片 35

EditorConfig[[22]](https://www.jianshu.com/p/caa802ee055b#fn22)

图片 36

MacHi 2017-05-01 20-25-05.png

EditorConfig[[23]](https://www.jianshu.com/p/caa802ee055b#fn23) 通过在工程中加进叁个安插文件以致安装相应的插件,实未来区别编辑器和 IDE 保持工程中代码文件编码格式的生机勃勃致性,EditorConfig 的安插文件具备特出的可读性,并能很好的和版本调节系统一起同盟。更详尽内容能够参见《作者的 React Native 技巧树点亮布置 の 代码风格统大器晚成工具 EditorConfig》一文。


  1. https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native ↩

  2. https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode ↩

  3. https://flow.org/ ↩

  4. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ↩

  5. http://www.gimpel.com/html/pcl.htm ↩

  6. http://www.gimpel.com/html/flex.htm ↩

  7. http://findbugs.sourceforge.net/ ↩

  8. http://oclint.org/ ↩

  9. http://eslint.org/ ↩

  10. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode ↩

  11. https://github.com/prettier/prettier ↩

  12. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag ↩

  13. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag ↩

  14. https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight ↩

  15. https://marketplace.visualstudio.com/items?itemName=joelday.docthis ↩

  16. https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame ↩

  17. https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets ↩

  18. https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux ↩

  19. https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight ↩

  20. https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense ↩

  21. https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename ↩

  22. https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig ↩

  23. http://editorconfig.org/ ↩

本文由星彩网app下载发布于前端技术,转载请注明出处:在js开发前需要的东西,使用eslint和editorconfig规范

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。