當(dāng)前位置：首頁 >

学会用好 Visual Studio Code

發(fā)布時間：2025/3/21 45 豆豆

生活随笔收集整理的這篇文章主要介紹了学会用好 Visual Studio Code 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Visual Studio Code是個牛逼的編輯器，啟動非?？?#xff0c;完全可以用來代替其他文本文件編輯工具。又可以用來做開發(fā)，支持各種語言，相比其他IDE，輕量級完全可配置還集成Git感覺非常的適合前端開發(fā)，是微軟親生的想必TypeScript會支持的非常好。所以我仔細(xì)研究了一下文檔未來可能會作為主力工具使用。

主命令框 Command Palette

最重要的功能就是F1或Ctrl+Shift+P打開的命令面板了，在這個命令框里可以執(zhí)行VSCode的任何一條命令，可以查看每條命令對應(yīng)的快捷鍵，甚至可以關(guān)閉這個編輯器。

按一下Backspace會進(jìn)入到Ctrl+P模式里

Ctrl+P 模式

在Ctrl+P下輸入>又可以回到主命令框?Ctrl+Shift+P模式。

在Ctrl+P窗口下還可以

直接輸入文件名，快速打開文件
??列出當(dāng)前可執(zhí)行的動作
!?顯示Errors或Warnings，也可以Ctrl+Shift+M
:?跳轉(zhuǎn)到行數(shù)，也可以Ctrl+G直接進(jìn)入
@?跳轉(zhuǎn)到symbol（搜索變量或者函數(shù)），也可以Ctrl+Shift+O直接進(jìn)入
@:根據(jù)分類跳轉(zhuǎn)symbol，查找屬性或函數(shù)，也可以Ctrl+Shift+O后輸入:進(jìn)入
#?根據(jù)名字查找symbol，也可以Ctrl+T

常用快捷鍵

編輯器與窗口管理

同時打開多個窗口（查看多個項目）

打開一個新窗口：?Ctrl+Shift+N
關(guān)閉窗口：?Ctrl+Shift+W

同時打開多個編輯器（查看多個文件）

