成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

我不能再忍受你的代碼風(fēng)格了！——JSCS

Scott / 2505人閱讀

摘要：從來沒有見過這么強(qiáng)大的代碼格式化和風(fēng)格統(tǒng)一工具。你可以預(yù)設(shè)像等公司的代碼風(fēng)格。所有工具的安裝辦法自動生成你的代碼風(fēng)格的配置文件。學(xué)會的代碼規(guī)范，意味著你的代碼風(fēng)格已經(jīng)走在了世界第一行列。

無論人數(shù)多少，代碼都應(yīng)該同出一門。

JavaScript 或者 Node 的語法本身很弱，在teamwork 和大型項(xiàng)目開發(fā)的時候，技術(shù)選型時往往選擇了 typescript 或者加入 Facebook 的 flow 工具。但是對于代碼風(fēng)格，確實(shí)難以統(tǒng)一江山。

每個開發(fā)者會有自己的開發(fā)習(xí)慣，自己喜歡的編輯器，代碼風(fēng)格更加是千差萬別。進(jìn)入 Team work 之后，團(tuán)隊(duì)管理的第一件事情就是定義規(guī)范，文件命名，目錄結(jié)構(gòu)，代碼風(fēng)格。就像這樣

然后會組織多次會議，一起學(xué)習(xí)研究規(guī)范, 一次又一次。然后在 code review 的時候指出，這里不符合規(guī)范，那邊命名有問題。時間久了，大家對于規(guī)范的印象和要求就弱了。如果有新員工入職，那他又得重新學(xué)一遍代碼風(fēng)格規(guī)范，誰知道，新員工對團(tuán)隊(duì)代碼風(fēng)格接受和學(xué)習(xí)得怎么樣呢？代碼風(fēng)格的問題一直困擾了很久。

當(dāng)然我們也做了很多嘗試，比較加入 jshint、grunt 編譯的時候，執(zhí)行 css、js 檢查。更加喪心變狂的是，加入了 .git/pre-commit ，在 git 提交的時候，必須通過預(yù)檢查，才能提交。這種方式過于粗暴，可配置的內(nèi)容也不夠靈活。只能惡心一下自己，并沒有在開發(fā)團(tuán)隊(duì)推廣起來。

來的不早也不晚，JSCS 恰巧就這樣出現(xiàn)了。從來沒有見過這么強(qiáng)大的代碼格式化和風(fēng)格統(tǒng)一工具。

正如官方介紹：

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.
優(yōu)點(diǎn)

JSCS 有超過150種代碼驗(yàn)證規(guī)則。

你可以預(yù)設(shè)像 Google、Airbnb 等公司的代碼風(fēng)格。

JSCS 可以幫你檢查，甚至按照你的預(yù)設(shè)風(fēng)格格式化代碼。當(dāng)執(zhí)行 jscs app/ --fix 的時候，項(xiàng)目的代碼風(fēng)格立馬和 Airbnb 保持一致了，我還像個沒見過世面的人一樣驚嘆了一番。

支持 ES2015, JSX, Flow 等。它可以驗(yàn)證任何有效的 babel 代碼

支持絕大多數(shù)開發(fā)工具和環(huán)境。Grunt Task、Atom、Sublime Text、Intellij IDEA、WebStrom、RubyMine 等等。所有工具的安裝辦法

自動生成你的代碼風(fēng)格的配置文件。jscs --auto-configure src 。比如：我的團(tuán)隊(duì)代碼風(fēng)格很牛掰，不需要引入其他的代碼風(fēng)格，那這一行命令，就可以讓所有風(fēng)格統(tǒng)一起來。

你要知道，Airbnb 的 javascript 代碼風(fēng)格在 github 里有3.4W+ star。 https://github.com/airbnb/javascript

學(xué)會 Airbnb 的代碼規(guī)范，意味著你的代碼風(fēng)格已經(jīng)走在了世界第一行列。代碼功底沒到第一線，至少代碼風(fēng)格提上來了，值得你裝逼了。少年，激動吧。

這份文檔涵蓋了 js 的所有方法面面，對于 web 開發(fā)再合適不過了。

上手 安裝 
npm install jscs -g

運(yùn)行

jscs path[ path[...]]

你也可以注入到 JSCS

cat myfile.js | jscs
進(jìn)階

開發(fā)工具可以自動讀取項(xiàng)目中的 .jscsrc 文件，來進(jìn)行 JSCS 檢查，并且 格式化好你的代碼 。配置文件舉例：

{
  // 使用 jquery 編碼風(fēng)格規(guī)范
  "preset": "airbnb",
  "fix": true,
  "maxErrors": 50,
  "fileExtensions": [".js", ".jsx"],
  "excludeFiles": []

  // 改變 requireCurlyBraces 規(guī)則
  //"requireCurlyBraces": null // or false

}
常用配置

preset （用預(yù)置規(guī)則進(jìn)行規(guī)則預(yù)設(shè)）

fix (true|false) 是否自動修復(fù)風(fēng)格

additionalRules （附加規(guī)則）

excludeFiles （對指定文件或目錄禁用風(fēng)格檢查,默認(rèn)排除 node_modules 文件夾）"excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]

fileExtensions （驗(yàn)證文件后綴名） "fileExtensions": [".js", ".jsx"]

maxErrors （設(shè)置錯誤要報告的最大數(shù)目，默認(rèn)50）

esnext 默認(rèn)的。對于es2015的支持

es3 過時了，不要管了

verbose (true|false)（為有錯誤的信息添加規(guī)則名稱）

errorFilter （默認(rèn) false, 否則配置路徑） （確定是否報告錯誤的篩選器函數(shù)）

