一统江湖的大前端（5）editorconfig + eslint——你的代码里藏着你的优雅

《一统江湖的大前端》系列是本身的前端学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各种好玩的js库，不按期更新。若是你对前端的理解仍是写写页面绑绑事件，那你真的是有点OUT了，前端能作的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ，什么火就搞什么,活脱脱一个蹭热点小能手。若是你也以为前端的平常开发有些枯燥，不妨一块儿来看看前端的另外一番模样。

一.协做开发引起的问题

前端有个很流行的段子（其实前端有不少流行的段子）：

看完大家项目的源码，就知道大家团队有多少我的。

各类命名风格，各类冗余代码，各类缩进风格，各类奇葩注释和各类没有注释，眼中有码，心中无码，只有心累两个字，项目的整洁度会受到不少客观因素的影响，为了本身的身心健康，咱们应该试图将这种影响降到最低。简单地说，统一格式和风格的代码让人更加赏心悦目，更不容易让你产生想摔键盘的冲动;用一个B格更高的词语，叫作“熵减”，也就是下降团队产出代码的无序性，若是你想在将来成为一名合格的前端架构师，这将是你的工做目标。

二.码如其人

从作开发开始，我就是一个名sublime的爱好者，随着经常使用快捷键的熟练和各类插件的配合，本身的开发速度获得了很大提高，毕竟这是一个颜值决定一切的时代，做为一个前端，若是你的编辑器永远都是白底蓝字或者黑底橙字（中枪的请不要扔鞋）,你真的很差意思跟人家讲本身是作前端的，由于别人的心中会闪现出以下的逻辑：

这货的编辑器丑 => 这货的审美很Low => 这货的活估计也好不到哪去

这个思惟链条是很可怕的，有可能无形中让你损失掉不少机会，若是从你的做品来推断你是一个怎样的人，你以为其余人会得出什么样的结论呢？

三.editorconfig + eslint

废话不（再）多说,直接呈上低配版解决方案:

• editorconfig
  • 格式统一配置工具
  • 跨浏览器普遍支持(常见如IDEA,WebStorm,Sublime,Vscode等通通都支持)
  • 权重高于编辑器内部的格式设定
  • 配置项一共就8个
• eslint
  • javascript语法风格检查工具
  • javascript静态检查工具
  • 支持es6,JSX, AngularJs
  • 支持前端工程化工具

四.editorconfig使用方法

笔者认为editorconfig最多见的用途即为统一文件的编码字符集以及缩进风格,其余方面仅在特殊场景下较为有用，例如trim_trailing_whitespace配置项对于.md文件就很是实用，但对于其余类型的文件却没什么卵用。

1.通配符

• * 匹配除/以外的任意字符串
• ** 匹配任意字符串
• ? 匹配任意单个字符
• [name] 匹配name字符
• [!name] 匹配非name字符
• {s1,s2,s3} 匹配任意给定的字符串(since 0.11.0)

2.属性

• root: 代表是最顶层的配置文件，发现设为true时，才会中止查找.editorconfig文件。
• indent_style: 设置缩进风格，tab或者空格。tab是hard tabs，space为soft tabs。
• indent_size : 缩进的宽度，即列数，整数。若是indent_style为tab,则此属性默认为tab_width。
• tab_width : 设置tab的列数。默认是indent_size。
• end_of_line： 换行符，lf、cr和crlf
• charset： 编码，latin一、utf-八、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom。
• trim_trailing_whitespace： 设为true表示会除去换行行首的任意空白字符。
• insert_final_newline: 设为true代表使文件以一个空白行结尾

3.使用示例

3.1安装方法

在editorconfig官网找到本身所用的编辑器所对应的editorconfig插件(sublime的插件直接在github上下载就能够了).

3.2使用方法

将在项目根目录下创建.editorconfig文件,windows下没法生成只包含扩展名的文件时，可运行cmder工具，在指定目录下在命令行中输入touch .editorconfig命令来生成配置文件，文件的内容以下所示：

# 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,html,css}]
charset = utf-8

# Tab indentation (no size specified)
[*.js]
indent_style = space
indent_width = 4

五.eslint使用方法

eslint的Rules规则集包含近200条javascript编码规则，能够帮助咱们检查编程中的语法错误，以及对一些指定的最佳实践进行限制，减小整个工程中的奇葩代码片断和各类奇技淫巧,为开发者提供javascript静态检查能力，为前端架构师提供统一团队编程风格的能力。

1.安装

使用npm install -g eslint或yarn global add eslint进行全局安装eslint工具。

2.生成.eslintrc配置文件

.eslintrc.?文件支持js,json,yaml,yml等常见格式,全局安装eslint工具后，在工做目录下输入eslint --init，按照提示便可生成定制化的包含基本规则的.eslintrc.?文件。

3.手动使用eslint进行语法检查

在包含.eslintrc文件的目录下，用一个简易函数来测试eslint的校验功能，以下所示能够看到，规则集中配置的对强制使用全等和禁止使用默认alert类提示的限制在eslint校验后给出了提示信息。

esling.json配置：

用来被测试的js代码(命名为ab.js)：

在命令行运行eslint工具进行校验，可看到校验结果打印在了命令行上：

4.工具集成

前端工程化已经是大趋势，使用grunt,gulp,webpack等自动化打包工具或jenkins持续集成工具，就能够实如今指定的动做(如代码提交到我的分支后触发，如符合条件的js文件每次保存时)后或指定开发环节(如代码打包压缩前)自动使用eslint对指定代码进行检查。

5.建议

eslint规则集中涉及超过200条规则，笔者本身仍然在学习中，强烈建议前端开发者对此进行系统地专题学习，不只须要了解配置规则是在限制什么，更要搞清楚为何要作这样的限制,相信大部分规则学习下来，对于js语言的理解必定会上一层的台阶，并且是很高的台阶。

六.大史的其余压箱底宝贝

有了editorconfig和eslint，协做开发中的问题就能解决吗？固然没那么简单。正所谓优秀的代码千篇一概，丑陋的代码各有风骚。从命名规范到奇技淫巧，只有你想不到的，没有他写不出来的。

1.锦囊A——sublime编辑器缩进风格配置

editorconfig处理了Tab和Space一致性的问题,可是不少开发人员并无用Tab来控制缩进的习惯，而是习惯手动敲空格，写代码写嗨了基本都是随机敲出0-4个空格,这时候editorconfig就无法搞了，sublime编辑器中提供了缩进风格的设定，对于当前文件能够在界面右下角直接进行修改，但为了统一块儿见，建议经过用户配置的方式设定全局规则，具体方法为:
打开首选项(preference)菜单，选择设置-用户,输入高亮框中的两个配置项便可。回车换行后代码将自动缩进指定空格数，以达到统一的缩进样式，sublime对于本行是否须要缩进会进行智能判断，使用时你就会发现它时很符合代码书写习惯的。

2.锦囊B——sublime代码片断

代码编写或搬运过程当中，诸如函数声明或条件分支或循环语句等是最容易出现缩进问题的，而顺序结构的代码几乎不会出现缩进问题。sublime为咱们提供了强大的预设代码片断能力（或者简单理解为快捷键）。使用的感受就好像念咒语那样，我的感受仍是蛮好玩的。

• /** + Tab
  • 生成jsdoc风格的前置注释信息,将来是能够输出文档或配合单元测试的。
• if + Tab
  • 生成if条件判断语句的代码结构
• for + Tab
  • 生成正向循环或反向循环代码结构
• fun + Tab
  • 生成函数声明代码结构
• 其余自定义代码片断
  • 可自定义快捷键及代码片断，并指定若干可配置的焦点

生成的代码效果以下：

代码框架生成后，每多按一次Tab键，就会聚焦到下一个焦点，好比输入fun，而后按Tab键，第一焦点在函数名处，再按Tab键，第二焦点在参数列表处，再按Tab,第三焦点在函数体处，彻底不用本身考虑缩进等问题。

3.锦囊C——HTML/CSS/Js Prettify插件

本插件是sublime的插件，提供HTML/CSS/JS的代码格式化能力，若是你的代码都是自上而下一鼓作气，那这个插件估计也没什么用了，但可能吗？各类需求变动使你在编写代码的时候免不了各类Ctrl+C和Ctrl+D（不知道什么意思？你怎么当代码搬运工的？），基本一波折腾下来，本来诗篇同样的代码就面目全非了，此时prittify插件就派上用场了，直接在sublime中单击右键，选择HTML/CSS/JS Prettify->Prettify Code，一键点下去，整个世界都美好了。

固然这个插件的配置中是能够设置为每次Ctrl+s保存文件时自动触发Prettify功能的，至因而否要启用，由大家团队本身决定吧。

若是这样的限制下你的代码还能乱成一坨，那我只能说你是故意的。

七.后记——修炼

写代码是一种修行，是一个精益求精的过程，被动约束和检查并不能解决全部的问题，毕竟没有语法错误和优雅的代码之间仍是有距离的。

好比你在编写html页面时使用table>tbody>tr>td去实现一个单列的列表项,由于你不知道ul和li标签;
好比你在编写CSS的时候，写了一堆连本身都不知道如何复用的样式;
好比你在编写Js的时候，心情好了写驼峰命名，心情很差了写匈牙利命名，心情很很差了直接上拼音，心态炸了直接写出laoZiBuGanLe这种变量名
......
这都是不会报错的,但它们都会暴露出你的弱点，或是基础知识，或是心态控制，或是合做沟通。

好的代码里， 藏着你对技巧的总结和知识的积累 藏着你对语言精华的理解和糟粕的规避 藏着你认真的态度和严苛的代码洁癖 藏着你的修养和你的优雅