前置知識
首先說明一下，vscode 為我們提供了兩種設置方式：
-
User Settings（用戶設置）：全局設置，對任意一個運行的 VS Code 都會起作用。
-
Workspace Settings（項目設置）：只對當前項目的設置。
注：Workspace Settings 會覆蓋 User Settings。
打開用戶設置和項目設置的方法如下：
- On Windows/Linux -
File > Preferences > Settings
- On macOS -
Code > Preferences > Settings
或直接通過命令行面板（Ctrl+Shift+P）輸入 open settings 進行調(diào)出。
vscode 中的 設置選項 都配置在一個 settings.json 文件中。
其中，用戶設置（User Settings） 的路徑為：
- Windows
%APPDATA%\Code\User\settings.json
- macOS
$HOME/Library/Application Support/Code/User/settings.json
- Linux
$HOME/.config/Code/User/settings.json
而 項目設置（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./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
},
}
必備插件
vscode 多設備同步工具，借助 Github GIST 支持設置文件(settings.json)，按鍵映射文件(keybindings.json)， Launch File，Snippets Folder，VSCode擴展及配置，項目文件夾等的同步。
使用方法：
- 上傳：
Shift + Alt + U (Sync: Update / Upload Settings)
- 下載：
Shift + Alt + D (Sync: Download Settings)
配置詳細步驟：
- 首先在 vscode 中安裝 Settings Sync
- 進入 github / Settings / Developer settings / Personal access tokens / Generate New Token
按上文步驟操作后，最后就可以得到一個 Access Token。把這個 Access Token 記錄下來，后續(xù)在其他設備上上傳配置時，需要使用到。
-
上傳配置文件：
?· 命令面板輸入Sync : Update / Upload Settings（或快捷鍵Shift + Alt + U）
?· 輸入 Access Token，創(chuàng)建 gists，進行配置上傳
?· 上傳成功后，會返回一個 Gist ID。保存該 Gist ID，下次其他設備需要下載配置時需要用到。
注：上傳的配置文件可以在以下網(wǎng)址進行查看：https://gist.github.com/{your_userName}/{gist_id}
-
下載/同步配置文件：
?· 命令面板輸入Sync : Download Settings（或快捷鍵Shift + Alt + D）
?· 輸入 Access Token
?· 輸入 Gist ID
?· 下載完成
通用插件
注：VSCodeVim 不支持 vim 腳本加載，因此無法使用 .vimrc 或 .vim插件進行配置。只能通過手動復制到 Settings 和 Emulated plugins.
設置：VSCodeVim 完整的選項支持列表可以在 vscode 的擴展菜單中的 Contributions 標簽查看。下面是博主自己的常用配置：
{
"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"對插入模式/正常模式/可視模式下進行自定義按鍵重映射。
注：xxxNonRecursive表示不進行遞歸調(diào)用。比如，正常模式下（vim.normalModeKeyBindings），將j映射為gj，那么當按下j時，gj就會被觸發(fā)，此時由于又觸發(fā)了j鍵，因此又會觸發(fā)新一輪的gj，一直如此反復遞歸進行。而使用 Non-recursive 非遞歸模式就可以避免這種自動遞歸擴展。
VSCodeVim 的配置文件加載順序如下：
:set {setting}-
vim.{setting} from user/workspace settings.
- VS Code settings
- VSCodeVim default values
我們知道，在 vim 中，有各種各樣的插件可以為我們提供豐富的功能。而 VSCodeVim 中，也為我們提供了一些模擬插件（Emulated Plugins）：
//使能 easymotion
"vim.easymotion":true,
其具體使用方法請查看：vim-easymotion。博主常用的使用方法如下：
| Motion Command |
Description |
| <leader><leader> s <char> |
全文查找字符 |
| <leader><leader> w |
查找當前光標后面的單詞首字母 |
| <leader><leader> b |
查找當前光標前面的單詞首字母 |
//使能 vim.surround 插件
"vim.surround":true,
使用方法如下：
| Command |
Description |
| gc |
注釋切換 (eg：gcc單行注釋切換，gc2j當前行和下兩行注釋切換） |
| gC |
塊注釋切換（eg：gCi{ 大括號內(nèi)容注釋切換 |
-
vim-sneak：基于 vim-sneak，提供基于兩個字母隨處跳轉(zhuǎn)功能。
配置如下：
"vim.sneak":true,
"vim.sneakUseIgnorecaseAndSmartcase":true,
使用方法如下：
| Motion Command |
Description |
s<char><char> |
向后尋找第一次出現(xiàn)<char><char>的位置 |
S<char><char> |
向后尋找第一次出現(xiàn)<char><char>的位置 |
<operator>z<char><char> |
向后尋找第一次出現(xiàn)符合<operator>的<char><char>的位置 |
<operator>Z<char><char> |
向前尋找第一次出現(xiàn)符合<operator>的<char><char>的位置 |
注：對于有<operator>的移動，使用z代替s，因為s已經(jīng)被插件 vim-surround 占據(jù)了。
-
輸入法切換問題：vim 通常都處于 normal 模式和 insert 模式切換狀態(tài)。如果當前處于 insert 模式，且輸入法為中文輸入。那么在退出 insert 模式（按下 <esc>)后，輸入法狀態(tài)仍然為中文輸入，則此時在 normal 模式下，仍然處于中文輸出狀態(tài)，無法進行正常的 vim 操作，仍需手動切換為英文輸入法才可操作 normal 模式。 VSCodeVim 官方已考慮到這個問題，并提供了解決方法，如下所示：
- 首先系統(tǒng)需要安裝一個第三方輸入法切換程序：im-select
- 找到默認輸入法鍵值。
對于 Mac 系統(tǒng)：先切換為英文輸入法，然后運行/<path-to-im-select-installation>/im-select輸出默認輸入法鍵值。下表列出 MacOS 常見的英文鍵值布局：
| Key |
Description |
| com.apple.keylayout.US |
U.S. |
| com.apple.keylayout.ABC |
ABC |
| com.apple.keylayout.British |
British |
| com.apple.keylayout.Irish |
Irish |
| com.apple.keylayout.Australian |
Australian |
| com.apple.keylayout.Dvorak |
Dvorak |
| com.apple.keylayout.Colemak |
Colemak |
對于 Windows 系統(tǒng)：輸入法鍵值獲取詳情請參考 im-select guide 。通常來說，如果你的鍵盤布局為 en_US，那么鍵盤輸入法鍵值為1033（建議添加該鍵盤布局為默認輸入法）。你也可以通過 Locale-codes 頁面查找你的 locale ID，LCID Decimal列就是 locale ID 值。
- 配置
vim.autoSwitchInputMethod:
"vim.autoSwitchInputMethod.enable": true,
//默認鍵盤布局
"vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"
"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 可以執(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
-
指定使用特定語言進行運行：使用快捷鍵
Ctrl+Alt+J或者按F1鍵后輸入/選擇Run By Language，最后輸入要運行的語言，如php, javascript, bat, shellscript...
注：使用這種方法同時結(jié)合選中代碼部分進行執(zhí)行，可以很方便地在同一個文件內(nèi)執(zhí)行多種不同的語言代碼。
-
運行自定義命令：使用快捷鍵
Ctrl+Alt+K，或者按F1鍵后輸入/選擇Run Custom Command。自定義命令配置結(jié)構(gòu)如下所示：
{
"code-runner.customCommand": "echo Hello"
}
配置：默認情況下，請確保各類語言的執(zhí)行器配置在全局環(huán)境變量中。你也可以通過配置code-runner.executorMap設置執(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ù)：
| Supported customized parameters |
Description |
| $workspaceRoot |
當前工程目錄路徑 |
| $dir |
要運行的代碼文件所在的目錄 |
| $dirWithoutTrailingSlash |
要運行的代碼文件所在的目錄（不帶尾后斜桿） |
| $fullFileName |
要運行的代碼文件全路徑 |
| $fileName |
要運行的代碼文件名稱 |
| $fileNameWithoutExt |
要運行的代碼文件名稱（不帶后綴名） |
| $driveLetter |
要運行的代碼文件所在盤符（只用于 Windows 系統(tǒng)） |
| $pythonPath |
Python 解釋器路徑 |
下面是本人的配置：
{
"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,
}
用不同的顏色區(qū)分大括號，該插件是 Bracket Pair Colorizer 的升級版本，使用同一套括號解析引擎，但極大增加了配置速度及準確性。
本人配置如下：
{
"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,
}
高亮顯示 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：打開/關閉高亮功能
-
List highlighted annotations：在輸出控制臺中列出所有 TODO 信息
讓 vscode 資源樹目錄加上圖標
配置如下：
{
"workbench.iconTheme": "vscode-icons",
}
對本地文件的智能提示，自動補全文件名
Window 系統(tǒng)需在 keybindings.json 中添加如下配置：
{ "key": ".", "command": "" }
注：keybindings.json 打開方式如下圖所示：
Java 環(huán)境搭建
VSCode搭建Java開發(fā)運行環(huán)境
前端
自動補全標簽
本人配置如下：
{
"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)"
]
}
自動重命名 HTML/XML 匹配標簽
注：Auto Close Tag 和 Auto Rename Tag 一起食用味道更佳喲。
ESLint（中文站點）是一個開源的 JavaScript 代碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 于 2013 年 6 月創(chuàng)建。ESLint 的初衷是為了讓程序員可以創(chuàng)建自己的檢測規(guī)則，使其可以在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。ESLint 的所有規(guī)則都被設計成可插入的，為了方便使用，ESLint 內(nèi)置了一些規(guī)則，在這基礎上也可以增加自定義規(guī)則。
要在 vscode 中集成 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
}
]
}
}
代碼格式化插件，支持 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 是一款為 Atom 以及 Visual Studio Code 編輯器編寫的 超級強大的 Markdown 插件。 這款插件意在讓你擁有飄逸的 Markdown 寫作體驗。
運行方法：快捷鍵Ctrl-K-V，或直接點擊右上角分頁符號：
可以通過自己配置 css 來定制 markdown 頁面樣式，詳情請查看：customize-css
最后附上全部的配置文件：settings.json
|
