天天看點

一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅

《一統江湖的大前端》系列是自己的前端學習筆記,旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫,不定期更新。如果你對前端的了解還是寫寫頁面綁綁事件,那你真的是有點OUT了,前端能做的事情已經太多了,

手機app開發

,

桌面應用開發

用于神經網絡人工智能的庫

頁面遊戲

資料可視化

, 甚至

嵌入式開發

,什麼火就搞什麼,活脫脫一個蹭熱點小能手。如果你也覺得前端的日常開發有些枯燥,不妨一起來看看前端的另一番模樣。
一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅

一.協作開發引發的問題

前端有個很流行的段子(其實前端有很多流行的段子):

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

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

二.碼如其人

從做開發開始,我就是一個名

sublime

的愛好者,随着常用快捷鍵的熟練和各種插件的配合,自己的開發速度得到了很大提升,畢竟這是一個顔值決定一切的時代,作為一個前端,如果你的編輯器永遠都是白底藍字或者黑底橙字(中槍的請不要扔鞋),你真的不好意思跟人家講自己是做前端的,因為别人的心中會閃現出如下的邏輯:

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

這個思維鍊條是很可怕的,有可能無形中讓你損失掉很多機會,如果從

你的作品

來推斷你是一個怎樣的人,你覺得其他人會得出什麼樣的結論呢?

三.editorconfig + eslint

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

  • editorconfig
    • 格式統一配置工具
    • 跨浏覽器廣泛支援(常見如IDEA,WebStorm,Sublime,Vscode等統統都支援)
    • 權重高于編輯器内部的格式設定
    • 配置項一共就8個
  • eslint
    • javascript文法風格檢查工具
    • javascript靜态檢查工具
    • 支援es6,JSX, AngularJs
    • 支援前端工程化工具

四.editorconfig使用方法

筆者認為editorconfig最常見的用途即為統一檔案的編碼字元集以及縮進風格,其他方面僅在特殊場景下較為有用,例如

trim_trailing_whitespace

配置項對于.md檔案就非常實用,但對于其他類型的檔案卻沒什麼卵用。
1.通配符
  • * 比對除/之外的任意字元串
  • ** 比對任意字元串
  • ? 比對任意單個字元
  • [name] 比對name字元
  • [!name] 比對非name字元
  • {s1,s2,s3} 比對任意給定的字元串(since 0.11.0)
2.屬性
  • root: 表明是最頂層的配置檔案,發現設為true時,才會停止查找.editorconfig檔案。
  • indent_style: 設定縮進風格,tab或者空格。tab是hard tabs,space為soft tabs。
  • indent_size : 縮進的寬度,即列數,整數。如果indent_style為tab,則此屬性預設為tab_width。
  • tab_width : 設定tab的列數。預設是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: 設為true表示會除去換行行首的任意空白字元。
  • insert_final_newline: 設為true表明使檔案以一個空白行結尾
3.使用示例
3.1安裝方法

在editorconfig官網找到自己所用的編輯器所對應的

editorconfig插件

(sublime的插件直接在github上下載下傳就可以了).

3.2使用方法

将在項目根目錄下建立

.editorconfig

檔案,windows下無法生成隻包含擴充名的檔案時,可運作cmder工具,在指定目錄下在指令行中輸入

touch .editorconfig

指令來生成配置檔案,檔案的内容如下所示:

# 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規則集包含近200條javascript編碼規則,可以幫助我們檢查程式設計中的文法錯誤,以及對一些指定的最佳實踐進行限制,減少整個工程中的

奇葩代碼片段

各種奇技淫巧

,為開發者提供javascript靜态檢查能力,為前端架構師提供統一團隊程式設計風格的能力。
1.安裝

使用

npm install -g eslint

yarn global add eslint

進行全局安裝eslint工具。

2.生成.eslintrc配置檔案

.eslintrc.?檔案支援

js

json

yaml

yml

等常見格式,全局安裝eslint工具後,在工作目錄下輸入

eslint --init

,按照提示即可生成定制化的包含基本規則的

.eslintrc.?

檔案。

一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅
3.手動使用eslint進行文法檢查

在包含

.eslintrc檔案

