在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规范 – 腾讯Web前端
    IMWeb 团队社区 | blog |
    团队博客 腾讯的
  • 编写「可读」代码的实施 | Tmall FED |
    天猫前端团队
    淘宝的
  • GitHub – airbnb/javascript: JavaScript Style
    Guide airbnb 的
  • google 的
  • vue 的

参照别人的正统,制定符合自己协会利用的规范,太过复杂的标准实施起来太难为,太过粗略的专业不如没有正规。

尚无断然的正规化,唯有符合的正规化!


2.1 文件起初

对于新建一个文件,有必不可少写明开发者是什么人,申明,好让外人或者同事知道这是什么人开发的,有难点能火速稳定。对于标明开发者新闻的插件,那里介绍一个vscode-fileheader,在vscode上下载安装后,就足以自己陈设一下,来快速变化小编讯息,在插件下载页面有详尽的牵线怎么着采用。效果如下图:

亚洲必赢官网 1

image.png

亚洲必赢官网 2

(二)关于为什么要用 eslint 和 prettier难点

  • 在js开发前要求的事物,使用eslint和editorconfig规范代码。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配置文件会被第一读取.
匹配EditorConfig配置文件中的配置项会依照读取顺序被采取,
所以如今的配备文件中的配置项具有优先权

即使.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)
Facebook 出品的一个用于 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

报错音讯

一个一个找呢,考验耐心的时刻,原来自己性格这么好 😛

假如不知底不当是哪些看头,看见报错后边的藏红色字体吗,那多少个就是规则名,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 常见代码片段的插件。

(五) 严苛监控,按照流程检查和格式化代码,按照规范和要求开展代码提交。

必要掌握一点,代码格式化须要由上而下执行,固然没有强制性压力督促,那么是势不两立不了人类的惰性的。

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

  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/

网站地图xml地图