一些常用的快捷操作以及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為自定義內容并會被選中

詳細的可參考

轉載于:https://juejin.im/post/5caf4472f265da037b60fefc

總結

以上是生活随笔為你收集整理的VS Code 食用小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。