通過 .vscode/settings.json 無感知控制成員的 vscode 表現通過在專案根目錄下新增 .vscode/setings.json 檔案，可以做到專案成員的 vscode 表現一致。常見的需求有儲存檔案自動 fix，儲存自動格式化程式碼等。為了尊重成員的個性化需求，不要對主題、字型等做控制。
.vscode/settings.json
{
// 避免非 ts 的 vue 專案提示 n 多紅線提示 Property ‘xxx‘ does not exist on type
"vetur.validation.interpolation": false,
// 檔案儲存時自動格式化
"editor.formatOnSave": true,
// 可選，檔案自動儲存
"files.autoSave": "afterDelay",
// eslint規則對以下幾種字尾檔案生效. 預設為["javascript", "javascriptreact"]
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
"stylelint.validate": ["css", "scss", "less", "acss"],
// 檔案儲存時自動修復 eslint 與stylelint 中可修復的問題
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
// "source.fixAll.markdownlint": true
},
// 語言預設格式化規則
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}原理：專案級配置優先順序高於 vscode 編輯器的配置。
結合 .vscode/extensions.json 一起配置效果更好?
前端程式碼規範 vscode 篇基本上介紹完了，接下來筆者會開始卷 eslint 了。