一統(tǒng)江湖的大前端（5）editorconfig + eslint——你的代碼里藏著你的優(yōu)雅

《一統(tǒng)江湖的大前端》系列是自己的前端學(xué)習(xí)筆記，旨在介紹javascript在非網(wǎng)頁開發(fā)領(lǐng)域的應(yīng)用案例和發(fā)現(xiàn)各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經(jīng)太多了, 手機app開發(fā) , 桌面應(yīng)用開發(fā) , 用于神經(jīng)網(wǎng)絡(luò)人工智能的庫 , 頁面游戲 , 數(shù)據(jù)可視化 , 甚至 嵌入式開發(fā) ，什么火就搞什么,活脫脫一個蹭熱點小能手。如果你也覺得前端的日常開發(fā)有些枯燥，不妨一起來看看前端的另一番模樣。

一.協(xié)作開發(fā)引發(fā)的問題

前端有個很流行的段子（其實前端有很多流行的段子）：

看完你們項目的源碼，就知道你們團隊有多少個人。

各種命名風(fēng)格，各種冗余代碼，各種縮進風(fēng)格，各種奇葩注釋和各種沒有注釋，眼中有碼，心中無碼，只有心累兩個字，項目的整潔度會受到很多客觀因素的影響，為了自己的身心健康，我們應(yīng)該試圖將這種影響降到最低。簡單地說，統(tǒng)一格式和風(fēng)格的代碼讓人更加賞心悅目，更不容易讓你產(chǎn)生想摔鍵盤的沖動;用一個B格更高的詞語，叫做“熵減”，也就是降低團隊產(chǎn)出代碼的無序性，如果你想在未來成為一名合格的前端架構(gòu)師，這將是你的工作目標。

二.碼如其人

從做開發(fā)開始，我就是一個名sublime的愛好者，隨著常用快捷鍵的熟練和各種插件的配合，自己的開發(fā)速度得到了很大提升，畢竟這是一個顏值決定一切的時代，作為一個前端，如果你的編輯器永遠都是白底藍字或者黑底橙字（中槍的請不要扔鞋）,你真的不好意思跟人家講自己是做前端的，因為別人的心中會閃現(xiàn)出如下的邏輯：

這貨的編輯器丑 => 這貨的審美很Low => 這貨的活估計也好不到哪去

這個思維鏈條是很可怕的，有可能無形中讓你損失掉很多機會，如果從你的作品來推斷你是一個怎樣的人，你覺得其他人會得出什么樣的結(jié)論呢？

三.editorconfig + eslint

廢話不（再）多說,直接呈上低配版解決方案:

• editorconfig
  • 格式統(tǒng)一配置工具
  • 跨瀏覽器廣泛支持(常見如IDEA,WebStorm,Sublime,Vscode等統(tǒng)統(tǒng)都支持)
  • 權(quán)重高于編輯器內(nèi)部的格式設(shè)定
  • 配置項一共就8個
• eslint
  • javascript語法風(fēng)格檢查工具
  • javascript靜態(tài)檢查工具
  • 支持es6,JSX, AngularJs
  • 支持前端工程化工具

四.editorconfig使用方法

筆者認為editorconfig最常見的用途即為統(tǒng)一文件的編碼字符集以及縮進風(fēng)格,其他方面僅在特殊場景下較為有用，例如trim_trailing_whitespace配置項對于.md文件就非常實用，但對于其他類型的文件卻沒什么卵用。

1.通配符

• * 匹配除/之外的任意字符串
• ** 匹配任意字符串
• ? 匹配任意單個字符
• [name] 匹配name字符
• [!name] 匹配非name字符
• {s1,s2,s3} 匹配任意給定的字符串(since 0.11.0)

2.屬性