新建文件?Ctrl+N
歷史打開文件之間切換?Ctrl+Tab，Alt+Left，Alt+Right
切出一個新的編輯器（最多3個）Ctrl+\，也可以按住Ctrl鼠標(biāo)點擊Explorer里的文件名
左中右3個編輯器的快捷鍵Ctrl+1?Ctrl+2?Ctrl+3
3個編輯器之間循環(huán)切換 Ctrl+`
編輯器換位置，Ctrl+k然后按Left或Right

代碼編輯

格式調(diào)整

代碼行縮進(jìn)Ctrl+[，?Ctrl+]
折疊打開代碼塊?Ctrl+Shift+[，?Ctrl+Shift+]
Ctrl+C?Ctrl+V如果不選中，默認(rèn)復(fù)制或剪切一整行
代碼格式化：Shift+Alt+F，或Ctrl+Shift+P后輸入format code
修剪空格Ctrl+Shift+X
上下移動一行：?Alt+Up?或?Alt+Down
向上向下復(fù)制一行：?Shift+Alt+Up或Shift+Alt+Down
在當(dāng)前行下邊插入一行Ctrl+Enter
在當(dāng)前行上方插入一行Ctrl+Shift+Enter

光標(biāo)相關(guān)

移動到行首：Home
移動到行尾：End
移動到文件結(jié)尾：Ctrl+End
移動到文件開頭：Ctrl+Home
移動到后半個括號?Ctrl+Shift+]
選中當(dāng)前行Ctrl+i
選擇從光標(biāo)到行尾Shift+End
選擇從行首到光標(biāo)處Shift+Home
刪除光標(biāo)右側(cè)的所有字Ctrl+Delete
Shrink/expand selection：?Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor：可以連續(xù)選擇多處，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down?或?Ctrl+Alt+Up
同時選中所有匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當(dāng)前行了，見下邊Ctrl+Shift+K)
回退上一個光標(biāo)操作Ctrl+U

重構(gòu)代碼

跳轉(zhuǎn)到定義處：F12
定義處縮略圖：只看一眼而不跳轉(zhuǎn)過去Alt+F12
列出所有的引用：Shift+F12
同時修改本文件中所有匹配的：Ctrl+F12
重命名：比如要修改一個方法名，可以選中后按F2，輸入新的名字，回車，會發(fā)現(xiàn)所有的文件都修改過了。
跳轉(zhuǎn)到下一個Error或Warning：當(dāng)有多個錯誤時可以按F8逐個跳轉(zhuǎn)
查看diff 在explorer里選擇文件右鍵?Set file to compare，然后需要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.

查找替換

查找?Ctrl+F
查找替換?Ctrl+H
整個文件夾中查找?Ctrl+Shift+F
匹配符：
*?to match one or more characters in a path segment
??to match on one character in a path segment
**?to match any number of path segments ,including none
{}?to group conditions (e.g.?{**/*.html,**/*.txt}?matches all html and txt files)
[]?to declare a range of characters to match (e.g.,?example.[0-9]?to match on?example.0,example.1, …

顯示相關(guān)

全屏：F11
zoomIn/zoomOut：Ctrl + =/Ctrl + -
側(cè)邊欄顯/隱：Ctrl+B
側(cè)邊欄4大功能顯示：
- Show Explorer?Ctrl+Shift+E
- Show SearchCtrl+Shift+F
- Show GitCtrl+Shift+G
- Show DebugCtrl+Shift+D
Show OutputCtrl+Shift+U
預(yù)覽markdownCtrl+Shift+V

其他

自動保存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto

皮膚預(yù)覽

f1后輸入?theme?回車，然后上下鍵即可預(yù)覽

自定義settings.json

User settings?是全局設(shè)置，任何vs Code打開的項目都會依此配置。

默認(rèn)存儲在:

Windows:?%APPDATA%\Code\User\settings.json
Mac:?$HOME/Library/Application Support/Code/User/settings.json
Linux:?$HOME/.config/Code/User/settings.json

Workspace settings?是本工作區(qū)的設(shè)置，會覆蓋上邊的配置

存儲在工作區(qū)的.vocode文件夾下。

幾乎所有設(shè)定都在settings.json里，包括

Editor Configuration - font, word wrapping, tab size, line numbers, indentation, …
Window Configuration - restore folders, zoom level, …
Files Configuration - excluded file filters, default encoding, trim trailing whitespace, …
File Explorer Configuration - encoding, WORKING FILES behavior, …
HTTP Configuration - proxy settings
Search Configuration - file exclude filters
Git Configuration - disable Git integration, auto fetch behavior
Telemetry Configuration - disable telemetry reporting, crash reporting
HTML Configuration - HTML format configuration
CSS Configuration - CSS linting configuration
JavaScript Configuration - Language specific settings
JSON Configuration - Schemas associated with certain JSON files
Markdown Preview Configuration - Add a custom CSS to the Markdown preview
Less Configuration - Control linting for Less
Sass Configuration - Control linting for Sass
TypeScript Configuration - Language specific settings
PHP Configuration - PHP linter configuration

例如可以修改讓vscode認(rèn)識.glsl擴(kuò)展名

{// Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed."files.associations": {"*.glsl": "shaderlab"} }

修改默認(rèn)快捷鍵

File -> Preferences -> Keyboard Shortcuts

修改keybindings.json，我的顯示在這里C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json

 // Place your key bindings in this file to overwrite the defaults
[
    //ctrl+space被切換輸入法快捷鍵占用
    {
        "key": "ctrl+alt+space",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+d刪除一行
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+k", //與刪除一行的快捷鍵互換了：）
        "command": "editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    },
    //ctrl+shift+/多行注釋
    {
        "key":"ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    }
]
 

自定義代碼段

然后輸入語言,例如我這里輸入?typescript

由于每次輸入箭頭函數(shù)() => {}太煩了，我這里加入一段加入一段

 "arrow function": {
	"prefix": "func",
	"body": [
		"(${e}) => {$1}"
	],
	"description": "arrow function"
}
 

保存后，下次輸入func的時候就會自動出來箭頭函數(shù)了

配置TypeScript環(huán)境

首先覆蓋默認(rèn)ctrl + space快捷鍵，因為這個快捷鍵被輸入法切換占用了
C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
加入

 // Place your key bindings in this file to overwrite the defaults
[
{ "key": "ctrl+alt+space",            "command": "editor.action.triggerSuggest",
                                     "when": "editorTextFocus" }
]
 

File - Open Folder 打開項目的目錄

創(chuàng)建?tsconfig.json

輸入{}?,在大括號中間?ctrl + alt + space?（上邊的自定義鍵盤）

輸入

{ "compilerOptions": { "target": "ES5", "module": "amd", "sourceMap": true } }

可以創(chuàng)建.ts文件了

配置TaskRunner?Ctrl+Shift+P?輸入?Configure Task Runner

Run Task?Ctrl+Shift+B

安裝typings

Install typings to bring in the .d.ts files which power javascript intellisense.

npm install typings --global# Search for definitions. typings search tape# Find an available definition (by name). typings search --name react# Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`). typings install react --ambient --save

install will create a typings folder. VS Code will reference the .d.ts files for intellisense.

插件

新版本支持插件安裝了

插件市場?https://marketplace.visualstudio.com/#VSCode

安裝插件

F1?輸入?extensions

點擊第一個開始安裝或升級，或者也可以?Ctrl+P?輸入?ext install進(jìn)入
點擊第二個會列出已經(jīng)安裝的擴(kuò)展，可以從中卸載

ext install

我在用的插件(期待更新…)

docthis 插件可以自動添加JSDoc注釋。

ctrl + p?后輸入ext install docthis?可直接安裝。

安裝后連續(xù)兩次?Ctrl+Alt+D?即可在光標(biāo)處插入注釋。

詳細(xì)：?https://marketplace.visualstudio.com/items?itemName=joelday.docthis

vscode-todo 顯示todo列表

ctrl + p?后輸入ext install vscode-todo?可直接安裝。

詳細(xì):?https://marketplace.visualstudio.com/items?itemName=MattiasPernhult.vscode-todo

參考：

Learning Visual Studio Code
Key Bindings for Visual Studio Code
VS Code Tips and Tricks

from:?https://nshen.net/article/2015-11-20/vscode/

總結(jié)

以上是生活随笔為你收集整理的学会用好 Visual Studio Code的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Visual Studio Code 配
下一篇： window上安装elasticsera