前置知識

首先說明一下盲厌，vscode 為我們提供了兩種設(shè)置方式：

• User Settings（用戶設(shè)置）：全局設(shè)置底桂，對任意一個運行的 VS Code 都會起作用泉懦。
• Workspace Settings（項目設(shè)置）：只對當(dāng)前項目的設(shè)置片部。

注：Workspace Settings 會覆蓋 User Settings。

打開用戶設(shè)置和項目設(shè)置的方法如下：

• On Windows/Linux - File > Preferences > Settings
• On macOS - Code > Preferences > Settings

或直接通過命令行面板（Ctrl+Shift+P）輸入 open settings 進(jìn)行調(diào)出直焙。

vscode 中的 設(shè)置選項 都配置在一個 settings.json 文件中景东。
其中砂轻，用戶設(shè)置（User Settings） 的路徑為：

• Windows %APPDATA%\Code\User\settings.json
• macOS $HOME/Library/Application Support/Code/User/settings.json
• Linux $HOME/.config/Code/User/settings.json

而 項目設(shè)置（Workspace Settings） 的路徑為：根目錄下的.vscode中奔誓。

以下是博主的通用配置：

{
  //  - onWindowChange: A dirty file is automatically saved when the window loses focus
  // "files.autoSave": "onFocusChange",
  // Controls the font size in pixels.
  "editor.fontSize": 14,
  // The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
  "editor.tabSize": 4,
  // Configure glob patterns for excluding files and folders. For example, the files explorer decides which files and folders to show or hide based on this setting. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}

必備插件

Settings Sync

vscode 多設(shè)備同步工具，借助 Github GIST 支持設(shè)置文件(settings.json)搔涝，按鍵映射文件(keybindings.json)厨喂， Launch File，Snippets Folder庄呈，VSCode擴展及配置蜕煌，項目文件夾等的同步。

使用方法：

• 上傳： Shift + Alt + U (Sync: Update / Upload Settings)
• 下載： Shift + Alt + D (Sync: Download Settings)

配置詳細(xì)步驟：

1. 首先在 vscode 中安裝 Settings Sync
2. 進(jìn)入 github / Settings / Developer settings / Personal access tokens / Generate New Token

Generate New Token

Select Gist From Scopes

Get an Access Token

按上文步驟操作后诬留，最后就可以得到一個 Access Token斜纪。把這個 Access Token 記錄下來贫母，后續(xù)在其他設(shè)備上上傳配置時，需要使用到盒刚。

3. 上傳配置文件：
   ?? 命令面板輸入Sync : Update / Upload Settings（或快捷鍵Shift + Alt + U）
   ?? 輸入 Access Token腺劣，創(chuàng)建 gists，進(jìn)行配置上傳
   ?? 上傳成功后因块，會返回一個 Gist ID橘原。保存該 Gist ID，下次其他設(shè)備需要下載配置時需要用到涡上。

上傳配置文件

注：上傳的配置文件可以在以下網(wǎng)址進(jìn)行查看：https://gist.github.com/{your_userName}/{gist_id}

4. 下載/同步配置文件：
   ?? 命令面板輸入Sync : Download Settings（或快捷鍵Shift + Alt + D）
   ?? 輸入 Access Token
   ?? 輸入 Gist ID
   ?? 下載完成
   
   下載/同步配置文件

通用插件

vim 插件擴展：VSCodeVim

注：VSCodeVim 不支持 vim 腳本加載趾断，因此無法使用 .vimrc 或 .vim插件進(jìn)行配置。只能通過手動復(fù)制到 Settings 和 Emulated plugins.

設(shè)置：VSCodeVim 完整的選項支持列表可以在 vscode 的擴展菜單中的 Contributions 標(biāo)簽查看吩愧。下面是博主自己的常用配置：

{
  "vim.leader": "<space>",
  "vim.hlsearch": true,
  "vim.ignorecase": true,
  "vim.smartcase": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  // do override vscode default ctrl operations
  "vim.useCtrlKeys": true,
  //key handled by vscode
  "vim.handleKeys": {
    // "<C-a>": false,
    "<C-f>": false
  },
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "q"],
      "commands": ["workbench.action.closeActiveEditor"]
    },
    {
      "before": ["<leader>", "w"],
      "commands": ["workbench.action.files.save"]
    },
    {
      "before": ["<leader>", "c", "c"],
      "commands": ["editor.action.addCommentLine"]
    },
    {
      "before": ["<leader>", "c", "u"],
      "commands": ["editor.action.removeCommentLine"]
    },
    {
      "before": ["<leader>", "f", "m"],
      "commands": ["editor.action.format"]
    },
    {
      "before": ["<C-a>"],
      "after": ["g", "g", "v", "G"]
    },
    {
      "before": ["<C-x>"],
      "commands": ["editor.action.clipboardCutAction"]
    }
  ],
  "vim.visualModeKeyBindings": [
    {
      "before": ["<C-x>"],
      "after": ["\"", "+", "d"]
    },
    {
      "before": ["<leader>", "c", "c"],
      "commands": ["editor.action.addCommentLine"]
    },
    {
      "before": ["<leader>", "c", "u"],
      "commands": ["editor.action.removeCommentLine"]
    },
    {
      "before": ["<leader>", "f", "m"],
      //using prettier
      "commands": ["editor.action.formatSelection"]
    }
  ],
  //easymotion
  "vim.easymotion": true,
  //sneak disable,cuz i want the default s function
  "vim.sneak": false,
  "vim.sneakUseIgnorecaseAndSmartcase": true,
  //surround
  "vim.surround": true,
}