• root: 表明是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時，才會停止查找.editorconfig文件。
• indent_style: 設(shè)置縮進風(fēng)格，tab或者空格。tab是hard tabs，space為soft tabs。
• indent_size : 縮進的寬度，即列數(shù)，整數(shù)。如果indent_style為tab,則此屬性默認為tab_width。
• tab_width : 設(shè)置tab的列數(shù)。默認是indent_size。
• end_of_line： 換行符，lf、cr和crlf
• charset： 編碼，latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom。
• trim_trailing_whitespace： 設(shè)為true表示會除去換行行首的任意空白字符。
• insert_final_newline: 設(shè)為true表明使文件以一個空白行結(jié)尾

3.使用示例

3.1安裝方法

在editorconfig官網(wǎng)找到自己所用的編輯器所對應(yīng)的editorconfig插件(sublime的插件直接在github上下載就可以了).

3.2使用方法

將在項目根目錄下建立.editorconfig文件,windows下無法生成只包含擴展名的文件時，可運行cmder工具，在指定目錄下在命令行中輸入touch .editorconfig命令來生成配置文件，文件的內(nèi)容如下所示：

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,html,css}]
charset = utf-8

# Tab indentation (no size specified)
[*.js]
indent_style = space
indent_width = 4

五.eslint使用方法

eslint的Rules規(guī)則集包含近200條javascript編碼規(guī)則，可以幫助我們檢查編程中的語法錯誤，以及對一些指定的最佳實踐進行限制，減少整個工程中的奇葩代碼片段和各種奇技淫巧,為開發(fā)者提供javascript靜態(tài)檢查能力，為前端架構(gòu)師提供統(tǒng)一團隊編程風(fēng)格的能力。

1.安裝

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

2.生成.eslintrc配置文件

.eslintrc.?文件支持js,json,yaml,yml等常見格式,全局安裝eslint工具后，在工作目錄下輸入eslint --init，按照提示即可生成定制化的包含基本規(guī)則的.eslintrc.?文件。

3.手動使用eslint進行語法檢查

在包含.eslintrc文件的目錄下，用一個簡易函數(shù)來測試eslint的校驗功能，如下所示可以看到，規(guī)則集中配置的對強制使用全等和禁止使用默認alert類提示的限制在eslint校驗后給出了提示信息。

esling.json配置：

用來被測試的js代碼(命名為ab.js)：

在命令行運行eslint工具進行校驗，可看到校驗結(jié)果打印在了命令行上：

4.工具集成

前端工程化已是大趨勢，使用grunt,gulp,webpack等自動化打包工具或jenkins持續(xù)集成工具，就可以實現(xiàn)在指定的動作(如代碼提交到個人分支后觸發(fā)，如符合條件的js文件每次保存時)后或指定開發(fā)環(huán)節(jié)(如代碼打包壓縮前)自動使用eslint對指定代碼進行檢查。

5.建議

eslint規(guī)則集中涉及超過200條規(guī)則，筆者自己仍然在學(xué)習(xí)中，強烈建議前端開發(fā)者對此進行系統(tǒng)地專題學(xué)習(xí)，不僅需要了解配置規(guī)則是在限制什么，更要搞清楚為什么要做這樣的限制,相信大部分規(guī)則學(xué)習(xí)下來，對于js語言的理解一定會上一層的臺階，而且是很高的臺階。

六.大史的其他壓箱底寶貝

有了editorconfig和eslint，協(xié)作開發(fā)中的問題就能解決嗎？當(dāng)然沒那么簡單。正所謂優(yōu)秀的代碼千篇一律，丑陋的代碼各有風(fēng)騷。從命名規(guī)范到奇技淫巧，只有你想不到的，沒有他寫不出來的。

1.錦囊A——sublime編輯器縮進風(fēng)格配置

editorconfig處理了Tab和Space一致性的問題,但是很多開發(fā)人員并沒有用Tab來控制縮進的習(xí)慣，而是習(xí)慣手動敲空格，寫代碼寫嗨了基本都是隨機敲出0-4個空格,這時候editorconfig就沒法搞了，sublime編輯器中提供了縮進風(fēng)格的設(shè)定，對于當(dāng)前文件可以在界面右下角直接進行修改，但為了統(tǒng)一起見，建議通過用戶配置的方式設(shè)定全局規(guī)則，具體方法為:
打開首選項(preference)菜單，選擇設(shè)置-用戶,輸入高亮框中的兩個配置項即可?；剀嚀Q行后代碼將自動縮進指定空格數(shù)，以達到統(tǒng)一的縮進樣式，sublime對于本行是否需要縮進會進行智能判斷，使用時你就會發(fā)現(xiàn)它時很符合代碼書寫習(xí)慣的。

