代碼風格統一之代碼自動格式化

目標

• 保存時自動格式化
• 保存時不能自動格式化，使其自動格式化

注意事項

• 項目是使用 npm 或 yarn
• 能夠本身配置 ESLint 實現代碼風格統一

安裝 ESLint

安裝ESLint

npm i eslint
# or
npm i -S eslint // --save    寫入到 dependencies 對象，僅在當前項目安裝並使用
# or
npm i -D eslint // --save-dev   寫入到 devDependencies 對象，僅在當前項目安裝並在 dev 環境使用

配置

ESlint 有兩部分須要配置，一部分是項目的配置文件，一部分是 vscode 的配置

配置 vscode 實現保存自動格式化代碼風格

在安裝好 vscode 的 ESlint 插件後，按 Ctrl + ，打開 vscode 的設置，而後找到擴展點擊，找到 ESlint 勾選 Auto Fix On Save

配置 package.js 實現統一格式化代碼風格

在配置好上邊後，可能會遇到開發同伴沒有用 vscode 或者在保存時可能沒能自動格式化，這種狀況能夠在 package.js 中添加一條腳本命令

// 使用 ESlint 修復(--fix) 檢查(--ext) 後綴爲 .js 的文件 路徑是當前目錄
"lint": "eslint --fix --ext .js ."

這樣只須要在命令行運行 npm run lint 就能夠自動格式化代碼，有報錯的話須要本身手動修復，通常是寫錯了字符或者邏輯錯誤