下面介紹下一些相對有用的配置選項：

• 按鍵映射：可以通過配置 "vim.insertModeKeyBindings"/"vim.normalModeKeyBindings"/"vim.visualModeKeyBindings"/"vim.insertModeKeyBindingsNonRecursive"/"normalModeKeyBindingsNonRecursive"/"visualModeKeyBindingsNonRecursive"對插入模式/正常模式/可視模式下進(jìn)行自定義按鍵重映射芋酌。
  注：xxxNonRecursive表示不進(jìn)行遞歸調(diào)用。比如雁佳，正常模式下（vim.normalModeKeyBindings）隔嫡，將j映射為gj，那么當(dāng)按下j時甘穿，gj就會被觸發(fā)腮恩，此時由于又觸發(fā)了j鍵，因此又會觸發(fā)新一輪的gj温兼，一直如此反復(fù)遞歸進(jìn)行秸滴。而使用 Non-recursive 非遞歸模式就可以避免這種自動遞歸擴展。

VSCodeVim 的配置文件加載順序如下：

1. :set {setting}
2. vim.{setting} from user/workspace settings.
3. VS Code settings
4. VSCodeVim default values

我們知道募判，在 vim 中荡含，有各種各樣的插件可以為我們提供豐富的功能。而 VSCodeVim 中届垫，也為我們提供了一些模擬插件（Emulated Plugins）：

• vim-easymotion：基于 vim-easymotion 的模擬插件释液，我們只需啟動該插件即可：

//使能 easymotion
"vim.easymotion":true,

其具體使用方法請查看：vim-easymotion。博主常用的使用方法如下：

• vim-surround：基于 surround.vim 的模擬插件装处。

//使能 vim.surround 插件
"vim.surround":true,

• vim-commentary：類似 vim-commentary误债，但使用 vscode 內(nèi)置的 Toggle Line Comment和Toggle Block Comment特性。

使用方法如下：

• vim-sneak：基于 vim-sneak寝蹈，提供基于兩個字母隨處跳轉(zhuǎn)功能。
  配置如下：

"vim.sneak":true,
"vim.sneakUseIgnorecaseAndSmartcase":true,

使用方法如下：

注：對于有<operator>的移動登淘，使用z代替s箫老，因為s已經(jīng)被插件 vim-surround 占據(jù)了。

• 輸入法切換問題：vim 通常都處于 normal 模式和 insert 模式切換狀態(tài)黔州。如果當(dāng)前處于 insert 模式耍鬓，且輸入法為中文輸入阔籽。那么在退出 insert 模式（按下 <esc>)后，輸入法狀態(tài)仍然為中文輸入牲蜀，則此時在 normal 模式下仿耽，仍然處于中文輸出狀態(tài)，無法進(jìn)行正常的 vim 操作各薇，仍需手動切換為英文輸入法才可操作 normal 模式项贺。 VSCodeVim 官方已考慮到這個問題，并提供了解決方法峭判，如下所示：

