我不能再忍耐你的代码作风了！——JSCS

2019年8月30日 92次阅读 来源: 流星狂飙

不管人数若干，代码都应该同出一门。

JavaScript 或许 Node 的语法自身很弱，在teamwork 和大型项目开辟的时刻，手艺选型时每每挑选了 typescript 或许到场 Facebook 的 flow 东西。然则关于代码作风，确切难以一致山河。

每一个开辟者会有本身的开辟习气，本身喜好的编辑器，代码作风越发是千差万别。进入 Team work 以后，团队治理的第一件事变就是定义范例，文件定名，目次构造，代码作风。就像如许

《我不能再忍耐你的代码作风了！——JSCS》

然后会构造屡次集会，一同进修研讨范例, 一次又一次。然后在 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 。比方：我的团队代码作风很牛掰，不需要引入其他的代码作风，那这一行敕令，就能够让一切作风一致起来。

《我不能再忍耐你的代码作风了！——JSCS》

《我不能再忍耐你的代码作风了！——JSCS》

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

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

《我不能再忍耐你的代码作风了！——JSCS》

这份文档涵盖了 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 还不能满足你和你团队对代码作风的请求，贫苦示知一个更好的要领给我！

    原文作者：流星狂飙
    原文地址: https://segmentfault.com/a/1190000005021098
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