VS Code 食用小結

一些經常使用的快捷操做以及vsc自帶的功能

注：

1.某些軟件快捷鍵會有衝突 例如搜狗輸入法調起軟鍵盤，顯卡旋轉屏幕等，遇到問題解決衝突

2.如下針對不一樣系統和臺機或筆記本的按鍵區別用/代替，順序是windows系統臺機/windows系統筆記本/Mac 或 windows系統/Mac

光標移動

• 針對單詞的光標移動：Ctrl/Cmd + 左右方向鍵

• 光標移動到行首或行末

  • Windows:

    • 臺機：Home行首 End行末

    • 筆記本：Fn + 左右方向鍵

  • Mac: Cmd + 左右方向鍵

• 光標代碼塊始末移動（花括號始末之間跳轉）:Ctrl/Cmd + Shift + \

• 光標移動到文檔首尾

  • Windows:
    • 臺機：Ctrl + Home/End
    • 筆記本：Alt + 左右方向鍵
  • Mac: Cmd + 上下方向鍵

建立多個光標

可用於一些批量處理的操做

• Alt/Cmd + 鼠標左鍵：按着按鍵鼠標點擊想要建立光標的位置，可生成多個光標
• Ctrl/Cmd + Alt/Option + 上下方向鍵：以當前光標的位置縱向建立多個光標（可配合光標移動到行首行位進行批量操）與系統快捷鍵翻轉屏幕有衝突，須要先自行處理再使用
• Alt/Option + Shift + i: 選中內容的最後建立光標，選中多行則多個
• 鼠標中鍵按住拖動

文本選擇

• 純鍵盤操做：以上1.1的操做 + Shift 就能夠完成對應的文本選擇

• 純鼠標的操做：

  • 自由選擇
  • 點兩下會選中當前單詞，點三下選中當前行，點四下選中當前文檔
  • 拖動左邊行號選中多行

• 同時選中多個相同內容：選中內容 => Ctrl + D(屢次按鍵則選中多個)

當前行的操做

• 刪除當前行: Ctrl/Cmd + Shift + K

• 剪切當前行: Ctrl/Cmd + X

• 從當前行不管光標在什麼位置，新開一行

  • 向下新開一行：Ctrl/Cmd + Enter
  • 向上新開一行：Ctrl/Cmd + Shift + Enter

• 移動當前行：Alt/Option + 上下方向鍵

• 複製同時移動當前行：Alt/Option + Shift + 上下方向鍵

####註釋

• 註釋一行：Ctrl/Cmd + /
• 選中註釋：Alt/Option + A

一個窗口多個編輯窗口

最多三個：Ctrl/Cmd + \

跳轉到文檔指定行數

Ctrl/Cmd + G 輸入將要跳轉的行數，執行便可

跳轉到指定文件的指定行數

結合以上兩個 Ctrl/Cmd + P 輸入文件名接着輸入：和指定行數

跳轉到指定聲明、類、函數

Ctrl/Cmd + Shift + O：使用方向鍵選擇或搜索而後回車便可

代碼格式化

可搭配格式化插件及個性化設置 推薦Prettier

• 整個文檔格式化：Alt/Option + Shift + F
• 選中內容格式化: Ctrl/Cmd + K Ctrl/Cmd + F

鼠標拖動

• 選中一行或多行，鼠標左鍵按住拖動到鬆手位置
• 選中內容按住Ctrl/Option拖動，能夠將內容複製粘貼到鬆手位置

搜索與替換

搜索欄後面的三個小圖標爲匹配規則

• 單文件搜索

  • Ctrl/Cmd + F輸入搜索內容
  • 選中內容再Ctrl/Cmd + F

• 多文件搜索：左側邊欄小搜索圖標

查看引用及跳轉

Shift + F12：顯示引用列表（在一個 js 文件裏 export 了一個函數，在另一個文件裏引用了它可是 shift + F12 找不到，那麼能夠在這個項目下添加一個 jsconfig.json 文件，這個文件會讓 VSCode 知道，當前這個文件夾下的文件都是屬於同一個項目的，從而進行索引）配置參考

自定義快捷鍵

Ctrl/Cmd + Shift + P能夠打開命令面板並搜索"打開鍵盤快捷方式"回車，可自定義快捷鍵

字符大小寫轉換

Ctrl/Cmd + Shift + P打開命令面板 搜索 "轉換爲大寫" 或 「轉換爲小寫」 運行便可

按照字母進行 行排序

感受這個用不太到 hhh

Ctrl/Cmd + Shift + P打開命令面板 搜索 "按升序排列行" 或 「按降序排列行」 運行便可

打開文件過多時跳轉到指定文件

Ctrl/Cmd + P: 可查看和搜索最近打開過的文件進行跳轉 還未跳轉前，Ctrl/Cmd + Enter 能夠多窗口打開此文件

代碼片斷

Ctrl/Cmd + Shift + P打開命令面板 搜索 "配置用戶代碼片斷"

選擇語言我以vue.json爲例，回車後會顯示十幾行被註釋的內容，取消註釋就是這樣了

{
	// Place your snippets for Vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
    // 代碼片斷的名字
	"Print to console": { 
        // 打出log字符時能夠看到代碼片斷的提示
		"prefix": "log", 
        // 代碼片斷內容
		"body": [ 
			"console.log('$1');",
			"$2"
		],
        // 提示時展現的內容
		"description": "Log output to console" 
	}
}
複製代碼

$1光標位置

$2佔位符 Tab後光標的位置

${1:label} label爲自定義內容並會被選中

詳細的可參考