澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

在js开辟前须要的东西,技巧树点亮陈设

2019-09-22 作者:澳门新萄京赌场网址   |   浏览(175)

梳理前端开发使用eslint和prettier来检查和格式化代码问题

2018/06/11 · JavaScript · 格式化

原文出处: Edwin   


1. 前言

俗话说,无规矩不成方圆,工欲善其事必先利其器。

在进行前端工作快2年时间了,虽然平时写代码会写注释,但是并没有太符合规范,虽然很早就知道可以用eslint来规范代码,还有editorconfig来约束代码风格,但是在平时工作中并没有严格按照这些来做。

直到公司来了一个新同事把这件事提了出来,并在团队中推广。当一个团队慢慢变大时,很有必要统一代码风格和规范。

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

作者简介:ASCE1885, 《Android 高级进阶》作者。

@author ASCE1885的 Github 简书 微博 CSDN 知乎
本文由于潜在的商业目的,不开放全文转载许可,谢谢!

一、问题痛点

  • 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。
  • 对于代码版本管理系统(svn 和 git或者其他),代码格式不一致带来的问题是严重的,在代码一致的情况下,因为格式不同,触发了版本管理系统标记为 diff,导致无法检查代码和校验。

但是需要知道的是,开发规范不仅仅包含代码格式规范,还有很多内容,这里只是单独说明代码格式化规范而已。

title: 使用eslint和editorconfig规范代码
date: 2018-01-17
tags: [eslint]
categories: 环境配置

2. 代码注释规范

  • 微信公众号:asce1885
  • 小密圈:Android高级进阶,详情见这篇文章。
  • Github,简书,微博,CSDN 知乎

图片 1

(一)关于代码格式规范问题

代码格式规范的标准可以参考各大主流公司和社区,以下都是一些常用主流规范:

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

参考别人的规范,制定适合自己团队使用的规范,太过复杂的规范执行起来太麻烦,太过简单的规范不如没有规范。

没有绝对的规范,只有适合的规范!


2.1 文件开头

对于新建一个文件,有必要写明开发者是谁,注明,好让别人或者同事知道这是谁开发的,有问题能快速定位。对于标明开发者信息的插件,这里介绍一个vscode-fileheader,在vscode上下载安装后,就可以自己配置一下,来快速生成作者信息,在插件下载页面有详细的介绍如何使用。效果如下图:

图片 2

image.png

图片 3

onepiece.png-1377.3kB

(二)关于为什么要用 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

广而告之时间:我的新书《Android 高级进阶》(https://item.jd.com/10821975932.html )在京东开始预售了,欢迎订购!

二、解决办法

旧有的解决办法是:

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

图片 4

三、具体操作

鉴于网上文章说明的比较混乱,这里主要是为了梳理整个流程和思路。

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)

图片 5

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

微软官方为 React Native 开发提供的专门的插件,按照官网的说明进行插件的安装即可。这个插件使得开发者可以在 VS Code 中调试 React Native 代码,快速执行 react-native 命令,以及对 React Native 的 API 具备智能提醒功能,如下所示:

图片 6

image_1ardliff01st41t5u19op1pgif129.png-153.7kB

TB2MnqlXH1J.eBjSszcXXbFzVXa_!!1020536390.png-39kB

大纲

  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)

图片 7

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

