一、基本設置
以下是setting.json的基本內容，可以優化vscode寫代碼體驗，設置項的意義已經注釋：
{
/*editor*/
"editor.cursorBlinking": "smooth",//使編輯器光標的閃爍平滑，有呼吸感
"editor.formatOnPaste": true,//在粘貼時格式化代碼
"editor.formatOnType": true,//敲完一行代碼自動格式化
"editor.smoothScrolling": true,//使編輯器滾動變平滑
"editor.tabCompletion": "on",//啟用Tab補全
"editor.fontFamily": "'Jetbrains Mono', '思源黑體'",//字體設置，個人喜歡Jetbrains Mono作英文字體，思源黑體作中文字體
"editor.fontLigatures": true,//啟用字體連字
"editor.detectIndentation": false,//不基於文件內容選擇縮進用制表符還是空格
/*
因為有時候VSCode的判斷是錯誤的
*/
"editor.insertSpaces": true,//敲下Tab鍵時插入4個空格而不是制表符
"editor.copyWithSyntaxHighlighting": false,//復制代碼時復制純文本而不是連語法高亮都復制了
"editor.suggest.snippetsPreventQuickSuggestions": false,//這個開不開效果好像都一樣，據說是因為一個bug，建議關掉
"editor.stickyTabStops": true,//在縮進上移動光標時四個空格一組來移動，就仿佛它們是制表符(\t)一樣
"editor.wordBasedSuggestions": false,//關閉基於文件中單詞來聯想的功能（語言自帶的聯想就夠了，開了這個會導致用vscode寫MarkDown時的中文引號異常聯想）
"editor.linkedEditing": true,//html標簽自動重命名（喜大普奔！終於不需要Auto Rename Tag插件了！）
"editor.wordWrap": "on",//在文件內容溢出vscode顯示區域時自動折行
"editor.cursorSmoothCaretAnimation": true,//讓光標移動、插入變得平滑
"editor.renderControlCharacters": true,//編輯器中顯示不可見的控制字符
"editor.renderWhitespace": "boundary",//除了兩個單詞之間用於分隔單詞的一個空格，以一個小灰點的樣子使空格可見
/*terminal*/
"terminal.integrated.defaultProfile.windows": "Command Prompt",//將終端設為cmd，個人比較喜歡cmd作為終端
"terminal.integrated.cursorBlinking": true,//終端光標閃爍
"terminal.integrated.rightClickBehavior": "default",//在終端中右鍵時顯示菜單而不是粘貼（個人喜好）
/*files*/
"files.autoGuessEncoding": true,//讓VScode自動猜源代碼文件的編碼格式
"files.autoSave": "onFocusChange",//在編輯器失去焦點時自動保存，這使自動保存近乎達到“無感知”的體驗
"files.exclude": {//隱藏一些礙眼的文件夾
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/tmp": true,
"**/node_modules": true,
"**/bower_components": true
},
"files.watcherExclude": {//不索引一些不必要索引的大文件夾以減少內存和CPU消耗
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true
},
/*workbench*/
"workbench.list.smoothScrolling": true,//使文件列表滾動變平滑
"workbench.editor.enablePreview": false,//打開文件時不是“預覽”模式，即在編輯一個文件時打開編輯另一個文件不會覆蓋當前編輯的文件而是新建一個標簽頁
"workbench.editor.wrapTabs": true,//編輯器標簽頁在空間不足時以多行顯示
"workbench.editor.untitled.hint": "hidden",//隱藏新建無標題文件時的“選擇語言？”提示（個人喜好，可以刪掉此行然后Ctrl+N打開無標題新文件看看不hidden的效果）
/*explorer*/
"explorer.confirmDelete": false,//刪除文件時不彈出確認彈窗（因為很煩）
"explorer.confirmDragAndDrop": false,//往左邊文件資源管理器拖動東西來移動/復制時不顯示確認窗口（因為很煩）
/*search*/
"search.followSymlinks": false,//據說可以減少vscode的CPU和內存占用
/*window*/
"window.menuBarVisibility": "visible",//在全屏模式下仍然顯示窗口頂部菜單（沒有菜單很難受）
"window.dialogStyle": "custom",//使用更具有VSCode的UI風格的彈窗提示（更美觀）
/*debug*/
"debug.internalConsoleOptions": "openOnSessionStart",//每次調試都打開調試控制台，方便調試
"debug.showBreakpointsInOverviewRuler": true,//在滾動條標尺上顯示斷點的位置，便於查找斷點的位置
"debug.toolBarLocation": "docked",//固定調試時工具條的位置，防止遮擋代碼內容（個人喜好）
"debug.saveBeforeStart": "nonUntitledEditorsInActiveGroup",//在啟動調試會話前保存除了無標題文檔以外的文檔（畢竟你創建了無標題文檔就說明你根本沒有想保存它的意思（至少我是這樣的。））
"debug.onTaskErrors": "showErrors",//預啟動任務出錯后顯示錯誤，並不啟動調試
/*html*/
"html.format.indentHandlebars": true//在寫包含形如{{xxx}}的標簽的html文檔時，也對標簽進行縮進（更美觀）
}
好用的插件及其相關設置
以下列出了一些好用的插件及其相關設置，按使用情景分類。
自行選擇需要的安裝。
二、通用
1、Chinese (Simplified) Language Pack for Visual Studio Code：必不可少的中文插件
漢化你的vscode！讓界面、設置等都變成中文！
配置
無需配置，即裝即用，記得裝完后重啟vscode。
2、駝峰翻譯助手：不再讓取變量名成為一件難事
英文不好 寫代碼起變量名時候 你是否一直這樣干?
打開翻譯軟件
輸入中文
復制翻譯結果
粘貼英文之后修改命名格式（比如小駝峰、大駝峰）
現在你只需要按動圖這樣來就可以了：
選中輸入按快捷鍵一鍵得到翻譯結果(悄悄告訴你 直接選擇英文文本還可以跳過翻譯快速改變命名格式)
選擇你喜歡的命名格式（比如小駝峰、大駝峰）
快捷鍵
win: "Alt+shift+t" mac": "cmd+shift+t"
3、Error Lens：在行內突出顯示代碼ERROR/WARNING
配置
在settings.json中加入如下內容作為配置，設置項的意義已經注釋：
"errorLens.gutterIconsEnabled": true,//在行號的左邊顯示小錯誤圖標（個人喜好） "errorLens.fontStyleItalic": true//使錯誤信息的字體為斜體（個人喜好）
5、Bracket Pair Colorizer 2：美觀的彩虹括號，讓你不再為繁雜的括號煩惱
使用前：
使用后：
配置
無需配置，即裝即用，記得裝完后重啟vscode。
6、Code Runner：以最簡潔的方式運行任何代碼
不需要繁瑣的“調試”配置，Code Runner可以快速地以最簡潔的方式運行你的任何代碼！
支持超過40種語言！
一鍵運行
安裝好Code Runner插件之后，打開你所要運行的文件，有多種方式來快捷地運行你的代碼：
鍵盤快捷鍵 Ctrl+Alt+N
快捷鍵 F1 或 Ctrl+Shift+P 調出 命令面板, 然后輸入 Run Code
在編輯區右鍵選擇 Run Code
在側邊欄文件管理器中右鍵你要運行的文件，選擇 Run Code
右上角的運行小三角按鈕
這么多運行代碼的方式，夠便捷不？
停止運行
如果要停止代碼運行，也有如下幾種方式：
鍵盤快捷鍵 Ctrl+Alt+M
快捷鍵 F1 或 Ctrl+Shift+P 調出 命令面板, 然后輸入 Stop Code Run
配置
想要舒服的使用 Code Runner 插件，你需要進行一些配置。
提示：
事實上，通過控制台輸入命令的方式能運行大部分代碼，而Code Runner的原理就是幫你在控制台輸入這些命令。
因此，Code Runner並不能提供運行你的代碼所需的環境或編譯器，你仍需要下載安裝這些環境或編譯器。
在settings.json中加入如下內容作為配置，設置項的意義已經注釋：
"code-runner.runInTerminal": true,//在控制台運行代碼，防止亂碼和不能輸入
"code-runner.executorMap": {
"javascript": " cls && cd /d $dir && node $fullFileName && pause",
"python": " cls && cd /d $dir && \"$pythonPath\" -u $fullFileName && pause",
"bat": " cls && cd /d $dir && $fullFileName"
/*這是每種語言運行時所執行命令的對應表，因為筆者使用的語言有限，這里只列出了javascript、python和windows批處理的命令，其他語言的命令可自行添加*/
/*筆者其他博客中可能會有關於對此設置項的添加或刪改的內容*/
},
"code-runner.saveFileBeforeRun": true, //運行前自動保存
"code-runner.customCommand": " cls",//這使Ctrl+Alt+K這個快捷鍵可以快速清空控制台內容
"code-runner.respectShebang": false//我是Windows系統所以不需要按shebang來運行
"code-runner.ignoreSelection": true,//禁用“運行選中部分的代碼”功能（個人喜好，感覺這個功能很雞肋）
//需要注意的是，所有命令前都有一個空格，用來“喂給”上一次運行結尾的“請按任意鍵繼續. . .”
運行效果
運行python：
運行javascript：
運行windows批處理：
7、VS Code Counter：統計代碼行數
統計你的項目中有多少行代碼！以及各語言的占比！
用法
快捷鍵 F1 或 Ctrl+Shift+P 調出 命令面板, 然后輸入 Count lines in directory 以開始統計。
統計完成會生成一個.VSCodeCounter 文件夾，並自動打開里面的報告：
例如：
三、前端開發
1、CSS Navigation：快速跳轉到CSS的類定義
由於未知原因，筆者電腦上CSS Peek插件有時不起作用，遂采用更穩定的CSS Navigation作為替代品。
按住Ctrl鍵，鼠標移到html中的CSS類名上，可懸浮預覽該類的CSS定義，此時按下鼠標左鍵，快速跳轉到CSS定義處。
效果
缺點
不能懸浮預覽和跳轉到html文件內<style>標簽內的CSS類定義，只能懸浮預覽和跳轉到外部.css文件的CSS類定義處。
配置
無需配置，即裝即用，記得裝完后重啟vscode。
2、css-auto-prefix：寫CSS時不再為瀏覽器前綴發愁
自動補全不同瀏覽器的CSS3前綴。
效果
配置
無需配置，即裝即用，記得裝完后重啟vscode。
2、Image Preview：快速預覽HTML中的圖片
功能
當鼠標移到html文檔中的圖片路徑上時，懸浮預覽圖片，還可跳轉到側邊欄文件管理器中或系統文件管理器中
效果
配置
安裝這個插件后默認還會在行號左邊顯示圖片縮略圖：
筆者不太喜歡，所以通過在setting.json中添加如下配置關掉了這個功能：
"gutterpreview.showImagePreviewOnGutter": false
3、IntelliSense for CSS class names in HTML：自動補全CSS類名
自動補全CSS類名。
效果
配置
無需配置，即裝即用，記得裝完后重啟vscode。
4、JS-CSS-HTML Formatter：格式化js、css、html文件
用於格式化js、css、html文件（其實主要是用來格式css文件，因為前兩者vscode有內置格式化引擎）
配置
需要在setting.json中加入如下內容作為配置：
"[html]": {
"editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
},
"[javascript]": {
"editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
}
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
用於把 html和 js的格式化也交給這個插件負責的同時不要把json的格式化交給它負責。
5、Live Server：實時地使用瀏覽器預覽你的前端頁面
還在瀏覽器里頻繁地刷新來預覽前端頁面？忍受不了寫一會代碼就要刷新一下來預覽頁面？試試Live Server！
用法
在側邊欄 文件資源管理器 中右鍵 文件 選擇 Open with Live Server 啟動：
或打開編輯 html 文件時點擊 vscode下方 狀態欄右邊 的 Go Live 啟動：
此時Live Server啟動了一個服務器來實現實時預覽前端頁面。
保存文件時瀏覽器便會實時更新頁面。
效果
停止
快捷鍵 F1 或 Ctrl+Shift+P 調出 命令面板, 然后輸入 Stop Live Server 以 停止Live Server服務器。
也可以點擊vscode下方狀態欄右邊的圖標停止Live Server服務器。
注意：關閉瀏覽器並不會停止Live Server服務器，但關閉vscode可以停止Live Server服務器。
配置
默認使用系統默認瀏覽器訪問服務器，通過在setting.json中添加如下配置可以改變訪問服務器所用的瀏覽器：
"liveServer.settings.CustomBrowser": 瀏覽器名
瀏覽器名 的取值如下（默認為null）：
6、open in browser：從vscode打開瀏覽器以預覽前端頁面
在vscode中打開瀏覽器以預覽前端頁面
用法
在側邊欄文件資源管理器中右鍵html文件 選擇 Open In Default Browser 從瀏覽器打開以預覽頁面：
如果要在其他瀏覽器打開可以選擇Open In Other Browsers。
配置
無需配置，即裝即用，記得裝完后重啟vscode。
7、Path Intellisense：智能補全路徑
智能補全html文件中的文件路徑。
效果
配置
無需配置，即裝即用，記得裝完后重啟vscode。
四、摸魚
1、epub reader：摸魚必備！vscode看小說！支持epub！
功能
支持字體大小，字體顏色自定義
閱讀進度顯示以及自動記錄
支持目錄跳轉
書架編輯
添加書本
在C:\Users\你的用戶名\.vscode\extensions\renkun.reader-1.1.6\book路徑下增刪書本文件（須為.epub文件類型）
用法
按Ctrl+3進入小說閱讀界面，鼠標移到書本目錄下方可自定義字體大小顏色（記得點save哦）。
點擊要閱讀的書本，進入后左右有按鈕可翻頁，鼠標移到小說閱讀界面上方可返回或進行章節跳轉。
2、Markdown All in One：書寫Markdown利器
從”All in One“的名字可以看出該插件含有很多功能，可以增強Markdown寫作體驗。
具體有哪些功能，大家可以自己探索，筆者不多介紹了。
配置
無需配置，即裝即用，記得裝完后重啟vscode。
五、主題
筆者所用的主題叫做Gruvbox Material Dark。
由該插件提供：
看起來像這樣：
配置
下載安裝該插件后須在setting.json中加入如下內容作為配置，設置項的意義已經注釋：
"gruvboxMaterial.italicKeywords": true,//關鍵字為斜體 "gruvboxMaterial.darkContrast": "hard"//加深對比度（默認的太淺了）