1. 首先系統(tǒng)需要安裝一個第三方輸入法切換程序：im-select
2. 找到默認(rèn)輸入法鍵值开缎。
   對于 Mac 系統(tǒng)：先切換為英文輸入法，然后運行/<path-to-im-select-installation>/im-select輸出默認(rèn)輸入法鍵值林螃。下表列出 MacOS 常見的英文鍵值布局：

對于 Windows 系統(tǒng)：輸入法鍵值獲取詳情請參考 im-select guide 奕删。通常來說，如果你的鍵盤布局為 en_US疗认，那么鍵盤輸入法鍵值為1033（建議添加該鍵盤布局為默認(rèn)輸入法）完残。你也可以通過 Locale-codes 頁面查找你的 locale ID，LCID Decimal列就是 locale ID 值横漏。

3. 配置vim.autoSwitchInputMethod:

• Mac 系統(tǒng)：

"vim.autoSwitchInputMethod.enable": true,
//默認(rèn)鍵盤布局
"vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

• Windows 系統(tǒng)：

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "1033",
"vim.autoSwitchInputMethod.obtainIMCmd": "D:\\apps\\im-select.exe",
"vim.autoSwitchInputMethod.switchIMCmd": "D:\\apps\\im-select.exe {im}"

上述配置的選項{im}是一個指代切換輸入法的命令行選項谨设。

代碼運行：Code Runner

Code Runner 可以執(zhí)行多種語言代碼：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp 和 自定義命令。

使用方法：

• 運行代碼：
  ?● 直接點擊文件右上角三角運行符號
  ?● 使用快捷鍵：Ctrl+Alt+N
  ?● 選中要運行的代碼片段缎浇，點擊右鍵選擇Run Code
• 停止運行：
  ?● 使用快捷鍵：Ctrl+Alt+M
  ?● 右擊輸出面板扎拣，選擇Stop Code Run
• 指定使用特定語言進(jìn)行運行：使用快捷鍵Ctrl+Alt+J或者按F1鍵后輸入/選擇Run By Language，最后輸入要運行的語言素跺，如php, javascript, bat, shellscript...
  注：使用這種方法同時結(jié)合選中代碼部分進(jìn)行執(zhí)行二蓝，可以很方便地在同一個文件內(nèi)執(zhí)行多種不同的語言代碼。

code runner

• 運行自定義命令：使用快捷鍵Ctrl+Alt+K指厌，或者按F1鍵后輸入/選擇Run Custom Command刊愚。自定義命令配置結(jié)構(gòu)如下所示：

{
    "code-runner.customCommand": "echo Hello"
}

配置：默認(rèn)情況下，請確保各類語言的執(zhí)行器配置在全局環(huán)境變量中踩验。你也可以通過配置code-runner.executorMap設(shè)置執(zhí)行器路徑：

{
    "code-runner.executorMap": {
        "javascript": "node",
        "php": "C:\\php\\php.exe",
        "python": "python",
        "perl": "perl",
        "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",
        "go": "go run",
        "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
    }
}

下表是 Code Runner 支持的自定義參數(shù)：

下面是本人的配置：

{
    "code-runner.clearPreviousOutput": true,
    "code-runner.saveAllFilesBeforeRun": true,
    "code-runner.saveFileBeforeRun": true,
    "code-runner.preserveFocus": true,
    "code-runner.ignoreSelection":false,
    //top right execute icon
    "code-runner.showRunIconInEditorTitleMenu":true,
}

Bracket Pair Colorizer 2

用不同的顏色區(qū)分大括號鸥诽，該插件是 Bracket Pair Colorizer 的升級版本，使用同一套括號解析引擎晰甚，但極大增加了配置速度及準(zhǔn)確性衙传。

本人配置如下：

{
    "bracket-pair-colorizer-2.forceUniqueOpeningColor":true,
    "bracket-pair-colorizer-2.forceIterationColorCycle":true,
    "bracket-pair-colorizer-2.colorMode":"Consecutive",
    "editor.matchBrackets":false,
    "bracket-pair-colorizer-2.highlightActiveScope":true,
    "bracket-pair-colorizer-2.activeScopeCSS":[
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}; opacity: 0.5",
        "backgroundColor:{color}"
    ],
    "bracket-pair-colorizer-2.showBracketsInGutter": true,
    "bracket-pair-colorizer-2.showHorizontalScopeLine": false,
    "bracket-pair-colorizer-2.showVerticalScopeLine": true,
}