的目錄下,用一個簡易函數來測試eslint的校驗功能,如下所示可以看到,規則集中配置的對

強制使用全等

禁止使用預設alert類提示

的限制在eslint校驗後給出了提示資訊。

esling.json

配置:

一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅

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

一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅

在指令行運作eslint工具進行校驗,可看到校驗結果列印在了指令行上:

一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅
4.工具內建

前端工程化

已是大趨勢,使用

grunt

gulp

webpack

等自動化打包工具或

jenkins

持續內建工具,就可以實作在指定的動作(如代碼送出到個人分支後觸發,如符合條件的js檔案每次儲存時)後或指定開發環節(如代碼打包壓縮前)自動使用eslint對指定代碼進行檢查。

5.建議

eslint

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

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

有了editorconfig和eslint,協作開發中的問題就能解決嗎?當然沒那麼簡單。正所謂優秀的代碼千篇一律,醜陋的代碼各有風騷。從命名規範到奇技淫巧,隻有你想不到的,沒有他寫不出來的。
1.錦囊A——sublime編輯器縮進風格配置
一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅

editorconfig

處理了

Tab

Space

一緻性的問題,但是很多開發人員并沒有用

Tab

來控制縮進的習慣,而是習慣手動敲空格,寫代碼寫嗨了基本都是随機敲出0-4個空格,這時候

editorconfig

就沒法搞了,sublime編輯器中提供了縮進風格的設定,對于目前檔案可以在界面右下角直接進行修改,但為了統一起見,建議通過使用者配置的方式設定全局規則,具體方法為:

打開

首選項(preference)

菜單,選擇

設定-使用者

,輸入高亮框中的兩個配置項即可。回車換行後代碼将自動縮進指定空格數,以達到統一的縮進樣式,sublime對于本行是否需要縮進會進行智能判斷,使用時你就會發現它時很符合代碼書寫習慣的。

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

代碼編寫或搬運過程中,諸如函數聲明或條件分支或循環語句等是最容易出現縮進問題的,而順序結構的代碼幾乎不會出現縮進問題。

sublime

為我們提供了強大的

預設代碼片段

能力(或者簡單了解為快捷鍵)。使用的感覺就好像念咒語那樣,個人感覺還是蠻好玩的。

  • /**

    +

    Tab

    • 生成jsdoc風格的前置注釋資訊,未來是可以輸出文檔或配合單元測試的。
  • if

    Tab

    • 生成if條件判斷語句的代碼結構
  • for

    Tab

    • 生成正向循環或反向循環代碼結構
  • fun

    Tab

    • 生成函數聲明代碼結構
  • 其他自定義代碼片段
    • 可自定義快捷鍵及代碼片段,并指定若幹可配置的焦點

生成的代碼效果如下:

一統江湖的大前端(5)editorconfig + eslint——你的代碼裡藏着你的優雅

代碼架構生成後,每多按一次

Tab

鍵,就會聚焦到下一個焦點,比如輸入

fun

,然後按

Tab

鍵,第一焦點在函數名處,再按

Tab

鍵,第二焦點在參數清單處,再按

Tab

,第三焦點在函數體處,完全不用自己考慮縮進等問題。

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

本插件是sublime的插件,提供HTML/CSS/JS的代碼格式化能力,如果你的代碼都是自上而下一氣呵成,那這個插件估計也沒什麼用了,但可能嗎?各種需求變更使你在編寫代碼的時候免不了各種

Ctrl+C

Ctrl+D

(不知道什麼意思?你怎麼當代碼搬運工的?),基本一波折騰下來,原本詩篇一樣的代碼就面目全非了,此時

prittify

插件就派上用場了,直接在sublime中單擊右鍵,選擇

HTML/CSS/JS Prettify

->

Prettify Code

,一鍵點下去,整個世界都美好了。

當然這個插件的配置中是可以設定為每次

Ctrl+s

儲存檔案時自動觸發

Prettify

功能的,至于是否要啟用,由你們團隊自己決定吧。

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

七.後記——修煉

寫代碼是一種修行,是一個精益求精的過程,被動限制和檢查并不能解決所有的問題,畢竟

沒有文法錯誤

優雅的代碼

之間還是有距離的。