Flow[[3]](https://www.jianshu.com/p/caa802ee055b#fn3) 是 Facebook 出品的一个用于 JavaScript 代码静态类型检查的工具,可以用来发现 Javascript 代码中的类型错误。这个插件是在 VS Code 中支持 Flow 的插件,当然前提是安装好 Flow。

在本系列前面一篇文章《React Native 开发 IDE 选型和配置》[[1]](https://www.jianshu.com/p/270106f66c46#fn1)中我们介绍了 React Native 开发中可能用到的五款 IDE,以及如何配置以正常显示 React Native 语法和实现代码的智能提醒。在实际项目开发中,关于 IDE 或者说工程的配置远不止前文所介绍的,特别是在团队开发中,还有很多的公共配置需要制定,其中代码风格统一工具 EditorConfig 和静态代码检查工具 ESLint 是必不可少的。限于篇幅,本文先来介绍 EditorConfig,后面再起一篇文章专门来介绍 ESLint。

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

图片 8

.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,你就会发现一大堆报错信息

图片 9

报错信息

一个一个找吧,考验耐心的时刻,原来我脾气这么好 :P

如果不知道错误是什么意思,看见报错后面的灰色字体吗,那个就是规则名,copy一下去eslint rule查看规则详情。

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

图片 10

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)

前文中我们最终建议团队开发中最好保持 IDE 的统一,但理想很丰满,现实中却因为团队成员所熟悉的编辑器或者 IDE 肯定不是一样的,因此我们也不好也没必要限制大家使用统一的 IDE。这样一来如何解决由于使用不同的编辑器或者 IDE 可能导致的代码风格不一致问题呢?例如不同的 IDE 的缩进行数和行末空格等是不一样的,这时就轮到 EditorConfig 出场了!

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

图片 11

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

每个公司每个团队都有自己的编码规范,而代码格式化功能是提高开发者输出符合规范代码效率的工具,这个插件是在 VS Code 中支持 Prettier 的插件,Prettier[[11]](https://www.jianshu.com/p/caa802ee055b#fn11) 是一个 Javascript 代码的格式化工具。

EditorConfig[[2]](https://www.jianshu.com/p/270106f66c46#fn2) 通过在工程中增加一个配置文件以及安装对应的插件,实现在不同编辑器和 IDE 保持工程中代码文件编码格式的一致性,EditorConfig 的配置文件具有良好的可读性,并能很好的和版本控制系统一起协作。

(三)安装webstorm 的eslint 插件和 prettier 插件并启用插件

更多配置方式参考:WebStorm Setup · Prettier

根据官方介绍webstorm 分别有2种处理:

  1. WebStorm 2018.1 和以上的版本
  2. WebStorm 2017.3 和更早的版本

如果用IntelliJ 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)

图片 12

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

提高开发效率的插件,在 VS Code 中支持自动补全 HTML/XML 关闭标签。

当我们在编辑器或者 IDE 中打开某个文件时,EditorConfig 插件会从文件所在目录开始逐级向上查找 .editorconfig,直到到达根目录或者找到包含属性 root=true.editorconfig 文件为止。当找到所有满足条件的 .editorconfig 配置文件后,插件会读取这些配置文件的内容,距离文件路径最短的配置文件中的属性优先级最高,同一个文件按照从上到下方式读取,底部定义的同名属性优先级要高于顶部定义的。

1. WebStorm 2018.1 和以上的版本

官方默认已经集成了 prettier 支持,只需要配置好一个全局的 prettier 模块调用方式就可以使用了(必须配置)。图片 13

图片 14

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

图片 15

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)

图片 16

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

提高开发效率的插件,在 VS Code 中支持重命名 HTML/XML 对应标签。

需要说明的是,Windows 用户在创建配置文件时要将文件命名为 .editorconfig.,之后资源管理器会自动将其重命名为 .editorconfig

2. WebStorm 2017.3 和更早的版本

这个版本有2种情况:

  • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint 插件配合,这里相当于使用 eslint 模块来驱动 prettier 模块,然后中间驱动则是靠eslint-plugin-prettier

首先启用 eslint,并且配置 eslint 模块位置,默认会自动读取当前目录的 eslint.rc 配置文件,然后需要进行 npm 安装eslint-plugin-prettier这个插件,后面再统一说明。

图片 17
图片 18

  • ②是直接使用 prettier 作为额外工具来使用。
    图片 19图片 20图片 21
    图片 22上面两种方式的默认快捷键都是Cmd/Ctrl-Shift-A(在 mac 下是comm shift A),觉得不舒服,按需修改快捷键即可。

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

图片 23

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

代码中经常会出现设置颜色,通常是用十六进制格式来表示一个颜色值,例如 #EB6066,但这个值对开发者而言是没有意义的,我们看不出来到底对应的是什么颜色,这个插件帮忙开发者在 VS Code 中支持十六进制格式的颜色进行预览。

EditorConfig 的配置文件

如上介绍,我们知道 EditorConfig 的配置文件名为 .editorconfig,它的内容遵循 INI[[3]](https://www.jianshu.com/p/270106f66c46#fn3) 格式,同时进行一些扩展和定制,例如支持一些通配符模式匹配和自定义的属性识别,section 名字代表文件路径,允许存在 [] 字符。文件必须是 UTF-8 编码的,并使用 CRLF 或者 LF 作为换行符。

下面我们首先来看一下官网提供的例子,有个直观的认识,然后对照着再来详细介绍通配符模式和支持的属性定义。

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

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

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

图片 24

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

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

图片 25

文件路径的通配符模式

.editorconfig 中的文件路径支持通配符模式匹配,主要有如下 6 种:

通配符 含义
* 匹配除了 / 路径分隔符之外的任意字符串
** 匹配任意字符串
? 匹配任意单个字符
[name] 匹配 name 表示的范围内任意单个字符
[!name] 匹配 name 表示的范围之外的任意单个字符
{s1,s2,s3} 匹配给定的字符串

1. eslint 的配置

eslint 的检查规则是通过配置文件.eslintrc 实现的,但是各家有各家的 eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint 规则:

图片 26图片 27

详细参考网址:

  • 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)

图片 28

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

在团队多人协作开发过程中,我们通常需要知道某行代码最近一次是谁修改的,Git Blame 插件就提供了这么一个便利的功能。

图片 29

支持的属性

下面是 EditorConfig 文件中支持的常见属性定义,完整的属性列表可以查看这里[[4]](https://www.jianshu.com/p/270106f66c46#fn4)。需要注意的是,所有属性都是不区分大小写的。

属性名 含义
root 特殊属性,只能在文件头部使用,不要包含在任何 sections 中,true 表示是最顶层的配置文件,这样会插件会停止搜索 .editorconfig 文件
indent_style 缩进样式,可以取值为 tabspace
indent_size 缩进的大小,即缩进的列数,当 index_style 取值 tab 时,indent_size 会使用 tab_width 的值
tab_width 设置 tab 代表的列数,默认是 indent_size 的值,通常不需要指定
end_of_line 使用的换行符,取值为 lfcr 或者 crlf
charset 字符编码,取值为 latin1utf-8utf-8-bomutf-16beutf-16le,当然 utf-8-bom 不推荐使用
trim_trailing_whitespace 如果设置为 true 表示去掉换行行首的任意空白字符,false 表示不去掉
insert_final_newline 如果设置为 true 表示保存文件时文件以一个空白行结尾,false 则保证不以空白行结尾

最后我们来看一下著名的 redux[[5]](https://www.jianshu.com/p/270106f66c46#fn5) 框架的 .editorconfig在js开辟前须要的东西,技巧树点亮陈设。 文件的内容,好有个真实的感受:

# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.

root = true

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

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 开发中经常会存在多种括号混合使用,为了能够更好的区分,这个插件支持不同类型的括号进行彩色着色,支持圆括号,方括号和花括号。

图片 30

EditorConfig 的插件

目前主流的编辑器或者 IDE 基本上都有对应的 EditorConfig 插件,有的是内置支持的,有的需要独立安装。需要注意的是,不用的插件对 EditorConfig 属性的支持度不一样,后面具体介绍每个 IDE 的插件时可以关注下。下图所示的编辑器或者 IDE 已经内置了 EditorConfig 的插件,因此无需独立安装配置,直接使用即可,可以看到 WebStorm 不需要独立安装 EditorConfig 的插件。

图片 31

image_1aluh83v0u7ftut41rf2j1q4e9.png-178.5kB

下图所示的编辑器或者 IDE 目前尚未内置对 EditorConfig 的支持,因此如果要使用 EditorConfig 的功能的话需要首先下载插件。上篇文章中介绍的 Atom,Sublime Text 3,Visual Studio Code 都需要安装插件,Deco 也没有内置对 EditorConfig 的支持,但目前也没找到对应的插件,也就是说 Deco 不支持 EditorConfig 的使用,毕竟它才是一个新生儿。

图片 32

editorconfig.png-572.7kB

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

图片 33

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

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

Atom plugin[[6]](https://www.jianshu.com/p/270106f66c46#fn6)

Atom 中安装 EditorConfig 是通过 Atom 的包管理器实现的,执行如下命令即可

apm install editorconfig

这个插件目前支持的属性有:

属性名 附加说明
root
indent_style
indent_size
end_of_line 支持 lfcrlf 两个取值
charset 支持 latin1utf-8utf-16beutf-16le 四个取值

(五) 严格督查,按照流程检查和格式化代码,按照规范和要求进行代码提交。

需要明确一点,代码格式化需要由上而下执行,如果没有强制性压力督促,那么是对抗不了人类的惰性的。

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

  1. 使用eslint 并且尝试自动修复所有问题(eslint 有 autofix 提示,可以进行—fix 修复,按照 .eslintrc 配置文件来进行修复)。
  2. 使用 prettier 格式化所有代码。
  3. 差异性修复代码,因为有些格式或者其他问题导致出错而被前两部过滤之后还剩余的。(通常前面两步基本解决了所有问题了)
  4. 把精美的格式化后的代码提交到版本库。

参考文档:

  • 如何花30分钟解决 eslint 产生的各种错误 | Tomyail的记忆现场
  • Introducing Prettier with Eslint – Michael Hsu – Medium
  • Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier

    1 赞 收藏 评论

图片 34

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

图片 35

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

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

图片 36

Sublime Text plugin[[7]](https://www.jianshu.com/p/270106f66c46#fn7)

Sublime Text 中可以通过 Package Control 来安装 EditorConfig 插件,如下所示:

图片 37

image_1am36t9gf10pboit1lgbn1n1p449.png-71.2kB

这个插件目前支持的属性有:

属性名 附加说明
root
indent_style
indent_size
end_of_line
charset
trim_trailing_whitespace
insert_final_newline

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

图片 38

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

在 VS Code 中支持自动补全文件路径名的插件。

Visual Studio Code plugin[[8]](https://www.jianshu.com/p/270106f66c46#fn8)

打开 VS Code Quick Open(Mac 上面可以通过快捷键 ⌘ P),并输入 ext install EditorConfig 即可找到 EditorConfig 插件,如下所示,安装后重启即可。

图片 39

image_1am3dv6ur1n27v0gcf7ui7fnm.png-101.4kB

这个插件目前支持的属性有:

属性名 附加说明
indent_style
indent_size
tab_width
trim_trailing_whitespace
insert_final_newline

在js开辟前须要的东西,技巧树点亮陈设。AutoFileName[[21]](https://www.jianshu.com/p/caa802ee055b#fn21)

图片 40

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

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

图片 41

总结

EditorConfig 的目的是在不同的编辑器或者 IDE 中保持代码文件编码风格的一致性,它需要同时借助配置文件和插件来实现。从上面的分析可以看出,不同编辑器或者 IDE 上面的 EditorConfig 插件对属性的支持不尽相同,同时支持的属性只有两个:

  • indent_style
  • indent_size

也就是最低只能保证代码在所有编辑器或者 IDE 上面的缩进风格相同。

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

图片 42

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/ ↩

拓展阅读

《使用editorconfig配置你的编辑器》[[9]](https://www.jianshu.com/p/270106f66c46#fn9)

《使用 EditorConfig来规范代码缩进等的风格以webstorm为例》[[10]](https://www.jianshu.com/p/270106f66c46#fn10)

《WebStorm 9 纳入 EditorConfig 支持》[[11]](https://www.jianshu.com/p/270106f66c46#fn11)


欢迎关注我的微信公众号,专注与原创或者分享 Android,iOS,ReactNative,Web 前端移动开发领域高质量文章,主要包括业界最新动态,前沿技术趋势,开源函数库与工具等。

图片 43


  1. http://www.jianshu.com/p/8e9df5f85bca ↩

  2. http://editorconfig.org/ ↩

  3. https://en.wikipedia.org/wiki/INI_file ↩

  4. https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties ↩

  5. https://github.com/reactjs/redux ↩

  6. https://github.com/sindresorhus/atom-editorconfig#readme ↩

  7. https://github.com/sindresorhus/editorconfig-sublime#readme ↩

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

  9. http://www.cnblogs.com/xiyangbaixue/p/4201490.html ↩

  10. http://blog.csdn.net/gextreme/article/details/23794837 ↩

  11. https://csspod.com/editorconfig-in-webstorm9/ ↩

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:在js开辟前须要的东西,技巧树点亮陈设

关键词: