解放生產力!20 個必知必會 VSCode 小技巧

這篇文章旨在幫助使用 VS Code 的人能夠更快速的開發,不是每個人都有時間去研究每一個提示和技巧,去發現幫助他們更快開發的那一個 - 因為太多了。所以我會列出我最喜歡用的可以使我快速開發的快捷鍵。


1. 合併為一行


解放生產力!20 個必知必會 VSCode 小技巧

• On Mac: Ctrl + J

• 在 Ubuntu、Windows:在 File > Preferences > Keyvoard shortcuts 打開快捷鍵設置,並將選擇的快捷鍵綁定在 edtior.action.joinLines 上。


2. 格式化代碼


這個快捷鍵會根據編輯器的配置去縮進代碼

解放生產力!20 個必知必會 VSCode 小技巧

提示:在開發前或者開發完成後使用它。我更喜歡在我完成了文件中的代碼後使用它。


• On Windows: Shift + Alt + F

• On Mac: Shift + Option + F

• On Ubuntu: Ctrl + Shift + I


3. 清除行尾的空格


這個命令幫助你刪除行首和行尾的多餘空白,並且把你從各式各樣的嚴格代碼檢查中脫離出來。


提示:在你完成文件中的代碼的最後,使用它。或者,你可以在設置中啟用空格清除設置:

1)打開用戶設置(Preperences > Settings > User Settings tab)。

2)點擊窗口右上角的{}`圖標,會打開一個文檔。

3)如果這裡沒有的話,添加一個新的設置"files.trimTrailingWhitespace": true。這樣一來,你就可以添加一個設置,而不是直接修改默認設置。

4)保存用戶設置文件。


我們也可以綁定一個快捷鍵去手動觸發空格清除(快捷鍵面板裡的 Trim Trailing Whitespace)。

如果你使用了新版本的 VS Code ,那麼按照步驟一,然後看下面的圖片。

解放生產力!20 個必知必會 VSCode 小技巧


4. 摺疊代碼


有時候如果代碼很多,並且你只想整體瞭解下,那麼摺疊代碼就會很有用。

1)收起光標處裡邊未摺疊區域的代碼

• On Windows /Ubuntu: Ctrl + Shift + [

• On Mac: Command+ Option + [


2)打開光標處摺疊區域的代碼

• On Windows /Ubuntu: Ctrl + Shift + ]

• On Mac: Command+ Option + ]



5. 向上/向下複製代碼


• On Windows: Shift + Alt + Up/Down

• On Mac: Shift + Option + Up/Down

• On Ubuntu: Ctrl + Shift + Alt + Up/Down


而且,你可以通過 File > Preferences > Keyboard Shortcuts 查看綁定的快捷鍵,然後綁定到你喜歡的快捷鍵上


解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: Shift + Alt + \\ or 2,3,4

• On Mac: Command + \\ or 2,3,4

• On Ubuntu: Shift + Alt + \\ or 2,3,4


你可以使用 split editor 命令拆分編輯器。原始的快捷鍵是 1 2 3。多個文件並行開發時很有用。

而且,你可以通過 File > Preferences > Keyboard Shortcuts 查看綁定的快捷鍵,然後綁定到你喜歡的快捷鍵上




默認情況下,編輯器組是按照垂直列布局的。你可以很輕鬆的把編輯器組整理成任何你喜歡的佈局,橫向豎向都可以。

解放生產力!20 個必知必會 VSCode 小技巧


為了支持靈活的佈局,你可以創建空的編輯器組。默認情況下,關閉編輯器組中的最後一個編輯器,同樣會關掉這個編輯器組,但是你可以通過設置修改這個行為:

workbench.editor.closeEmptyGroups: false

在 View > Editor Layout 有預先定義的編輯器佈局:

解放生產力!20 個必知必會 VSCode 小技巧

8. 選中單詞


解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: Ctrl+ d

• On Mac: Command + d

• On Ubuntu: Ctrl+ d


如果你點擊多次 Command + d, 將會添加另一個相同關鍵詞的選中。



9. 打開/關閉側邊欄


• On Windows: Ctrl+ b

• On Mac: Command + b

• On Ubuntu: Ctrl+ b

解放生產力!20 個必知必會 VSCode 小技巧

10. 導航到一個特定的行

解放生產力!20 個必知必會 VSCode 小技巧


想要到文件的某一行,你可以使用 ctrl + g 快捷鍵,然後輸入行數。

你也可以使用 ctrl + p 快捷鍵打開 go-to file 菜單,先輸入:,在輸入行號即可。

• On Windows: Ctrl + g

• On Mac: Ctrl + g or Ctrl + p

• On Ubuntu: Ctrl + g


11. 導航到某個標誌

解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: Ctrl + Shift + o

• On Mac: Command + Shift+ o

• On Ubuntu: Ctrl + Shift + o


你可以輸入一個冒號給這些標誌根據類型分組,@:。

12. 導航到工作區中的某個標誌


解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: Ctrl + t

• On Mac: Command + t

• On Ubuntu: Ctrl + t


13. 刪除前一個單詞


解放生產力!20 個必知必會 VSCode 小技巧


• On Windows: Ctrl + backspace

• On Mac: Command + delete

• On Ubuntu: Ctrl + backspace


這在某種情況下是很有用的,比如當你在打錯字了,不想長按刪除鍵去刪除你想刪除的那部分。



14. 選中單詞


解放生產力!20 個必知必會 VSCode 小技巧


• On Windows:

Ctrl + Shift + Right arrow / Left arrow

• On Mac:

Command + Shift + Right arrow / Left arrow

• On Ubuntu:

Ctrl + Shift + Right arrow / Left arrow


這對於快速選擇單詞和按需編輯是非常有用的。



15. 複製行


• On Windows: Ctrl + Shift + d

• On Mac: Command + Shift +d

• On Ubuntu: Ctrl + Shift + d


一個強大的眾所周知的功能就是可以複製行。


16. 刪除行

解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: Ctrl + x

• On Mac: Command + x

• On Ubuntu: Ctrl + x


17. 向上/向下添加光標


解放生產力!20 個必知必會 VSCode 小技巧

• On Windows:

Ctrl + Alt + Up arrow / Down arrow

• On Mac:

Command + Alt + Up arrow / Down arrow

• On Ubuntu:

Ctrl + Alt + Up arrow / Down arrow


複製光標可能是 VS code 中能節省最多時間的功能。在寫 TS 的時候會它變得更有用。



18. 重命名變量


解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: F2

• On Mac: F2

• On Ubuntu: F2


選中一個變量, 然後輸入 F2,或者也可以使用上下文菜單。

19. 列區域選中


• On Windows: Shift + Alt

• On Mac: Shift + Option

• On Ubuntu: Shift + Alt


當你使用上述快捷鍵並拖動你的鼠標時,你就可以選中一個區域的文本。在選中的每一行尾部將會被添加單獨的光標。



20. 命令面板

解放生產力!20 個必知必會 VSCode 小技巧

• On Windows: Ctrl + p

• On Mac: Command + p

• On Ubuntu: Ctrl + p


可看到你當前上下文所有可用的命令。其一些經常用到的:

1)打開一個文件


想要轉到某個文件,可以使用上述快捷鍵,然後輸入你正在找的文件的名字,他將幫你很快的定位到文件。

解放生產力!20 個必知必會 VSCode 小技巧


2)查看鍵盤綁定的命令


所有的命令以及綁定的快捷鍵都在命令面板裡。如你忘記了某個快捷鍵,它可以幫助到你。

解放生產力!20 個必知必會 VSCode 小技巧

更多幹貨,歡迎私信回覆:me,進行溝通交流,後臺回覆Python,免費領取學習資料


分享到:


相關文章: