eslint前端代码检测工具让你的代码更优雅

　　协同发展引起的问题

　　前端有一个非常受欢迎的段落（实际上，前端有很多流行的段落）：

　　阅读完项目的源代码后，您将了解团队中有多少人。

　　各种命名风格，各种冗余代码，各种缩进样式，各种精彩笔记和各种无评论，代码中的眼睛，心中没有代码，心中只有两个字，项目的清洁度将受到很多客观因素对于我们自己的身心健康，我们应该尽量减少这种影响。简单地说，代码的统一格式和风格使人们更加愉悦，并且不太可能让你放弃键盘的冲动；使用更高的B字，称为熵减少，这是为了减少团队的输出代码。如果您希望将来成为合格的前端架构师，这将是您的目标。

　　其次，代码就像一个人

　　从发展之初，我就是崇高的粉丝。通过常用快捷方式的技巧和各种插件的配合，我的开发速度得到了极大的提高。毕竟，这是一个颜色的价值决定一切的时代。一个前端，如果你的编辑器总是在白色背景上是蓝色的，或者在黑色背景上是橙色的（请不要把枪扔在枪口上），你真的很尴尬地告诉人们你在做前端，因为其他人会flash以下逻辑：

　　这件商品的编辑很难看=>

　　这件商品的美感很低=>

　　这种商品的估计寿命并没有好多少。

　　这种想法很糟糕。它可能会无形中失去很多机会。如果你从工作中推断出你是什么样的人，你认为别人会得出什么结论呢？

　　Three.editorconfig + eslint

　　废话不会（再次）更直接地说明解决方案的低版本：

　　Editorconfig

　　格式化统一配置工具

　　广泛的跨浏览器支持（通常由IDEA，WebStorm，Sublime，Vscode等支持）

　　权重高于编辑器的内部格式

　　共有8个配置项

　　Eslint

　　Javascript语法样式检查工具

　　Javascript静态检查工具

　　支持es6，JSX，AngularJs

　　支持前端工程工具

　　Four.editorconfig用法

　　作者认为，editorconfig最常见的用途是统一文件的编码字符集和缩进样式。其他方面仅在特殊情况下有用。例如，trim_trailing_whitespace配置项对.md文件非常有用，但对于其他类型的文件没有任何用处。对于鸡蛋。

　　通配符

　　*匹配任何字符串，除了/

　　**匹配任何字符串

　　？匹配任何单个字符[name]匹配名称字符

　　[！name]匹配非名字字符

　　{s1，s2，s3}匹配任何给定的字符串（自0.11.0起）

　　2.属性

　　Root：表示它是最顶层的配置文件。如果发现它是真的，它将停止查找.editorconfig文件。

　　Indent_style：设置缩进样式，制表符或空格。标签是硬标签，空格是软标签。

　　Indent_size：缩进的宽度，即列数，整数。如果indent_style是tab，则此属性默认为tab_width。

　　Tab_width：设置选项卡中的列数。默认值为indent_size。

　　End_of_line：换行符，lf、cr和crlf

　　字符集：编码，latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom。

　　Trim_trailing_whitespace：设置为true以删除换行符开头的任何空格字符。

　　Insert_final_newline：设置为true以使用空行结束文件

　　3.使用示例

　　3.1安装方法

　　在editorconfig官方网站上找到对应你所使用的编辑器的editorconfig插件（可以直接在github上下载sublime插件）。

　　3.2如何使用

　　.editorconfig文件将在项目的根目录中创建。如果无法在Windows下生成仅包含扩展名的文件，则可以运行cmder工具并在指定目录中输入touch .editorconfig命令以生成配置文件。该文件的内容如下：如下所示：

　　#top-most EditorConfig文件

　　Root = true

　　#Unix风格的换行符，换行符结束每个文件

　　[*]

　　End_of_line = lf

　　Insert_final_newline = true

　　＃使用大括号扩展表示法匹配多个文件＃设置默认字符集

　　[*。{JS，HTML，CSS}]

　　Charset = utf-8

　　#Tab缩进（未指定大小）

　　[*的.js]

　　Indent_style =空格

　　Indent_width = 4

　　eslint使用方法

　　Eslint的Rules规则集包含近200个javascript编码规则，可帮助我们检查编程中的语法错误，以及限制一些指定的最佳实践，减少整个项目中奇怪的代码片段和各种技巧。为开发人员提供javascript静态检查功能，为前端架构师提供统一团队编程风格的能力。

　　1.安装

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

　　2.生成.eslintrc配置文件

　　.eslintrc。？ file支持常见的格式，如js，json，yaml，yml等。全局安装eslint工具后，在工作目录中输入eslint --init，然后按照提示生成自定义的.eslintrc。包含基本规则的文件。 。

　　统一河流和湖泊的前端（5）editorconfig + eslint——隐藏在你的代码中你的优雅

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

　　在包含.eslintrc文件的目录中，使用一个简单的函数来测试eslint的校验和函数。如您所见，规则集中的限制是强制性的，并且禁止使用默认警报类。使用了eslint校验和。稍后将给出提示信息。

　　Esling.json配置：

　　用于测试的js代码（名为ab.js）：

　　在命令行上运行eslint工具以验证您是否可以在命令行上看到验证结果：

　　统一河流和湖泊的前端（5）editorconfig + eslint——隐藏在你的代码中你的优雅

　　4.工具集成

　　前端工程是一个大趋势。使用自动打包工具（如grunt，gulp，webpack或Jenkins持续集成工具），您可以实现指定的操作（例如在将代码提交到单个分支后触发，例如每次保存的符合条件的js文件）。在时间或指定的开发之后（例如在压缩包之前），使用eslint自动检查指定的代码。

　　5.建议eslint规则集涉及200多条规则。作者还在学习。我强烈建议前端开发人员系统地研究这个主题。他们不仅需要了解配置规则是什么，还要了解它们应该受到限制的原因。我相信大多数规则都是学习的，对js语言的理解肯定会超过一步，这是一个很高的步骤。

　　其他压箱底宝贝

　　使用editorconfig和eslint，可以解决协同开发中的问题吗？当然不是那么简单。所谓的优秀代码是一样的，丑陋的代码有自己的风格。从命名约定到奇点，没有什么是你无法想到的，没有人不能写出来。

　　1.套件A——sublime编辑器缩进样式配置

　　Editorconfig处理Tab和Space一致性问题，但许多开发人员不使用Tab来控制缩进习惯。相反，它们用于手动键入空格。写代码写入基本上随机淘汰0-4个空格。这时，编辑器无法完成。 sublime编辑器提供缩进样式的设置。对于当前文件，您可以直接在界面的右下角进行修改。但是，为了保持一致性，建议按用户配置设置全局规则。具体方法是：

　　打开首选项菜单，选择设置 - 用户，然后在突出显示的框中输入两个配置项。回车后，代码将自动缩进指定的空格数以实现统一的缩进样式。 Sublime将对线是否需要缩进做出明智的判断。当您使用它时，您会发现它符合代码编写习惯。

　　2.套件B——sublime代码段

　　代码编写或处理（如函数声明或条件分支或循环语句）最容易出现缩进问题，而顺序结构代码几乎没有缩进问题。 Sublime为我们提供了预设代码片段（或简单地将其理解为快捷方式）的强大功能。使用的感觉就像一个口头禅，个人感觉很有趣。

　　/ ** + Tab

　　生成jsdoc样式的预注释信息，将来可以输出文档或匹配单元测试。

　　如果+ Tab

　　生成if条件语句的代码结构

　　对于+ Tab

　　生成正向循环或反向循环代码结构

　　Fun + Tab

　　生成函数声明代码结构

　　其他自定义代码段

　　可自定义的快捷方式和代码段，并指定一些可配置的焦点

　　生成的代码如下所示：生成代码框后，每次按Tab键时，它将聚焦于下一个焦点，例如键入fun，然后按Tab键，第一个焦点位于函数名称，然后按Tab键，第二个重点是参数列表。再次按Tab键，第三个焦点位于功能体，您不必自己考虑缩进。

　　3.提示C——HTML / CSS / Js Prettify插件

　　这个插件是一个崇高的插件，提供HTML / CSS / JS代码格式化功能。如果您的代码是从上到下，那么这个插件可能没有用，但它可能吗？需求的各种变化使你有必要编写各种Ctrl + C和Ctrl + D（不知道是什么？你怎么看待代码搬运工？），基本上是一波折腾，诗篇的原始代码现在，prittify插件派上用场，右键点击sublime并选择HTML / CSS / JS Prettify->

　　Prettify Code，只需点击一下，整个世界就是精彩的。

　　当然，每次Ctrl + s保存文件时，可以将此插件的配置设置为自动触发Prettify功能。至于是否启用它，由您的团队决定。

　　如果你的代码在这些限制下搞砸了，那么我只能说你是故意的。

　　编写代码是一种实践，它是一个卓越的过程，被动约束和检查无法解决所有问题，毕竟语法错误和优雅代码之间没有距离。

　　例如，当您编写html页面时，请使用table＆gt； tbody＆gt； tr＆gt； td来实现单列列表项，因为您不知道ul和li标记。

　　例如，当你编写CSS时，你会编写一些你甚至不知道如何重用它们的样式。

　　例如，当你正在写Js时，你很乐意写一个驼峰名字，而且你写的不好匈牙利。心情非常糟糕。你可以直接拼音，心态被炸毁，直接写变量名称laoZiBuGanLe。

　　这不是错误，但它们会揭示您的弱点，或基本知识，心理控制或合作沟通。