聊聊vscode配置settings.json知其所以然（附大量配置）

vscode 的配置 settings.json 是一個老生常談的話題，隨著時間的流逝我們可能會很高頻的改動他，但我們應(yīng)該極力避免一個問題：

?? 配了某項但是不知道他的作用 ??

其實就是一個 知其所以然 的問題。

籍此話題，本文將細(xì)致的分析我的 settings.json ，希冀可以給讀者帶來一些幫助。

以下部分插件的配置來自于：

《 前端web開發(fā)高效vscode插件分享（辯證的海量實戰(zhàn)檢驗）》

中提到過的插件。

使用 vscode 這里強烈建議開啟自動保存，因為閃電編碼容不得手動 save ，同時要具備一遍成功的 code style 。

對于字號，通常屏幕推薦使用 13 碼，不會特別大，展示信息量也足夠。

字體推薦方面，英文推薦使用 JB 全家桶的官方 JetBrains Mono 系列的非連體字體，也就是 JetBrains Mono NL ，你可以在 jetbrains mono 下載并全部安裝該字體，即可馬上使用。對于逆天的隔離開發(fā)場景，請參考下文進(jìn)行配置字體：

《 vscode 不安裝字體使用本地/網(wǎng)絡(luò)字體文件更改字體方法（沒有管理員權(quán)限）》

中文方面推薦使用 等線 ，該字體對 中/日 文字均可以提供一個很平滑的體感，不會有棱角情況。

早期 vscode 的 settings 推薦使用 Settings Sync 插件同步到 github gist 上，雖然后期 ms 收購 github 后有財力支持了 vscode 內(nèi)同步，但并不是很好用，其次盡量不要做單點容災(zāi)。

為了保證足夠的安全，我還是常用 Settings Sync 做手動 sync 容災(zāi)的（如上所示，關(guān)閉了自動上傳和下載，全部手動使用 cmd + shift + p 選擇 Sync: 更新/上傳配置 命令進(jìn)行手動同步）。

如果要使用，安裝該插件后，根據(jù)提示同意授權(quán) github gist 訪問即可。

這里就不做贅述，我們的策略是：

recentlyUsedByPrefix ：按使用過的 prefix 前綴優(yōu)先匹配，方便選擇我們的慣用項。

automaticallyOverrodeDefaultValue ：自動覆蓋提示的優(yōu)先默認(rèn)值，也是為了保持慣用優(yōu)先。

vscode 的默認(rèn)策略是 新窗口默認(rèn)覆蓋當(dāng)前窗口 + 默認(rèn)預(yù)覽狀態(tài)打開文件 ，這會造成在多文件間切換修改不便，使用雙擊打開不符合慣用習(xí)慣等問題。

所以我們通過 newUntitledFile 持續(xù)保持新開文件一定是一個獨立的新窗口，搭配 enablePreview: false 取消預(yù)覽模式，保證編輯模式穩(wěn)定。

我喜歡使用的 文件/文件夾 icons 圖標(biāo)是 Material Icon Theme ，這一款插件內(nèi)置大量的圖標(biāo)，而且涵蓋了超多工具（如 commitlint / lerna 等）的配置文件 icon，使用起來特別舒爽。

默認(rèn)情況下，vscode 和 github 保持一致，即當(dāng)一個文件夾下只有一個文件夾時，會略過中間部分的文件夾，將顯示縮略為一行（這在 java 等面向?qū)ο蟮奈募哟谓Y(jié)構(gòu)中格外有用），但對于 FE 場景，不太需要省略，縮略反而會影響項目架構(gòu)的布局，所以這里建議將文件夾縮略關(guān)閉。

這是一個老生常談的經(jīng)典問題，首先我們明確兩個點：

linux / mac / win 上的文件結(jié)尾符不一樣

Git 對于不同的結(jié)尾符，在不同平臺上可能會引發(fā)不一致問題

通常情況下，我們會使用工作區(qū)格式 .editorconfig 搭配 EditorConfig for VS Code 插件解這個問題，統(tǒng)一將其指定為 linux 結(jié)尾符 lf ：

但對于沒配置 .editorconfig 的工作區(qū)我們束手無策，所以我們要從根本上解決該問題，最好的辦法即從 vscode 上就鎖死 lf 結(jié)尾。

開啟智能 commit，這對于使用 scm gui 面板大有幫助，可以幫助我們在沒 add 到暫存區(qū)時，使用 cmd + enter 即自動 add 并 commit 所有 change 。

注：如果你不是 vscode 可視化 Git gui 使用者，無需配置該項，但建議簡單作都使用 vscode 原生 gui，這在 check change 時格外方便，且可以十分靈活的應(yīng)對大部分基本場景（ push / merge 等）

關(guān)閉 vscode 自動更新提示，我們定期手動升級即可，注意全面的了解 changelog 以便即時享用新特性。

