《一統江湖的大前端》系列是自己的前端學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的了解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了,,手機app開發
桌面應用開發
用于神經網絡人工智能的庫
頁面遊戲
, 甚至資料可視化
，什麼火就搞什麼,活脫脫一個蹭熱點小能手。如果你也覺得前端的日常開發有些枯燥，不妨一起來看看前端的另一番模樣。嵌入式開發
一.協作開發引發的問題
前端有個很流行的段子（其實前端有很多流行的段子）：
看完你們項目的源碼，就知道你們團隊有多少個人。
各種命名風格，各種備援代碼，各種縮進風格，各種奇葩注釋和各種沒有注釋，眼中有碼，心中無碼，隻有心累兩個字，項目的整潔度會受到很多客觀因素的影響，為了自己的身心健康，我們應該試圖将這種影響降到最低。簡單地說，統一格式和風格的代碼讓人更加賞心悅目，更不容易讓你産生想摔鍵盤的沖動;用一個B格更高的詞語，叫做“熵減”，也就是降低團隊産出代碼的無序性，如果你想在未來成為一名合格的前端架構師，這将是你的工作目标。
二.碼如其人
從做開發開始，我就是一個名
sublime
的愛好者，随着常用快捷鍵的熟練和各種插件的配合，自己的開發速度得到了很大提升，畢竟這是一個顔值決定一切的時代，作為一個前端，如果你的編輯器永遠都是白底藍字或者黑底橙字（中槍的請不要扔鞋）,你真的不好意思跟人家講自己是做前端的，因為别人的心中會閃現出如下的邏輯：
這貨的編輯器醜 => 這貨的審美很Low => 這貨的活估計也好不到哪去
這個思維鍊條是很可怕的，有可能無形中讓你損失掉很多機會，如果從
你的作品
來推斷你是一個怎樣的人，你覺得其他人會得出什麼樣的結論呢？
三.editorconfig + eslint
廢話不（再）多說,直接呈上低配版解決方案:
- editorconfig
- 格式統一配置工具
- 跨浏覽器廣泛支援(常見如IDEA,WebStorm,Sublime,Vscode等統統都支援)
- 權重高于編輯器内部的格式設定
- 配置項一共就8個
- eslint
- javascript文法風格檢查工具
- javascript靜态檢查工具
- 支援es6,JSX, AngularJs
- 支援前端工程化工具
四.editorconfig使用方法
筆者認為editorconfig最常見的用途即為統一檔案的編碼字元集以及縮進風格,其他方面僅在特殊場景下較為有用，例如 trim_trailing_whitespace
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.?
檔案。
3.手動使用eslint進行文法檢查
在包含
.eslintrc檔案
的目錄下，用一個簡易函數來測試eslint的校驗功能，如下所示可以看到，規則集中配置的對
強制使用全等
禁止使用預設alert類提示
的限制在eslint校驗後給出了提示資訊。
esling.json
配置：
用來被測試的js代碼(命名為ab.js)：
在指令行運作eslint工具進行校驗，可看到校驗結果列印在了指令行上：
4.工具內建
前端工程化
已是大趨勢，使用
grunt
gulp
webpack
等自動化打包工具或
jenkins
持續內建工具，就可以實作在指定的動作(如代碼送出到個人分支後觸發，如符合條件的js檔案每次儲存時)後或指定開發環節(如代碼打包壓縮前)自動使用eslint對指定代碼進行檢查。
5.建議
eslint
規則集中涉及超過200條規則，筆者自己仍然在學習中，強烈建議前端開發者對此進行系統地專題學習，不僅需要了解配置規則是在限制什麼，更要搞清楚為什麼要做這樣的限制,相信大部分規則學習下來，對于js語言的了解一定會上一層的台階，而且是很高的台階。
六.大史的其他壓箱底寶貝
有了editorconfig和eslint，協作開發中的問題就能解決嗎？當然沒那麼簡單。正所謂優秀的代碼千篇一律，醜陋的代碼各有風騷。從命名規範到奇技淫巧，隻有你想不到的，沒有他寫不出來的。
1.錦囊A——sublime編輯器縮進風格配置
editorconfig
處理了
Tab
Space
一緻性的問題,但是很多開發人員并沒有用
Tab
來控制縮進的習慣，而是習慣手動敲空格，寫代碼寫嗨了基本都是随機敲出0-4個空格,這時候
editorconfig
就沒法搞了，sublime編輯器中提供了縮進風格的設定，對于目前檔案可以在界面右下角直接進行修改，但為了統一起見，建議通過使用者配置的方式設定全局規則，具體方法為:
打開
首選項(preference)
菜單，選擇
設定-使用者
,輸入高亮框中的兩個配置項即可。回車換行後代碼将自動縮進指定空格數，以達到統一的縮進樣式，sublime對于本行是否需要縮進會進行智能判斷，使用時你就會發現它時很符合代碼書寫習慣的。
2.錦囊B——sublime代碼片段
代碼編寫或搬運過程中，諸如函數聲明或條件分支或循環語句等是最容易出現縮進問題的，而順序結構的代碼幾乎不會出現縮進問題。
sublime
為我們提供了強大的
預設代碼片段
能力（或者簡單了解為快捷鍵）。使用的感覺就好像念咒語那樣，個人感覺還是蠻好玩的。
-
/**
Tab
- 生成jsdoc風格的前置注釋資訊,未來是可以輸出文檔或配合單元測試的。
-
if
Tab
- 生成if條件判斷語句的代碼結構
-
for
Tab
- 生成正向循環或反向循環代碼結構
-
fun
Tab
- 生成函數聲明代碼結構
- 其他自定義代碼片段
- 可自定義快捷鍵及代碼片段，并指定若幹可配置的焦點
生成的代碼效果如下：
代碼架構生成後，每多按一次
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
功能的，至于是否要啟用，由你們團隊自己決定吧。
如果這樣的限制下你的代碼還能亂成一坨，那我隻能說你是故意的。
七.後記——修煉
寫代碼是一種修行，是一個精益求精的過程，被動限制和檢查并不能解決所有的問題，畢竟
沒有文法錯誤
優雅的代碼
之間還是有距離的。