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

Scott 发布于2019-08-19 18:13 / 2401人阅读

摘要：从来没有见过这么强大的代码格式化和风格统一工具。你可以预设像等公司的代码风格。所有工具的安装办法自动生成你的代码风格的配置文件。学会的代码规范，意味着你的代码风格已经走在了世界第一行列。

无论人数多少，代码都应该同出一门。

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.

优点

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

你可以预设像 Google、Airbnb 等公司的代码风格。

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

支持 ES2015, JSX, Flow 等。它可以验证任何有效的 babel 代码

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

自动生成你的代码风格的配置文件。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

}

常用配置

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

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

additionalRules （附加规则）

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

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

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

esnext 默认的。对于es2015的支持

es3 过时了，不要管了

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

errorFilter （默认 false, 否则配置路径）（确定是否报告错误的筛选器函数）

错入容忍

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

可以直接设置规则为 null ,

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

禁用所有规则

var a = b;

// jscs:disable
var c = d; // 在这行及之后的所有错误都将被忽略

// jscs:enable
var e = f; // 在这行及之后的所有错误都将被报告

禁用特定的规则

// jscs:disable requireCurlyBraces
if (x) y(); // 在这行及之后的所有 requireCurlyBraces 错误都将被忽略

// jscs:enable requireCurlyBraces
if (z) a(); // 在这行及之后的所有错误包括requireCurlyBraces 错误都将被报告

对单行进行特定规则忽略

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

禁用一个特定规则后，你可以启用所有规则，该规则将重新启用。

    // jscs:disable requireCurlyBraces
    if (x) y(); // 在这行及之后的所有 requireCurlyBraces 错误都将被忽略

    // jscs:enable
    if (z) a(); // 在这行及之后的所有错误包括 requireCurlyBraces 错误都将被报告

你可以同时禁用多个规则，并逐步重新启用它们：

    // 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(); // 在这行及之后的所有错误都将被报告

为某个文件禁用所有规则
在文件第一行写上:

// jscs:disable

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

私有云专线服务购买了腾讯云如何再买域名代码风格我大四了我明白了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79331.html

用什么工具保证一致的代码风格？

摘要：目前来说基本上有四种工具可以完成，。发展历程关于保持代码一致性风格，我们可以追溯到。是啥是针对语言源码的检测工具，它的功能就是看看源码有没有编写错误，有没有风格问题。 1. 理解问题首先这个问题展开来讲就是如何在Node.js模块编写中保持代码一致性风格。目前来说基本上有四种工具可以完成JSLint，JSHint,JSCS,ESLint。下面将从历史的角度来看看他们四个有什么关系...

linkin 2019-08-23 17:07 评论0 收藏0
【译】JavaScript代码检查工具对比

摘要：看到很多团队和开源项目都在用代码检查工具，自己一直没用过，最近加入了新团队有项目在用，就想着研究一下。代码校验工具能够让你在写代码时避免一些低级的错误。同时，也有友好的文档针对每一条规则。在上文提高的所有工具当中它对有着最好的支持。看到很多团队和开源项目都在用代码检查工具，自己一直没用过，最近加入了新团队有项目在用，就想着研究一下。看到sitepoint上的一篇2015年的文章觉得不...

fengxiuping 2019-08-20 18:10 评论0 收藏0
[译]JavaScript lint工具的比较

摘要：工具帮助避免在编写时出现愚蠢的错误。并不检测潜在的，比如，未使用的变量或意外的全局变量等。在提到的所有工具中，它具有最广泛的功能支持。使用工具是捕获问题的良好步骤，但只能看到规则允许的错误。也可用于此目的。 Lint工具帮助避免在编写JavaScript时出现愚蠢的错误。尽管有多年的经验，我仍然键入不正确的变量名称，出现语法错误，以及忘记正确地处理error。在浪费自己时间，或更糟糕地...

luck 2019-08-20 18:56 评论0 收藏0
一个靠谱的前端开源项目需要什么？

摘要：一个靠谱的应该包含以下几部分言简意赅的项目介绍你的项目解决了什么核心问题，有哪些令人心动的特性。除了在中提到遵循的开源协议外，一个靠谱的开源项目还会将该开源协议的内容文档放在自己的项目下方。 0. 前言写前端代码一段时间之后，你可能会萌生做一个开源项目的想法，一方面将自己的好点子分享出去让更多的人受益，另一方面也可以在社区贡献的环境下学到更多的东西从而快速成长。但是开源项目也有开源项...

hiyayiji 2019-08-19 18:40 评论0 收藏0
一个靠谱的前端开源项目需要什么？

摘要：一个靠谱的应该包含以下几部分言简意赅的项目介绍你的项目解决了什么核心问题，有哪些令人心动的特性。除了在中提到遵循的开源协议外，一个靠谱的开源项目还会将该开源协议的内容文档放在自己的项目下方。 0. 前言写前端代码一段时间之后，你可能会萌生做一个开源项目的想法，一方面将自己的好点子分享出去让更多的人受益，另一方面也可以在社区贡献的环境下学到更多的东西从而快速成长。但是开源项目也有开源项...

DesGemini 2019-05-29 16:57 评论0 收藏0