TODO Highlight

高亮顯示 TODOs / FIXMEs 的地方决帖。

本人配置如下：

{
    "todohighlight.isEnable": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss",
        "**/*.py",
        "**/*.java",
        "**/*.kt",
        "**/*.h",
        "**/*.c",
        "**/*.cpp",
    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**"
    ],
    "todohighlight.maxFilesForSearch": 5120,
    "todohighlight.toggleURI": false,
}

TODO Highlight 內(nèi)置命令如下：

• Toggle highlight：打開/關(guān)閉高亮功能
• List highlighted annotations：在輸出控制臺中列出所有 TODO 信息

vscode-icons

讓 vscode 資源樹目錄加上圖標(biāo)

配置如下：

{
    "workbench.iconTheme": "vscode-icons",
}

Path Intellisense

對本地文件的智能提示厕九，自動補全文件名

Window 系統(tǒng)需在 keybindings.json 中添加如下配置：

{ "key": ".", "command": "" }

注：keybindings.json 打開方式如下圖所示：

keybindings.json

Java 環(huán)境搭建

VSCode搭建Java開發(fā)運行環(huán)境

前端

Auto Close Tag

自動補全標(biāo)簽

本人配置如下：

{
    "auto-close-tag.enableAutoCloseTag": true,
    "auto-close-tag.enableAutoCloseSelfClosingTag": true,
    "auto-close-tag.activationOnLanguage": [
        "xml",
        "php",
        "blade",
        "ejs",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "vue",
        "liquid",
        "erb",
        "lang-cfml",
        "cfml",
        "HTML (Eex)"
    ]
}

Auto Rename Tag

自動重命名 HTML/XML 匹配標(biāo)簽

注：Auto Close Tag 和 Auto Rename Tag 一起食用味道更佳喲。

ESLint

ESLint（中文站點）是一個開源的 JavaScript 代碼檢查工具地回，使用 Node.js 編寫扁远，由 Nicholas C. Zakas 于 2013 年 6 月創(chuàng)建俊鱼。ESLint 的初衷是為了讓程序員可以創(chuàng)建自己的檢測規(guī)則，使其可以在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中畅买。ESLint 的所有規(guī)則都被設(shè)計成可插入的并闲，為了方便使用，ESLint 內(nèi)置了一些規(guī)則谷羞，在這基礎(chǔ)上也可以增加自定義規(guī)則帝火。

要在 vscode 中集成 ESLint，需要進(jìn)行如下步驟：

• 首先需要在當(dāng)前工程下安裝 ESLint（npm install eslint）湃缎，或者直接全局安裝 ESLint（npm install -g eslint）犀填。
• 對 ESLint 執(zhí)行初始化：
  ?? 全局安裝，命令行直接執(zhí)行：eslint --init嗓违；
  ?? 局部安裝九巡，命令行直接運行：Windows 系統(tǒng)：.\node_modules\.bin\eslint --init，Linux 和 Mac 系統(tǒng)：./node_modules/.bin/eslint --init蹂季。命令執(zhí)行完成后會在項目根目錄下生成一個.eslintrc.js文件冕广；
• vscode 中安裝 ESLint 插件；
• 配置 ESLint：

{
    "eslint.enable": true,
    "eslint.options": {
        "configFile": "C:/Users/10417/.eslintrc.js",
        "eslint.autoFixOnSave": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "jsx",
            "vue",
            {
                "language": "html",
                "autoFix": true
            }
        ]
    }
}

Prettier

代碼格式化插件偿洁，支持 JavaScript / TypeScript / CSS

使用方法：

• 格式化文檔：CMD/Ctrl + Shift + P -> Format Document
• 格式化選中：CMD/Ctrl + Shift + P -> Format Selection

*配置如下：

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
}

Markdown

Markdown Preview Enhanced

Markdown Preview Enhanced 是一款為 Atom 以及 Visual Studio Code 編輯器編寫的 超級強大的 Markdown 插件撒汉。 這款插件意在讓你擁有飄逸的 Markdown 寫作體驗。

運行方法：快捷鍵Ctrl-K-V涕滋，或直接點擊右上角分頁符號：

run markdown

可以通過自己配置 css 來定制 markdown 頁面樣式神凑，詳情請查看：customize-css

最后附上全部的配置文件：settings.json