萬字長文！打造最順手的vscode！

不多廢話，開整！

基本設定

以下是setting.json的基本內容，可以優化vscode寫代碼體驗，設定項的意義已經注釋：

{
    "editor.cursorBlinking": "smooth", //使編輯器游標的閃爍平滑，有呼吸感
    "editor.formatOnPaste": true, //在粘貼時格式化代碼
    "editor.formatOnType": true, //敲完一行代碼自動格式化
    "editor.smoothScrolling": true, //使編輯器滾動變平滑
    "editor.tabCompletion": "on", //啟用Tab補全
    "files.autoGuessEncoding": true, //讓VScode自動猜源代碼檔案的編碼格式
    "workbench.list.smoothScrolling": true, //使檔案串列滾動變平滑
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", //將終端設為cmd，個人比較喜歡cmd作為終端
    "files.autoSave": "onFocusChange", //在編輯器失去焦點時自動保存，這使自動保存近乎達到“無感知”的體驗
    "explorer.confirmDelete": false, //洗掉檔案時不彈出確認彈窗（因為很煩）
    "editor.fontFamily": "'Jetbrains Mono', '微軟雅黑', monospace", //字體設定，個人喜歡Jetbrains Mono作英文字體，微軟雅黑作中文字體
    "editor.fontLigatures": true,//啟用字體連字
    "terminal.integrated.cursorBlinking": true, //終端游標閃爍
    "editor.detectIndentation": false, //不基于檔案內容選擇縮進用制表符還是空格
    "debug.onTaskErrors": "showErrors", //預啟動任務出錯后顯示錯誤，并不啟動除錯
    "explorer.confirmDragAndDrop": false, //往左邊檔案資源管理器拖動東西來移動/復制時不顯示確認視窗（因為很煩）
    "editor.insertSpaces": true, //敲下Tab鍵時插入空格而不是制表符
    "search.followSymlinks": false, //據說可以減少vscode的CPU和記憶體占用
    "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
    },
    "editor.copyWithSyntaxHighlighting": false, //復制時復制純文本而不是連語法高亮都復制了
    /********/
    "editor.renderWhitespace": "boundary", //除了兩個單詞之間用于分隔單詞的一個空格，以一個小灰點的樣子使空格可見
    "editor.suggestSelection": "first", //代碼自動補全時選中第一個，方便記憶位置而且不會導致某些建議消失
    "editor.suggest.snippetsPreventQuickSuggestions": false, //這個開不開效果好像都一樣，據說是因為一個bug，建議關掉
    "terminal.integrated.rightClickBehavior": "default", //在終端中右鍵時顯示選單而不是粘貼（個人喜好）
    "editor.cursorSmoothCaretAnimation": true, //讓游標移動、插入變得平滑
    "editor.renderControlCharacters": true, //編輯器中顯示不可見的控制字符
    "debug.internalConsoleOptions": "openOnSessionStart",//每次除錯都打開除錯控制臺，方便除錯
    "debug.showBreakpointsInOverviewRuler": true,//在滾動條標尺上顯示斷點的位置，便于查找斷點的位置
    "debug.toolBarLocation": "docked",//固定除錯時工具條的位置，防止遮擋代碼內容
    "workbench.editor.wrapTabs": true,//編輯器標簽頁在空間不足時以多行顯示
    "workbench.editor.decorations.colors": true,//在標簽頁上以顏色強調標簽頁的狀態（例如有問題或有警告）
    "workbench.editor.decorations.badges": true,//在標簽頁上以小徽章強調標簽頁的狀態（例如git未提交更改）
    "workbench.editor.enablePreview": false,//打開檔案時不是“預覽”模式，即在編輯一個檔案時打開編輯另一個檔案不會覆寫當前編輯的檔案而是新建一個標簽頁
    "editor.stickyTabStops": true,//在縮進上移動游標時四個空格一組來移動，就仿佛它們是制表符(\t)一樣
    "editor.wordBasedSuggestions": false,//關倍訓于檔案中單詞來聯想的功能（語言自帶的聯想就夠了，開了這個會導致用vscode寫MarkDown時的例外聯想）
    "editor.linkedEditing": true,//html標簽自動重命名（喜大普奔！終于不需要Auto Rename Tag插件了！）
    "html.format.indentHandlebars": true//在寫包含形如{{xxx}}的標簽的html檔案時，也對標簽進行縮進（更美觀）
}

