Visual Studio Code（簡(jiǎn)稱VS Code）是微軟開(kāi)發(fā)的文本編輯器，同時(shí)支持Windows、Linux和macOS操作系統(tǒng)，并且是開(kāi)源的。從2015年發(fā)布到現(xiàn)在，因?yàn)楣δ軓?qiáng)大，擴(kuò)展性強(qiáng)，并且使用體驗(yàn)非常好，用的人是越來(lái)越多。我也是從原來(lái)的sublime遷移到atom到
現(xiàn)在VS code。在這里整理了一下對(duì)于剛?cè)肟臃浅Ｓ袔椭囊恍┗A(chǔ)技巧。希望能有些幫助，高級(jí)復(fù)雜一點(diǎn)的編輯技巧會(huì)在下一片內(nèi)容進(jìn)行整理，希望大家多關(guān)注我。
命令面板
隨時(shí)隨地顯示命令面板，并操作
Mac: cmd+shift+p or f1
Windows / Linux: ctrl+shift+p or f1
快捷鍵顯示
在命令面板上面的命令，如果設(shè)置了快捷鍵，那么在右邊就會(huì)顯示，如果你忘記了可以通過(guò)這種方式查看。
快速打開(kāi)
快速打開(kāi)文件
Mac: cmd+p
Windows/Linux: ctrl+p
Tip: Type "?" to view help suggestions.
命令行工具
使用Terminal命令快速的啟動(dòng)并設(shè)置項(xiàng)目。
安裝命令行工具
- 打開(kāi) Command Palette | 命令面板 （command+shift+p）
- 輸入 "shell command"，點(diǎn)擊回車(chē)
使用命令行工具
# 使用VS code 打開(kāi)當(dāng)前文件夾
code .
# 在最近使用的代碼窗口打開(kāi)當(dāng)前文件夾
code -r .
# 創(chuàng)建新文件
code -n
# 修改語(yǔ)言
code --locale=es
# 打開(kāi) diff 編輯器
code --diff <file1> <file2>
# 查看幫助
code --help
# 禁用所有的插件
code --disable-extensions .
[圖片上傳失敗...(image-925bd4-1536738397728)]
狀態(tài)欄
顯示錯(cuò)誤和警告
能夠快速的跳轉(zhuǎn)到錯(cuò)誤和警告的位置。
Mac: shift+cmd+m
Windows / Linux: ctrl+shift+m
修改語(yǔ)言模式
修改當(dāng)前文件類型為自己想用的語(yǔ)言。如果你想將語(yǔ)言配置保存下來(lái)，可以使用configure file association for... 命令將當(dāng)前文件擴(kuò)展名與語(yǔ)言相關(guān)聯(lián)
Mac: cmd+k m
Windows / Linux: ctrl+k m
Customization | 自定義
Vs code有很多自定義選項(xiàng)
- 修改主題
- 修改快捷鍵
- 自定義設(shè)置
- 添加 JSON 驗(yàn)證
- 自定義代碼塊
- 安裝插件
修改主題
- 打開(kāi) Command Palette | 命令面板 （command+shift+p）
- 輸入" themes"，選擇修改想用的主題
- 你可以從插件市場(chǎng)下載自己喜歡的主題
還可以修改文件ICON的主題樣式。
修改快捷鍵
macOS
Windows
Linux
鍵盤(pán)映射
如果你已經(jīng)用習(xí)慣了其他編輯器，類似Vim，Sublime，Emacs，Atom的可以直接從Preferences > Keymap Extensions 進(jìn)行修改。
自定義快捷鍵
- 打開(kāi) Command Palette | 命令面板 （command+shift+p）
- 輸入"keyboard shortcuts."
- 輸入自己想用的快捷鍵
自定義設(shè)置
打開(kāi) settings.json
Mac: cmd+,
Windows / Linux: File > Preferences > Settings
/粘貼時(shí)格式化/
"editor.formatOnPaste": true
/改變字體大小/
"editor.fontSize": 18
/設(shè)置縮放等級(jí)/
"window.zoomLevel": 5
/編程字體連字/
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
需要安裝字體“Fira Code”
[圖片上傳失敗...(image-a4b1aa-1536738397728)]
/自動(dòng)保存/： 你還可以使用最高級(jí)別的自動(dòng)保存，在File > Auto Save設(shè)置
"files.autoSave": "afterDelay"
/保存時(shí)格式化/
"editor.formatOnSave": true,
/修改tab長(zhǎng)度/
"editor.tabSize": 4
/空白符號(hào)顯示/
"editor.renderWhitespace": "all"
根據(jù)語(yǔ)言設(shè)置
之前所有的設(shè)置可以根據(jù)不同語(yǔ)言分別生效。
"[languageid]": {
}
[圖片上傳失敗...(image-c2712e-1536738397728)]
插件
安裝插件
點(diǎn)擊VS code 插件市場(chǎng)，就可以安裝插件了，還可以選擇不同的排序方式，例如按照下載數(shù)量排序。
插件推薦
在插件設(shè)置的位置，可以選擇推薦插件，這是VS code 根據(jù)當(dāng)前語(yǔ)言環(huán)境推薦給你的插件。
制作插件
當(dāng)然如果你想要做一個(gè)自己的插件，你可以根據(jù)官方文檔自己編寫(xiě)，大神可以自由發(fā)揮。
documentation on contribution points
文件/文件夾管理
終端
Windows / Linux / Mac: ctrl+`
[圖片上傳失敗...(image-1c963c-1536738397728)]
側(cè)邊欄
Mac: cmd+b
Windows / Linux: ctrl+b
Zen Mode | 專注模式
Mac: cmd+k z
Windows / Linux: ctrl+k z
并排編輯
Mac: cmd+\ 或在文件管理頁(yè)面按住cmd并點(diǎn)擊鼠標(biāo)
Windows / Linux: ctrl+\
Linux: ctrl+2
你也可以用鼠標(biāo)將文件從一個(gè)組拖動(dòng)到另外一組。
切換編輯器窗口
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
激活資源管理器窗口
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
創(chuàng)建和打開(kāi)文件
Mac: cmd+鼠標(biāo)點(diǎn)擊
Windows / Linux: ctrl+鼠標(biāo)點(diǎn)擊
關(guān)閉當(dāng)前窗口
Mac: cmd+w
Windows / Linux: ctrl+k f
查看文件編輯歷史
查看歷史 ctrl+tab
后退
Mac: ctrl+-
Windows / Linux: alt+left
前進(jìn)
Mac: ctrl+shift+-
Windows / Linux: alt+right
文件導(dǎo)航
Mac: cmd+e 或 cmd+p
Windows / Linux: ctrl+e 或 ctrl+p
以上都是VS code的基本使用技巧，更高級(jí)的技巧將在下一片內(nèi)容整理。這些基本技巧看著很多，實(shí)際上用的最多的還是打開(kāi)命令導(dǎo)航和文件導(dǎo)航，剩下的基本都可以在這個(gè)基礎(chǔ)上打字來(lái)解決。