錯入容忍

你可以書寫默寫規(guī)則，讓 JSCS 容忍某些錯誤。所有的規(guī)則都可以在這里查到：http://jscs.info/rules

可以直接設(shè)置規(guī)則為 null ,

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

禁用所有規(guī)則

var a = b;

// jscs:disable
var c = d; // 在這行及之后的所有錯誤都將被忽略

// jscs:enable
var e = f; // 在這行及之后的所有錯誤都將被報告

禁用特定的規(guī)則

// jscs:disable requireCurlyBraces
if (x) y(); // 在這行及之后的所有 requireCurlyBraces 錯誤都將被忽略

// jscs:enable requireCurlyBraces
if (z) a(); // 在這行及之后的所有錯誤包括requireCurlyBraces 錯誤都將被報告

對單行進(jìn)行特定規(guī)則忽略

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

禁用一個特定規(guī)則后，你可以啟用所有規(guī)則，該規(guī)則將重新啟用。

    // jscs:disable requireCurlyBraces
    if (x) y(); // 在這行及之后的所有 requireCurlyBraces 錯誤都將被忽略

    // jscs:enable
    if (z) a(); // 在這行及之后的所有錯誤包括 requireCurlyBraces 錯誤都將被報告

你可以同時禁用多個規(guī)則，并逐步重新啟用它們：

    // 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(); // 在這行及之后的所有錯誤都將被報告

為某個文件禁用所有規(guī)則
在文件第一行寫上:

// jscs:disable

如果 JSCS 還不能滿足你和你團(tuán)隊(duì)對代碼風(fēng)格的要求，麻煩告知一個更好的辦法給我！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79331.html

相關(guān)文章

  • 用什么工具保證一致的代碼風(fēng)格？

    摘要：目前來說基本上有四種工具可以完成，。發(fā)展歷程關(guān)于保持代碼一致性風(fēng)格，我們可以追溯到。是啥是針對語言源碼的檢測工具，它的功能就是看看源碼有沒有編寫錯誤，有沒有風(fēng)格問題。 1. 理解問題 首先這個問題展開來講就是如何在Node.js模塊編寫中保持代碼一致性風(fēng)格。 目前來說基本上有四種工具可以完成JSLint，JSHint,JSCS,ESLint。 下面將從歷史的角度來看看他們四個有什么關(guān)系...

    linkin 評論0 收藏0

  • 【譯】JavaScript代碼檢查工具對比

    摘要：看到很多團(tuán)隊(duì)和開源項(xiàng)目都在用代碼檢查工具，自己一直沒用過，最近加入了新團(tuán)隊(duì)有項(xiàng)目在用，就想著研究一下。代碼校驗(yàn)工具能夠讓你在寫代碼時避免一些低級的錯誤。同時，也有友好的文檔針對每一條規(guī)則。在上文提高的所有工具當(dāng)中它對有著最好的支持。 看到很多團(tuán)隊(duì)和開源項(xiàng)目都在用代碼檢查工具，自己一直沒用過，最近加入了新團(tuán)隊(duì)有項(xiàng)目在用，就想著研究一下?？吹絪itepoint上的一篇2015年的文章覺得不...

    fengxiuping 評論0 收藏0

  • [譯]JavaScript lint工具的比較

    摘要：工具幫助避免在編寫時出現(xiàn)愚蠢的錯誤。并不檢測潛在的，比如，未使用的變量或意外的全局變量等。在提到的所有工具中，它具有最廣泛的功能支持。使用工具是捕獲問題的良好步驟，但只能看到規(guī)則允許的錯誤。也可用于此目的。 Lint工具幫助避免在編寫JavaScript時出現(xiàn)愚蠢的錯誤。盡管有多年的經(jīng)驗(yàn)，我仍然鍵入不正確的變量名稱，出現(xiàn)語法錯誤，以及忘記正確地處理error。在浪費(fèi)自己時間，或更糟糕地...

    luck 評論0 收藏0

  • 一個靠譜的前端開源項(xiàng)目需要什么？

    摘要：一個靠譜的應(yīng)該包含以下幾部分言簡意賅的項(xiàng)目介紹你的項(xiàng)目解決了什么核心問題，有哪些令人心動的特性。除了在中提到遵循的開源協(xié)議外，一個靠譜的開源項(xiàng)目還會將該開源協(xié)議的內(nèi)容文檔放在自己的項(xiàng)目下方。 0. 前言 寫前端代碼一段時間之后，你可能會萌生做一個開源項(xiàng)目的想法，一方面將自己的好點(diǎn)子分享出去讓更多的人受益，另一方面也可以在社區(qū)貢獻(xiàn)的環(huán)境下學(xué)到更多的東西從而快速成長。但是開源項(xiàng)目也有開源項(xiàng)...

    hiyayiji 評論0 收藏0

  • 一個靠譜的前端開源項(xiàng)目需要什么？

    摘要：一個靠譜的應(yīng)該包含以下幾部分言簡意賅的項(xiàng)目介紹你的項(xiàng)目解決了什么核心問題，有哪些令人心動的特性。除了在中提到遵循的開源協(xié)議外，一個靠譜的開源項(xiàng)目還會將該開源協(xié)議的內(nèi)容文檔放在自己的項(xiàng)目下方。 0. 前言 寫前端代碼一段時間之后，你可能會萌生做一個開源項(xiàng)目的想法，一方面將自己的好點(diǎn)子分享出去讓更多的人受益，另一方面也可以在社區(qū)貢獻(xiàn)的環(huán)境下學(xué)到更多的東西從而快速成長。但是開源項(xiàng)目也有開源項(xiàng)...

    DesGemini 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<