我不能再忍受你的代码风格了！——JSCS

不管人数多少，代码都应该同出一门。

JavaScript 或者 Node 的语法自己很弱，在teamwork 和大型项目开发的时候，技术选型时每每选择了 typescript 或者加入 Facebook 的 flow 工具。可是对于代码风格，确实难以统一江山。

每一个开发者会有本身的开发习惯，本身喜欢的编辑器，代码风格更加是千差万别。进入 Team work 以后，团队管理的第一件事情就是定义规范，文件命名，目录结构，代码风格。就像这样

而后会组织屡次会议，一块儿学习研究规范, 一次又一次。而后在 code review 的时候指出，这里不符合规范，那边命名有问题。时间久了，你们对于规范的印象和要求就弱了。若是有新员工入职，那他又得从新学一遍代码风格规范，谁知道，新员工对团队代码风格接受和学习得怎么样呢？代码风格的问题一直困扰了好久。

固然咱们也作了不少尝试，比较加入 jshint、grunt 编译的时候，执行 css、js 检查。更加丧心变狂的是，加入了 .git/pre-commit ，在 git 提交的时候，必须经过预检查，才能提交。这种方式过于粗暴，可配置的内容也不够灵活。只能恶心一下本身，并无在开发团队推广起来。

来的不早也不晚，JSCS 恰巧就这样出现了。历来没有见过这么强大的代码格式化和风格统一工具。

正如官方介绍：

JSCS is a code style linter/formatter for programmatically enforcing your style guide. You can configure JSCS for your project/company using over 150 validation rules, including presets from popular style guides like jQuery, Airbnb, Google, and more.

优势

1. JSCS 有超过150种代码验证规则。

2. 你能够预设像 Google、Airbnb 等公司的代码风格。

3. JSCS 能够帮你检查，甚至按照你的预设风格格式化代码。当执行 jscs app/ --fix 的时候，项目的代码风格立马和 Airbnb 保持一致了，我还像个没见过世面的人同样惊叹了一番。

4. 支持 ES2015, JSX, Flow 等。它能够验证任何有效的 babel 代码

5. 支持绝大多数开发工具和环境。Grunt Task、Atom、Sublime Text、Intellij IDEA、WebStrom、RubyMine 等等。全部工具的安装办法

6. 自动生成你的代码风格的配置文件。jscs --auto-configure src 。好比：个人团队代码风格很牛掰，不须要引入其余的代码风格，那这一行命令，就可让全部风格统一块儿来。

你要知道，Airbnb 的 javascript 代码风格在 github 里有3.4W+ star。 https://github.com/airbnb/javascript

学会 Airbnb 的代码规范，意味着你的代码风格已经走在了世界第一行列。代码功底没到第一线，至少代码风格提上来了，值得你装逼了。少年，激动吧。

这份文档涵盖了 js 的全部方法面面，对于 web 开发再合适不过了。

上手

安装

npm install jscs -g

运行

jscs path[ path[...]]

你也能够注入到 JSCS

cat myfile.js | jscs

进阶

开发工具能够自动读取项目中的 .jscsrc 文件，来进行 JSCS 检查，而且 格式化好你的代码 。配置文件举例：

{
  // 使用 jquery 编码风格规范
  "preset": "airbnb",
  "fix": true,
  "maxErrors": 50,
  "fileExtensions": [".js", ".jsx"],
  "excludeFiles": []

  // 改变 requireCurlyBraces 规则
  //"requireCurlyBraces": null // or false

}

经常使用配置

1. preset （用预置规则进行规则预设）

2. fix (true|false) 是否自动修复风格

3. additionalRules （附加规则）

4. excludeFiles （对指定文件或目录禁用风格检查,默认排除 node_modules 文件夹）"excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]

5. fileExtensions （验证文件后缀名） "fileExtensions": [".js", ".jsx"]

6. maxErrors （设置错误要报告的最大数目，默认50）

7. esnext 默认的。对于es2015的支持

8. es3 过期了，不要管了

9. verbose (true|false)（为有错误的信息添加规则名称）

10. errorFilter （默认 false, 不然配置路径） （肯定是否报告错误的筛选器函数）

错入容忍

你能够书写默写规则，让 JSCS 容忍某些错误。全部的规则均可以在这里查到：http://jscs.info/rules

1. 能够直接设置规则为 null ,

   {
       "preset": "jquery",
       "requireCurlyBraces": null
   }

2. 禁用全部规则

   var a = b;
   
   // jscs:disable
   var c = d; // 在这行及以后的全部错误都将被忽略
   
   // jscs:enable
   var e = f; // 在这行及以后的全部错误都将被报告

3. 禁用特定的规则

   // jscs:disable requireCurlyBraces
   if (x) y(); // 在这行及以后的全部 requireCurlyBraces 错误都将被忽略
   
   // jscs:enable requireCurlyBraces
   if (z) a(); // 在这行及以后的全部错误包括requireCurlyBraces 错误都将被报告

4. 对单行进行特定规则忽略

   if (x) y(); // jscs:ignore requireCurlyBraces
    if (z) a();

5. 禁用一个特定规则后，你能够启用全部规则，该规则将从新启用。

   // jscs:disable requireCurlyBraces
       if (x) y(); // 在这行及以后的全部 requireCurlyBraces 错误都将被忽略
   
       // jscs:enable
       if (z) a(); // 在这行及以后的全部错误包括 requireCurlyBraces 错误都将被报告

6. 你能够同时禁用多个规则，并逐步从新启用它们：

   // jscs:disable requireCurlyBraces, requireDotNotation
       if (x['a']) y(); // 在这行及以后的全部 requireCurlyBraces 或 requireDotNotation 错误都将被忽略
   
       // jscs:enable requireCurlyBraces
       if (z['a']) a(); // 在这行及以后的全部错误包括 requireDotNotation 错误都将被报告，但 requireCurlyBraces 错误将被忽略
   
       // jscs:enable requireDotNotation
       if (z['a']) a(); // 在这行及以后的全部错误都将被报告

7. 为某个文件禁用全部规则
   在文件第一行写上:

   // jscs:disable

若是 JSCS 还不能知足你和你团队对代码风格的要求，麻烦告知一个更好的办法给我！