五種方法助你打造一個令本身驚豔的vscode

工欲善其事必先利其器，vscode做爲咱們經常使用的編輯器，只有將其整好看了，工做才能舒心，效率才能倍增。接下來我將介紹五種自定義 vscode 的方法，讓它看起來像你的女神同樣使人賞心悅目。git

主題

強烈推薦 cobalt2 主題，做者是名聲大噪的 Wes Bos，該主題的主色調是藍色和黃色，快嘗試吧。程序員

如下是該主題推薦的編輯器配置：github

// setting.json
{
  "workbench.colorTheme": "Cobalt2",
  // The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 17,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "prettier.eslintIntegration": true,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
  "editor.renderWhitespace": "all",
}
複製代碼

配置完個人編輯器是這樣的：npm

字體

推薦使用 Fira Code，它是等寬字體，被譽爲最適合程序員用的字體，誰用誰知道。json

點擊上面連接，找到圖中按鈕下載 Fira Code 字體包：markdown

加壓後，進入 TTF 文件夾，選中全部文件，而後右鍵打開，選擇安裝字體。electron

而後打開 setting.json，加入以下配置：編輯器

{
     "editor.fontFamily": "Fira Code",
     "editor.fontLigatures": true
}
複製代碼

配置成功後能夠看到以下效果：oop

插件

如下列出了我經常使用的 vscode 插件，你們能夠按需安裝。字體

Auto Close Tag
Auto Import
Auto Rename Tag
Bookmarks
Color Picker
CSS Peek
Debug Visualizer
Docker
Document This
Git Blame
Git History
Git Project Manager
GitLens
LeetCode
Markdown Preview Enhanced
MDX
Node.js Modules Intellisense
npm
npm Intellisense
Path Intellinsense
Prettier
Project Manager
Settings Sync
TODO Highlight
Typescript Hero
VSCode Advanced New File

vscode 基本配置

點擊左下角的小齒輪，或者快捷鍵 cmd + ,，能夠打開 vscode 的配置界面。

vscode 是使用 electron 進行構建的，因此對它的配置修改均可以實時地看到效果，我很是喜歡。

去掉忽略文件

vscode 默認會隱藏 .git 文件，我想完整地看到當前項目的全部文件，因此我把 exclude 配置項都清空了。

自定義title

搜索 title，將配置項改爲 ${dirty} ${activeEditorMedium}${separator}${rootName}，能夠查看當前打開文件的項目及目錄信息，以及文件保存狀態。

自定義快捷鍵

VSCode Advanced New File 插件用於快速地建立一個新文件，沒必要使用鼠標點擊在哪一個文件夾下建立，vscode 建立新文件默認的快捷鍵是 cmd + N，而該插件的快捷鍵是 cmd + ctrl + N，我想將兩個快捷鍵反過來，接下來介紹如何自定義快捷鍵。

鍵入 cmd + K + S 進入快捷鍵配置界面，搜索 new file，點擊某一項的編輯按鈕便可編輯，如下是自定義後的快捷鍵：

最後

當完成了這些配置後，當咱們換一臺電腦時，不會還得從新配置吧？放心，Settings Sync 插件能夠幫助咱們同步現有的 vscode 配置。

首先確保你已經安裝了它，鍵入 cmd + shift + P打開控制面板，找到 Sync: Update/Upload Settings，回車後就將咱們的配置上傳了（固然你須要先進行配置，這裏就不演示了）。

在新的電腦想同步該配置，一樣安裝該插件，而後選擇 Sync: Download Settings，等待同步完成就能夠啦。