好用的插件及其相關設定

以下列出了一些好用的插件及其相關設定，按使用情景分類：

通用

駝峰翻譯助手：不再讓取變數名成為一件難事

英文不好 寫代碼起變數名時候 你是否一直這樣干?

• 打開翻譯軟體
• 輸入中文
• 復制翻譯結果
• 粘貼英文之后修改命名格式（比如小駝峰、大駝峰）

現在你只需要按動圖這樣來就可以了：

• 選中輸入按快捷鍵一鍵得到翻譯結果(悄悄告訴你 直接選中英文還可以跳過翻譯哦 快速改變命名格式)
• 選擇你喜歡的命名格式（比如小駝峰、大駝峰）

快捷鍵

win: "Alt+shift+t" 
mac": "cmd+shift+t"

Bracket Pair Colorizer 2：美觀的彩虹括號，讓你不再為繁雜的括號煩惱

使用前：

使用后：

配置

無需配置，即裝即用，記得裝完后重啟vscode，

Chinese (Simplified) Language Pack for Visual Studio Code：必不可少的中文插件

漢化你的vscode！讓界面、設定等都變成中文！

配置

無需配置，即裝即用，記得裝完后重啟vscode，

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 \"$fileName\" && pause",
    "python": " cls && cd /d $dir && python -u \"$fileName\" && pause",
    "bat": " cls && cd /d $dir && cmd /c \"$fileName\""
    /*這是每種語言運行時所執行命令的對應表，因為筆者使用的語言有限，這里只列出了javascript、python和windows批處理的命令，其他語言的命令可自行添加*/
    /*筆者其他博客中可能會有關于對此設定項的添加或刪改的內容*/
},
"code-runner.saveFileBeforeRun": true, //運行前自動保存
"code-runner.customCommand": " cls",//這使Ctrl+Alt+K這個快捷鍵可以快速清空控制臺內容
"code-runner.clearPreviousOutput": true,//似乎沒啥用，好像是自動清除控制臺多余內容，開著吧
"code-runner.respectShebang": false//我是Windows系統所以不需要按shebang來運行
//需要注意的是，所有命令前都有一個空格，用來“喂給”上一次運行結尾的“請按任意鍵繼續. . .”

運行效果

運行python：

運行javascript：

運行windows批處理：

Polacode-2020：分享更漂亮的代碼片段

生成更好看的代碼片段圖片來分享給你的朋友或同事，

用法

快捷鍵F1或Ctrl+Shift+P調出 命令面板, 然后輸入Polacode以打開Polacode面板，

打開面板后在左側編輯器選中一段代碼，右側的Polacode面板便會呈現出好看的代碼片段，
點擊以保存代碼片段，

還可以在Polacode面板上配置陰影和邊框及其顏色，

配置

無需配置，即裝即用，記得裝完后重啟vscode，

TODO Highlight：高亮你的TODO

高亮你的TODO注釋，

使用前

使用后

配置

無需配置，即裝即用，記得裝完后重啟vscode，

VS Code Counter：統計代碼行數

統計你的專案中有多少行代碼！以及各語言的占比！

用法

快捷鍵F1或Ctrl+Shift+P調出 命令面板, 然后輸入Count lines in directory以開始統計，

統計完成會生成一個.VSCodeCounter檔案夾，并自動打開里面的報告：

例如：

前端開發

CSS Navigation：快速跳轉到CSS的類定義

由于未知原因，筆者電腦上CSS Peek插件有時不起作用，遂采用更穩定的CSS Navigation作為替代品，

按住Ctrl鍵，滑鼠移到html中的CSS類名上，可懸浮預覽該類的CSS定義，此時按下滑鼠左鍵，快速跳轉到CSS定義處，

效果

缺點

不能懸浮預覽和跳轉到html檔案內<style>標簽內的CSS類定義，只能懸浮預覽和跳轉到外部.css檔案的CSS類定義處，

配置

無需配置，即裝即用，記得裝完后重啟vscode，

css-auto-prefix：寫CSS時不再為瀏覽器前綴發愁

自動補全不同瀏覽器的CSS3前綴，

效果

配置

無需配置，即裝即用，記得裝完后重啟vscode，

Image Preview：快速預覽HTML中的圖片

功能

當滑鼠移到html檔案中的圖片路徑上時，懸浮預覽圖片，還可跳轉到側邊欄檔案管理器中或系統檔案管理器中

效果

配置

安裝這個插件后默認還會在行號左邊顯示圖片縮略圖：

筆者不太喜歡，所以通過在setting.json中添加如下配置關掉了這個功能：

"gutterpreview.showImagePreviewOnGutter": false

IntelliSense for CSS class names in HTML：自動補全CSS類名

自動補全CSS類名，

效果

配置

無需配置，即裝即用，記得裝完后重啟vscode，

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"
}

用于把 html和 js的格式化也交給這個插件負責

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）：

open in browser：從vscode打開瀏覽器以預覽前端頁面

在vscode中打開瀏覽器以預覽前端頁面

用法

在側邊欄檔案資源管理器中右鍵html檔案選擇Open In Default Browser從瀏覽器打開以預覽頁面：

如果要在其他瀏覽器打開可以選擇Open In Other Browsers，

配置

無需配置，即裝即用，記得裝完后重啟vscode，

Path Intellisense：智能補全路徑

智能補全html檔案中的檔案路徑，

效果

配置

無需配置，即裝即用，記得裝完后重啟vscode，

摸魚

epub reader：摸魚必備！vscode看小說！支持epub！

功能

• 支持字體大小，字體顏色自定義
• 閱讀進度顯示以及自動記錄
• 支持目錄跳轉
• 書架編輯

添加書本

在C:\Users\你的用戶名\.vscode\extensions\renkun.reader-1.1.6\book路徑下增刪書本檔案（須為.epub檔案型別）

用法

按Ctrl+3進入小說閱讀界面，滑鼠移到書本目錄下方可自定義字體大小顏色（記得點save哦），

點擊要閱讀的書本，進入后左右有按鈕可翻頁，滑鼠移到小說閱讀界面上方可回傳或進行章節跳轉，

寫作

中文引號修正：解決寫作時的小毛病

用于自動修正中文檔案里的雙引號，在用vscode寫作時格外有用，

它假設 “ 和 ” 應當依次輪流出現，比如如下這段

”你聽說過Lisa嗎？”

“沒有欸“我說道，”她是不是那個勇者的母親？“

會被修正為

“你聽說過Lisa嗎？”

“沒有欸”我說道，“她是不是那個勇者的母親？”

用法

有兩種用法：

1. 選中一部分檔案內容 -> Ctrl+Shift+P調出命令面板 -> 輸入Smart Quote， 然后回車，這個是只修正選中部分，
2. 什么都不選，直接Ctrl+Shift+P調出命令面板 -> 輸入 Smart Quote， 然后回車，這個是全部修正，

已知問題

目前無法處理多個不連續選擇的情況，

目前無法修正單引號，

Markdown All in One：書寫Markdown利器

從”All in One“的名字可以看出該插件含有很多功能，可以增強Markdown寫作體驗，

具體有哪些功能，大家可以自己探索，筆者不多介紹了，

配置

無需配置，即裝即用，記得裝完后重啟vscode，

Word Count CJK：寫作必備的字數統計插件

大部分字數統計插件都不能統計中文的字數，而這個插件可以，

在編輯Markdown或純文本（txt）時，在vscode下方狀態欄左邊可以顯示實時字數統計，

效果

配置

在settings.json中加入如下內容作為配置：

"wordcount_cjk.statusBarTextTemplate": "中文字數：${cjk} ,英文單詞數：${en_words} ,非空白字符數：${total - whitespace} ,總字符數：${total}",

主題

筆者所用的主題叫做Gruvbox Material Dark，

由該插件提供：

看起來像這樣：

配置

下載安裝該插件后須在setting.json中加入如下內容作為配置，設定項的意義已經注釋：

"gruvboxMaterial.italicKeywords": true,//關鍵字為斜體
"gruvboxMaterial.darkContrast": "hard"//加深對比度（默認的太淺了）