靈活的開發(fā)并不需要刪除二次確認(rèn)，因為我們希望絲滑無縫作，同時你也可以使用 cmd + z 撤銷掉刪除行為。

通過 code runner 插件來使得每次打開終端都在當(dāng)前選中的文件夾位置，這需要一些配置，詳見：

《 vscode 快捷鍵快速打開終端到當(dāng)前目錄打開的文件位置 》

對于 vscode 插件行為，我們進(jìn)行幾個配置：

關(guān)閉 vscode 推薦插件的行為。作為成熟的開發(fā)者應(yīng)該理解自己在做什么，知道自己需要什么、不需要什么，所以我們不需要 “初級” 的提示。

只有已啟用的插件才開啟自動 update 更新功能，防止禁用的插件還在后臺更新浪費資源。

翻譯插件的選擇上，這里推薦同時使用三款，詳見：

《 vscode 翻譯插件最佳搭配、翻譯變量、劃詞翻譯、中譯英（提高生產(chǎn)效率） 》

同時，我們進(jìn)行如下配置：

googleTranslateExt.replaceText ：打開翻譯替換，使得 Google Translate 插件可以將我們的中文選區(qū)覆蓋為英文。（當(dāng)然，我更推薦 deepl 的翻譯）

commentTranslate.targetLanguage ：指定 Comment Translate 插件的翻譯語言對象為中文，方便我們 hover 查看注釋的中文翻譯。

varTranslation.translationEngine ：指定 駝峰翻譯助手 的翻譯 api 走 google ，根據(jù)你的網(wǎng)絡(luò)情況，建議選擇自己網(wǎng)絡(luò)最好的翻譯來源（當(dāng)然翻譯質(zhì)量也大不相同）。

早期百花齊放，我們還需要 Beautify / Beautify css 等插件根據(jù)不同文件配置不同的格式化器，但當(dāng)下 prettier 已發(fā)展的十分成熟，prettier 支持的文件格式就使用 prettier 進(jìn)行最佳實踐的格式化，所以我們配置默認(rèn)的格式化行為使用 prettier 即可，這可以幫我們省去很多針對不同文件的格式化配置。

需要注意的是，prettier 默認(rèn)配置并非全部都為最佳實踐，這里推薦將全局默認(rèn)行為也配置上，這樣在任意文件都可以享受到最佳的格式化行為。

對于 eslint 的配置都需要安裝 eslint 的插件（ ESLint ），然后將 cmd + s 保存自動修復(fù)打開即可（ source.fixAll.eslint ），方便我們隨時手動格式化代碼。

同時在 monorepo 場景，eslint 插件往往會在頂層尋找 eslintrc 配置文件，忽略了單 project 的文件夾 eslint 配置，所以我們需要打開 auto 自動識別模式，來更好的應(yīng)對 monorepo 場景。

在 vue 2 系開發(fā)時，使用 vetur 進(jìn)行支持，為了防止 template 解析報錯，我們需要關(guān)掉對應(yīng)的校驗行為，這也是老生常談。

根據(jù)情況，你可能還需要關(guān)掉 script 區(qū)的校驗行為。

預(yù)覽 svg 時直接查看源碼，而不是預(yù)覽圖像，這方便于我們進(jìn)行修改顏色等行為。

在預(yù)覽時，建議你使用一款插件來支持 svg preview 。

經(jīng)常需要本地起 server 時，往往會用到 Live Server 插件，該插件在啟動 server 后會有一個啟動 port 的提示，每次都需要手動關(guān)掉，對于經(jīng)常使用該插件的開發(fā)者，可以省略這一步浪費時間的行為。

vscode 的 diff 行為默認(rèn)會忽略尾部空字符，為了更精準(zhǔn)的控制文件尾，我們需要更加敏感，所以關(guān)閉忽略行為。

由于 vscode 自 v1.60 開始原生支持彩色括號和導(dǎo)軌，且性能極好，我們從 Bracket-Pair-Colorizer 插件遷出，詳見：

《 vscode1.60 原生高性能括號著色無縫遷移方案（等價Bracket-Pair-Colorizer） 》

《 vscode1.62 原生代碼塊邊緣導(dǎo)軌著色與Bracket Pair Colorizer的對標(biāo)和差異化（附配置） 》

我非常喜歡的一款 無紅色 暗色主題 Dracula Official 。

vscode v1.63 對 jsx 屬性的自動補全括號行為更加智能化了，詳見 JSX attribute completions 。

使用 Tabnine 或 github copilot 等自動補全插件都需要開啟的選項。

為了真正做到 “知其所以然” ，而不是單純的復(fù)制粘貼，本文不會給出大全套的配置合集，加上習(xí)慣的不同，請各位讀者自行各取所需。