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

《一統(tǒng)江湖的大前端》系列是自己的前端學(xué)習(xí)筆記，旨在介紹javascript在非網(wǎng)頁開發(fā)領(lǐng)域的應(yīng)用案例和發(fā)現(xiàn)各類好玩的js庫，不定期更新。

如果你對(duì)前端的理解還是寫寫頁面綁綁事件，那你真的是有點(diǎn)OUT了，前端能做的事情已經(jīng)太多了, 手機(jī)app開發(fā) , 桌面應(yīng)用開發(fā) , 用于神經(jīng)網(wǎng)絡(luò)人工智能的庫 , 頁面游戲 , 數(shù)據(jù)可視化 , 甚至 嵌入式開發(fā) ，什么火就搞什么,活脫脫一個(gè)蹭熱點(diǎn)小能手。如果你也覺得前端的日常開發(fā)有些枯燥，不妨一起來看看前端的另一番模樣。

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

前端有個(gè)很流行的段子（其實(shí)前端有很多流行的段子）：

看完你們項(xiàng)目的源碼，就知道你們團(tuán)隊(duì)有多少個(gè)人。

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

二.碼如其人

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

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

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

三.editorconfig + eslint

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

editorconfig

1、格式統(tǒng)一配置工具

2、跨瀏覽器廣泛支持(常見如IDEA,WebStorm,Sublime,Vscode等統(tǒng)統(tǒng)都支持)

3、權(quán)重高于編輯器內(nèi)部的格式設(shè)定

4、配置項(xiàng)一共就8個(gè)

eslint

1、javascript語法風(fēng)格檢查工具

2、javascript靜態(tài)檢查工具

3、支持es6,JSX, AngularJs

4、支持前端工程化工具

四.editorconfig使用方法

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

1、通配符

* 匹配除/之外的任意字符串

** 匹配任意字符串

? 匹配任意單個(gè)字符

[name] 匹配name字符

[!name] 匹配非name字符

{s1,s2,s3} 匹配任意給定的字符串(since 0.11.0)

2、屬性

root: 表明是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時(shí)，才會(huì)停止查找.editorconfig文件。

indent_style: 設(shè)置縮進(jìn)風(fēng)格，tab或者空格。tab是hard tabs，space為soft tabs。

indent_size?: 縮進(jìn)的寬度，即列數(shù)，整數(shù)。如果indentstyle為tab,則此屬性默認(rèn)為tabwidth。

tab_width?: 設(shè)置tab的列數(shù)。默認(rèn)是indent_size。

endofline： 換行符，lf、cr和crlf

charset： 編碼，latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom。

trimtrailingwhitespace： 設(shè)為true表示會(huì)除去換行行首的任意空白字符。

insertfinalnewline: 設(shè)為true表明使文件以一個(gè)空白行結(jié)尾

3、使用示例

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

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

五.eslint使用方法

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

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

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

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

.eslintrc.json內(nèi)容：

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

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

4.工具集成

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

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

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

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

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

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

/**?+?Tab

生成jsdoc風(fēng)格的前置注釋信息,未來是可以輸出文檔或配合單元測(cè)試的。

if?+?Tab

生成if條件判斷語句的代碼結(jié)構(gòu)

for?+?Tab

生成正向循環(huán)或反向循環(huán)代碼結(jié)構(gòu)

fun?+?Tab

生成函數(shù)聲明代碼結(jié)構(gòu)

其他自定義代碼片段

可自定義快捷鍵及代碼片段，并指定若干可配置的焦點(diǎn)

生成的代碼效果如下：

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

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

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

七.后記——修煉

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

比如你在編寫html頁面時(shí)使用table>tbody>tr>td去實(shí)現(xiàn)一個(gè)單列的列表項(xiàng),因?yàn)槟悴恢纔l和li標(biāo)簽;

比如你在編寫CSS的時(shí)候，寫了一堆連自己都不知道如何復(fù)用的樣式;

比如你在編寫Js的時(shí)候，心情好了寫駝峰命名，心情不好了寫匈牙利命名，心情很不好了直接上拼音，心態(tài)炸了直接寫出laoZiBuGanLe這種變量名

......

這都是不會(huì)報(bào)錯(cuò)的,但它們都會(huì)暴露出你的弱點(diǎn)，或是基礎(chǔ)知識(shí)，或是心態(tài)控制，或是合作溝通。

請(qǐng)善待你的代碼，因?yàn)楹玫拇a里

藏著你對(duì)技巧的總結(jié)和知識(shí)的積累

藏著你對(duì)語言精華的理解和糟粕的規(guī)避

藏著你認(rèn)真的態(tài)度和嚴(yán)苛的代碼潔癖

藏著你的修養(yǎng)和你的優(yōu)雅

ESLint web前端 https

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。