前端架構師神技，三招統一代碼風格

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文從代碼規範，代碼檢查，代碼格式化，以及編輯器自動化實現的方向，介紹代碼規範統一在我們團隊的實踐應用。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"大綱預覽","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文介紹的內容包括以下方面：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"認識代碼規範","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"制定和統一規範","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"神技一：ESLint","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"神技二：Prettier","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"神技三：VSCode","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"附錄：命名和項目結構規範","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"認識代碼規範","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先來思考兩個問題：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"什麼是代碼規範？","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼需要代碼規範？","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你是一個經驗豐富的前端開發，你一定接觸過這樣的老項目：變量名是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"abc","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"fds","attrs":{}}],"attrs":{}},{"type":"text","text":" 這種隨意起的，或者是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"name1","attrs":{}}],"attrs":{}},{"type":"text","text":", ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"name2","attrs":{}}],"attrs":{}},{"type":"text","text":" 這種帶數字起名，這樣的變量不加註釋，鬼都不知道它是幹什麼的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這類代碼就是一種典型的不規範代碼。這樣的代碼除了讓我們開發人員情緒暴躁，最重要的問題是，它極大的降低了團隊協作的效率和程序質量。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在團隊協作過程中，當組內其他人需要使用或 review 你的代碼，看到這種情況，除了噴你，還要花費大量時間瞭解你寫的是什麼。同時這樣非常容易造成變量衝突，帶來未知隱患，調試困難等問題，甚至可以看出一個程序員的編碼態度和專業程度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然，代碼規範包含很多方面，變量命名規範只是最基礎的規範。不規範的地方越多，程序質量越低，團隊協作的效率也就會越低。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瞭解了不規範的代碼以及不規範代碼帶來的問題，作爲前端架構師，我們就要思考三個問題：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"如何制定規範？","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"如何統一團隊的規範？","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"如何檢測規範？","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"制定和統一規範","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像上面給變量隨意亂起名字的情況，在早期的前端項目中非常常見。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲早期項目規模，團隊規模有限，沒有命名規範這種意識，隨意起名貌似也沒有太大的問題，只要不重複就好。但是隨着前端項目規模越來越大，複雜度越來越高，不規範帶來的問題越來越多，這種規範意識才慢慢的被重視起來。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過社區的不斷髮展，協定了命名包含以下幾種規範：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下劃線命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user_name","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"中劃線命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-name","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小駝峯命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"userName","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大駝峯命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"UserName","attrs":{}}],"attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有了這些規範，開發者們起名字的時候心裏就有譜了。而且這些規範目前也被大多數開發者們接受，如果不按照規範命名，很可能會被同事吐槽嘍！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當規範成爲普遍共識之後，大家按照自己的喜好使用不同的規範，逐漸形成了自己的編碼習慣。在一個團隊中，每個開發者往往各自有各自的編碼習慣。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而這又成爲了問題。再拿變量舉例：一個團隊中，有的人習慣用下劃線命名變量，如 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user_name","attrs":{}}],"attrs":{}},{"type":"text","text":"；有的人習慣用駝峯命名變量，如 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"userName","attrs":{}}],"attrs":{}},{"type":"text","text":"。這兩種命名方式都正確，都符合規範，但是會造成團隊的代碼風格混亂，無法統一。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那爲什麼要統一呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"統一的好處有很多。比如我們統一規定：","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"命名變量用下劃線，命名方法用小駝峯","attrs":{}},{"type":"text","text":"。那麼在團隊協作時，大家看到下劃線就知道這是一個變量，看到小駝峯就知道這是一個方法。十個人的代碼寫出來是一個人的風格，不需要了解其他的編碼風格，實現無障礙協作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"十個人的代碼寫出一個人的風格，說起來很理想，但是靠監督和自覺實現幾乎是不可能的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"怎麼辦呢？下面就是本文重點：","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"祭出實現代碼規範的三招神技","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"神技一：ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面說到，團隊協作開發項目，由於每個人的編碼習慣不同，會寫出各種各樣的代碼。這樣的代碼又亂又難以維護。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我們希望有這樣一個工具，可以制定一套比較完整全面的規範，如果大家的編碼不符合規範，程序就會警告甚至報錯，用這種工具來倒逼團隊成員遵守統一的代碼風格。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個工具是有的，我們都聽過，就是大名鼎鼎的 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ESLint 有兩種能力：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"檢查代碼質量","attrs":{}},{"type":"text","text":"，如是否有已定義但未使用的變量。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"檢查代碼風格","attrs":{}},{"type":"text","text":"，換行，引號，縮進等相關的規範。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這兩種能力幾乎涵蓋了絕大部分代碼規範，並且具體規範是可配置的，團隊可以定製自己喜歡的代碼風格。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定製規範後，項目運行或熱更新時，ESLint 就會自動檢查代碼是否符合規範。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"問","attrs":{}},{"type":"text","text":"：ESLint 檢查與 TypeScript 檢查有啥區別？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TypeScript 只會檢查","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"類型錯誤","attrs":{}}],"attrs":{}},{"type":"text","text":"，而 ESLint 會檢查","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"風格錯誤","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"嘗試 ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在項目下安裝：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npm install eslint --save-dev","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後運行命令初始化配置：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"eslint --init","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"eslint","attrs":{}}],"attrs":{}},{"type":"text","text":" 是一個交互式命令，可以上下切換選擇適合項目的選項；完成會生成 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"基本配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":".eslintrc.json","attrs":{}},{"type":"text","text":" 的基本配置如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"env\": {\n \"browser\": true,\n \"es2021\": true,\n },\n \"extends\": [\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\",\n },\n \"rules\": {},\n};","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個基本配置包含了一套默認推薦的配置，定義在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"eslint:recommended","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個擴展中。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"React 配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React 在默認配置的基礎上，也有一套推薦的語法配置，定義在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"plugin:react/recommended","attrs":{}}],"attrs":{}},{"type":"text","text":" 這個插件中，如果你的前端框架是 React，要定義 eslint 規範，那麼在基本配置上添加下面標記 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"+","attrs":{}}],"attrs":{}},{"type":"text","text":" 號的配置即可：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"env\": {\n \"browser\": true,\n \"es2021\": true\n },\n \"extends\": [\n \"eslint:recommended\",\n+ \"plugin:react/recommended\"\n ],\n \"parserOptions\": {\n+ \"ecmaFeatures\": {\n+ \"jsx\": true\n+ },\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\"\n },\n+ \"plugins\": [\n+ \"react\"\n+ ],\n \"rules\": {\n }\n};\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"React + TS 配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"若要 React 支持 TS，還要加一些額外配置：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"env\": {\n \"browser\": true,\n \"es2021\": true\n },\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:react/recommended\"\n+ \"plugin:@typescript-eslint/recommended\"\n ],\n+ \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"jsx\": true\n },\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\"\n },\n \"plugins\": [\n \"react\",\n+ \"@typescript-eslint\"\n ],\n \"rules\": {\n }\n};\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"代碼檢查","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面定義好規範之後，我們現在來寫一段代碼，並執行規範檢查。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新建 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"index.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，寫入內容：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const a = '13'\nfunction add() {\n return '1'\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從 js 角度講，這兩行代碼是沒問題的。然後我們運行檢查命令：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npx eslint index.js","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這時會在控制檯看到報錯：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"2:7 error 'a' is assigned a value but never used no-unused-vars\n4:10 error 'add' is defined but never used no-unused-vars\n\n2 problems (2 errors, 0 warnings)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"錯誤的意思是變量 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"a","attrs":{}}],"attrs":{}},{"type":"text","text":" 和函數 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"add","attrs":{}}],"attrs":{}},{"type":"text","text":" 已聲明但未使用，說明代碼不符合約定的規範。這種異常也很常見，在腳手架構建的項目中使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm run dev","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm start","attrs":{}}],"attrs":{}},{"type":"text","text":" 時就會執行上面的檢查命令。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"ESLint 規範","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面說過，ESLint 可以自定義檢查規範，規範定義在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 配置文件的 rules 對象下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如，定義規範，字符串必須使用雙引號：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"rules\": {\n \"quotes\": [\"error\", \"double\"]\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定義好之後，如果你的代碼中字符串使用單引號，ESLint 就會報錯。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"quotes","attrs":{}}],"attrs":{}},{"type":"text","text":" 表示引號規範，是衆多規範中的一個，它的值是一個數組。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數組第一項是錯誤級別，是以下 3 個值之一：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"\"off\" or 0","attrs":{}}],"attrs":{}},{"type":"text","text":" - 關閉規範","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"\"warn\" or 1","attrs":{}}],"attrs":{}},{"type":"text","text":" - 警告級別規範","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"\"error\" or 2","attrs":{}}],"attrs":{}},{"type":"text","text":" - 錯誤級別規範","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數組第二項纔是真正的規範，具體完整的規範參考 ","attrs":{}},{"type":"link","attrs":{"href":"https://eslint.bootcss.com/docs/rules/","title":"","type":null},"content":[{"type":"text","text":"這裏","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打開上面的網頁，打綠鉤的表示是已配置的。需要自定義直接寫在 rules 裏即可。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"神技二：Prettier","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上一步我們用 ESLint 實現了規範的制定和檢查。當開發人員完成一段代碼保存時，項目會自動執行 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"eslint","attrs":{}}],"attrs":{}},{"type":"text","text":" 檢查命令檢查代碼，檢查到異常後輸出的控制檯，待開發人員修復異常後才能繼續開發。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你配置的編碼規範比較複雜和嚴格，比如字符串必須單引號，代碼結尾必須用分號，換行必須是 2 個 tab 且不可以用空格。像這種很細的規範，大家開發過程中難免會有不符合，這個時候控制檯就會頻繁報錯，開發人員就會頻繁修復一個空格一個標點符號，時間久了異常煩人。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正因爲如此，在腳手架生成的項目中雖然默認都開啓了 ESLint，但是很多人使用不久後覺得煩人，效率低下，所以都手動關閉了 ESLint。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼，有沒有更高效的方法，讓大家非常快捷的寫出完全符合規範的代碼呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"有，它便是第二招神技：Prettier","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier 是當前最流行的代碼格式化工具，它最主要的作用就是格式化代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"什麼是格式化？上面我們用 ESLint 定製了編碼規範，當檢測到不規範的代碼，提示異常，然後需要我們開發人員按照提示手動修復不規範的地方。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而格式化的威力，是將不規範的代碼，按照規範","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"一鍵自動修復","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"聽起來很振奮人心，我們來試一下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在項目下安裝：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npm install prettier --save-dev","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後新建 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".prettierrc.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"singleQuote\": true,\n \"semi\": true\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個配置文件和上面 ESLint 下的 rules 配置作用一致，就是定義代碼規範 ——— 沒錯，Prettier 也支持定義規範，然後根據規範格式化代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"列一下 Prettier 的常用規範配置：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"singleQuote\": true, // 是否單引號\n \"semi\": false, // 聲明結尾使用分號(默認true)\n \"printWidth\": 100, // 一行的字符數，超過會換行（默認80）\n \"tabWidth\": 2, // 每個tab相當於多少個空格（默認2）\n \"useTabs\": true, // 是否使用tab進行縮進（默認false）\n \"trailingComma\": \"all\", // 多行使用拖尾逗號（默認none）\n \"bracketSpacing\": true, // 對象字面量的大括號間使用空格（默認true）\n \"jsxBracketSameLine\": false, // 多行JSX中的>放置在最後一行的結尾，而不是另起一行（默認false）\n \"arrowParens\": \"avoid\" // 只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid）\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定義好配置後，我們在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"index.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件中寫入內容：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const a = \"13\"\nfunction add() {\n return \"1\"\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後在終端運行格式化命令：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npx prettier --write index.js\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"格式化之後，再看 index.js 文件變成了這樣：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const a = '13';\nfunction add() {\n return '1';\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到變化了吧，雙引號自動變成了單引號，行結尾自動加了分號，剛好與配置文件中定義的規範一致。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜大普奔！終於不用再手動修復不規範的代碼了，一個命令就能搞定！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面是格式化一個文件，當然也支持批量格式化文件。批量格式化通過模糊匹配查找文件，比較常用，建議定義在 script 腳本中，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// package.json\n\"scripts\": {\n \"format\": \"prettier --write \\\"src/**/*.js\\\" \\\"src/**/*.ts\\\"\",\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier 還支持針對不同後綴的文件設置不同的代碼規範，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"semi\": false,\n \"overrides\": [\n {\n \"files\": \"*.test.js\",\n \"options\": {\n \"semi\": true\n }\n },\n {\n \"files\": [\"*.json\"],\n \"options\": {\n \"parser\": \"json-stringify\"\n }\n }\n ]\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"問","attrs":{}},{"type":"text","text":"：ESLint 與 Prettier 有啥區別？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相同點：都可以定義一套代碼規範。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同點：ESLint 會在檢查時對不規範的代碼提示錯誤；而 Prettier 會直接按照規範格式化代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"ESLint 和 Prettier 定義的規範要一致，不能衝突","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"神技三：VSCode","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面，我們通過 ESLint 和 Prettier 兩招神技，實現了代碼規範制定，代碼規範檢查，以及根據規範一個命令格式化代碼，使得統一團隊代碼風格變的非常容易。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，突破效率的挑戰是沒有極限的。這時候又有小夥伴發聲了：雖然是容易了，但是檢查代碼還是得依賴檢查命令，格式化代碼也得依賴格式化命令，這樣總顯得不夠優雅。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好吧，不夠優雅，那還有優雅的解決方案嗎？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"答案是有。","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"它就是我們的第三招神技 —— VSCode","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"強大的插件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VSCode 對我們前端來說都不陌生，是我們日日相伴的開發武器。當前 VSCode 幾乎統一了前端圈的編輯器，功能強大，倍受好評。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然能得到如此廣泛的認可，那麼就必然有它的優越性。VSCode 除了輕量啓動速度快，最強大的是其豐富多樣的插件，能滿足不用使用者各種各樣的需求。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在衆多插件中，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ESLint","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是非常強大的一個。沒錯，這個插件就是我們前面說到的神技第一招 ESLint 在 VSCode 上支持的同名插件。截圖如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/67/676de1241a86fa7f21d1c2017bb2c845.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安裝了這個插件之後，之前需要在終端執行 eslint 命令才能檢查出來的異常，現在直接標記在你的代碼上了！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"即使是你敲錯了一個符號，該插件也會實時的追蹤到你錯誤的地方，然後給出標記和異常提醒。這簡直大大提升了開發效率，再也不用執行命令來檢查代碼了，看誰還說不優雅。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然編輯器有 ESLint 插件，那是不是也有 Prettier 插件呢？猜對了，當然有插件，插件全名叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Prettier - Code formatter","attrs":{}}],"attrs":{}},{"type":"text","text":"，截圖如下，在 VSCode 中搜索安裝即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/feed0f29c98a0cddaf70f02d2a981c90.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier 插件安裝之後會作爲編輯器的一個格式化程序。在代碼中右鍵格式化，就可以選擇 Prettier 來格式化當前代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果要想 Prettier 實現自動化，則還需要在編輯器中配置。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"編輯器配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VSCode 中有一個用戶設置 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"setting.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，其中保存了用戶對編輯器的自定義配置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個配置非常豐富，詳見","attrs":{}},{"type":"link","attrs":{"href":"https://code.visualstudio.com/docs/getstarted/settings","title":"","type":null},"content":[{"type":"text","text":"官網","attrs":{}}]},{"type":"text","text":"。首先我們在這個配置當中將 Prettier 設置爲默認格式化程序：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設置好這一步之後，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"重點來了！","attrs":{}},{"type":"text","text":" 我們再來配置保存文件自動格式化：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"editor.formatOnSave\": true\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配好之後，神奇的事情發生了：當你寫完代碼保存的時候，發現你正在編輯的文件立刻被格式化了。也就是說，無論你的代碼按不按照規範寫，保存的時候自動幫你格式化成規範的代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一步其實是保存文件的時候自動執行了格式化命令。因爲我們上面配置了默認格式化程序爲 Prettier，現在又配了保存時格式化，相當於將文件保存和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"prettier","attrs":{}}],"attrs":{}},{"type":"text","text":" 命令連接了起來。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"到這一步，在三大神技的加持之下，我們已經實現了代碼的自動檢查與自動格式化，現在你編碼的時候不需要考慮什麼格式規範的問題，只要正常保存，編輯器會自動幫你做好這些事情。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"共享編輯器配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面我們在編輯器經過一頓配置，終於實現了自動格式化。現在我們要把這些設置同步給團隊內的其他成員，該怎麼辦，難道要一個一個再配一遍？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"別慌，不用這麼麻煩。VSCode 的設置分爲兩類：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶設置：應用於整個編輯器","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"工作區設置：應用於當前目錄/工作區","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這兩類的配置內容是一模一樣的，區別只是優先級的問題。如果你打開的項目目錄包含工作區設置，那麼這個工作區設置會覆蓋掉當前的用戶設置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以要想將設置同步給團隊內的其他成員，我們不需要去改動用戶設置，只需要在項目目錄下新建一個工作區設置即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加工作區設置方法：在項目根目錄下新建 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".vscode/setting.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，在這裏寫需要統一的編輯器配置。所以我們把上面的 Prettier 配置寫在這裏即可實現共享。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"附錄：命名和項目結構規範","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面介紹了代碼規範，代碼檢查和代碼格式化，統一代碼風格已經很全面了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在團隊開發過程當中，我們也積累了一些並不會寫在配置文件裏的規範，這些規範在一個團隊當中也是非常重要。這部分算是我們的團隊規範的分享吧。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主要說兩部分：命名規範和項目結構規範。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"命名規範","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"命名規範，文章開頭也說了，變量的四種命名規範。但是什麼地方用哪種規範，我們也是有約定的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"變量命名：下劃線 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user_id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS-Class 命名：中劃線 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"方法函數命名：小駝峯 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"userId","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JS-Class 命名：大駝峯 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"UserId","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文件夾命名：中劃線 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文件夾下組件命名：中劃線 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組件導出命名：大駝峯 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"UserId","attrs":{}}],"attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"項目結構規範","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"項目結構規範主要是指 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"src","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件夾下的結構組織。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"|-- src\n |-- index.tsx # 入口文件\n |-- assets # 靜態資源目錄\n |-- components # 公共組件目錄\n | |-- header\n | | |-- index.tsx\n | | |-- index.less\n |-- stores # 狀態管理目錄，與 pages 結構對應\n | |-- admins\n | | |-- index.tsx # 狀態文件\n | | |-- types.ts # 定義狀態類型\n | |-- index.tsx\n |-- pages # 頁面目錄，與 stores 結構對應\n | |-- admins\n | | |-- index.tsx\n | | |-- index.less\n |-- request\n | |-- index.ts # axios 實例，全局請求處理\n |-- router\n | |-- home.tsx\n | |-- index.tsx\n | |-- root.tsx\n |-- styles # 全局樣式\n | |-- common.less\n | |-- index.less\n |-- utils # 工具目錄\n |-- index.ts\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果喜歡我的文章，請點贊支持我吧！也歡迎關注我的專欄，感謝🙏🙏","attrs":{}}]}]}