2.錦囊B——sublime代碼片段

代碼編寫或搬運過程中，諸如函數(shù)聲明或條件分支或循環(huán)語句等是最容易出現(xiàn)縮進問題的，而順序結(jié)構(gòu)的代碼幾乎不會出現(xiàn)縮進問題。sublime為我們提供了強大的預(yù)設(shè)代碼片段能力（或者簡單理解為快捷鍵）。使用的感覺就好像念咒語那樣，個人感覺還是蠻好玩的。

• /** + Tab
  • 生成jsdoc風(fēng)格的前置注釋信息,未來是可以輸出文檔或配合單元測試的。
• if + Tab
  • 生成if條件判斷語句的代碼結(jié)構(gòu)
• for + Tab
  • 生成正向循環(huán)或反向循環(huán)代碼結(jié)構(gòu)
• fun + Tab
  • 生成函數(shù)聲明代碼結(jié)構(gòu)
• 其他自定義代碼片段
  • 可自定義快捷鍵及代碼片段，并指定若干可配置的焦點

生成的代碼效果如下：

代碼框架生成后，每多按一次Tab鍵，就會聚焦到下一個焦點，比如輸入fun，然后按Tab鍵，第一焦點在函數(shù)名處，再按Tab鍵，第二焦點在參數(shù)列表處，再按Tab,第三焦點在函數(shù)體處，完全不用自己考慮縮進等問題。

3.錦囊C——HTML/CSS/Js Prettify插件

本插件是sublime的插件，提供HTML/CSS/JS的代碼格式化能力，如果你的代碼都是自上而下一氣呵成，那這個插件估計也沒什么用了，但可能嗎？各種需求變更使你在編寫代碼的時候免不了各種Ctrl+C和Ctrl+D（不知道什么意思？你怎么當(dāng)代碼搬運工的？），基本一波折騰下來，原本詩篇一樣的代碼就面目全非了，此時prittify插件就派上用場了，直接在sublime中單擊右鍵，選擇HTML/CSS/JS Prettify->Prettify Code，一鍵點下去，整個世界都美好了。

當(dāng)然這個插件的配置中是可以設(shè)置為每次Ctrl+s保存文件時自動觸發(fā)Prettify功能的，至于是否要啟用，由你們團隊自己決定吧。

如果這樣的限制下你的代碼還能亂成一坨，那我只能說你是故意的。

七.后記——修煉

寫代碼是一種修行，是一個精益求精的過程，被動約束和檢查并不能解決所有的問題，畢竟沒有語法錯誤和優(yōu)雅的代碼之間還是有距離的。

比如你在編寫html頁面時使用table>tbody>tr>td去實現(xiàn)一個單列的列表項,因為你不知道ul和li標簽;
比如你在編寫CSS的時候，寫了一堆連自己都不知道如何復(fù)用的樣式;
比如你在編寫Js的時候，心情好了寫駝峰命名，心情不好了寫匈牙利命名，心情很不好了直接上拼音，心態(tài)炸了直接寫出laoZiBuGanLe這種變量名
......
這都是不會報錯的,但它們都會暴露出你的弱點，或是基礎(chǔ)知識，或是心態(tài)控制，或是合作溝通。

好的代碼里，
藏著你對技巧的總結(jié)和知識的積累
藏著你對語言精華的理解和糟粕的規(guī)避
藏著你認真的態(tài)度和嚴苛的代碼潔癖
藏著你的修養(yǎng)和你的優(yōu)雅

原文鏈接：https://bbs.huaweicloud.com/blogs/0030c40d5e6911e89fc57ca23e93a89f