Mac下 VSCode快捷鍵 VSCode基本使用


由於Sublime Text 安裝插件的問題實在是無奈,最后向VSCode低頭,決定轉戰VSCode,雖然可以設置成Sublime Text 快捷鍵,但多少還是有些不適應,只能從頭繼續學習了。

Mac 快捷鍵指示:

  • ⌘ :Command鍵
  • ⌥ :Option/Alt
  • ⇧ :Shift按鍵
  • ^ : 表示的是Control鍵

Mac VSCode 快捷鍵

全局

Command + Shift + P 顯示命令面板
Command + P 快速打開
Command + Shift + N 打開新窗口
Command + W 關閉窗口
Command + , 打開用戶設置
Command + K Command + S 顯示快捷方式

基本

Command + X 剪切(未選中文本的情況下,剪切光標所在行)
Command + C 復制(未選中文本的情況下,復制光標所在行)
Option + ↑ 向上移動行
Option + ↓ 向下移動行
Option + Shift + ↑ 向上復制行
Option + Shift + ↓ 向下復制行
Command + Shift + K 刪除行
Command + Enter 下一行插入
Command + Shift + Enter 上一行插入
Command + Shift + \ 跳轉到匹配的括號
Command + [ 減少縮進
Command + ] 增加縮進
Command + Shift + [ 切換到上一個已打開文件標簽
Command + Shift + ] 切換到下一個已打開文件標簽
Control + - 切換到上一個已打開文件標簽
Control + Shift + - 切換到下一個已打開文件標簽
Command + K Command + 0 折疊全部代碼塊(這個是數字,不是字母。0是代碼折疊級別,同理可以換用1,2,3等)
Command + K Command + J 展開全部代碼塊
Command + K Command + C 添加行注釋
Command + / 添加、移除行注釋
Option + Shift + A 添加、移除塊注釋
Command + Shift + D 復制光標所在整行,插入在該行之前
Command + K U 選中單詞改為大寫
Command + K L 選中單詞改為小寫
Command + Option + [ 代碼折疊
Command + Option + ] 代碼展開

多光標與選擇

Command + ↑ 跳轉至文件開頭
Command + ↓ 跳轉至文件結尾
Command + 點擊 插入多個光標
Option + 左鍵按住不放,拖動鼠標 添加多個光標
Command + U 撤銷上一個光標操作
Option + Shift + I 在所選行的行尾插入光標
Control + Shift +↑ 向上面一行添加游標
Control + Shift + ↓ 向下面一行添加游標
Command + J 刪除當前行與下一行內容合並成一行(光標未選中多行內容的時候) 或 將多行內容合並成一行(已選擇需要合並的多行時)
Option + Shift +↑ 向上復制一行
Option + Shift + ↓ 向下復制一行
Option + → 以單詞為單位向后移動光標
Option + Shift + → 以單詞為單位向后選中文本
Command + K R 在資源管理器中顯示活動文件

查找替換

Command + F 查找
Command + Option + F 替換
Command + Shift + F 在當前文件中查找查找
Command + Shift + H 在文件夾中查找替換
Command + G 查找下一個
Command + Shift + G 查找上一個
Option + Enter 選中所有匹配項
Command + D 向下選中相同內容
Command + K Command + D 移除前一個向下選中相同內容

進階

Option + Shift + F 格式化代碼
Command + L 選中當前行SHIFT + ALT + F 格式化代碼
Command + K Command + F 格式化選擇部分
Command + K Command + X 刪除行尾多余空格
Command + kk \ Control + kk 刪除光標至當前行尾內容

導航

Control + R 跳轉到當前文件的某一符號位置
Control + G 跳轉至某行
Command + P 跳轉到某個文件
Command + M 光標移動至括號內開始或結束的位置
Command + Shift + O 跳轉到某個符號
Command + Shift + M 打開問題面板

編輯器管理

Command + W 關閉編輯器
Command + \ 編輯器分屏
Command + 1 切換到第一分組
Command + 2 切換到第二分組
Command + 3 切換到第三分組
Command + K Left 激活左側編輯組
Command + K Right 激活右側編輯組
Command + K Z 切換禪模式

文件管理

Command + N 新建文件
Command + O 打開文件
Command + S 保存文件
Command + Shift + S 另存為
Command + Option + S 全部保存
Command + W 關閉
Command + K Command + W 全部關閉
Command + Shift + T 重新打開被關閉的編輯器
Control + Tab 打開下一個
Control + Shift + Tab 打開上一個
Command + K R 在資源管理器中查看當前文件
Command + K O 新窗口打開當前文件

調試

Command + Shift + D 調試
Command + Shift + X 安裝插件

顯示

Command + Ctrl + F 全屏、退出全屏
Command + + 放大
Command + - 縮小
Command + B 顯示、隱藏側邊欄
Command + Shift + F 顯示搜索框
Command + Shift + X 顯示插件面板
Command + Shift + H 全局搜索替換
Command + Shift + J 顯示、隱藏高級搜索
Command + Shift + U 顯示、隱藏輸出面板

集成終端

Control + 顯示終端 Control + Shift + 新建終端
Command + Shift + U 輸出
Command + Shift + Y 調試控制台

正則替換

目標
將類似 <div id="aaaa">1</div>這樣的語句替換成<div id="aaa" calss="jiaoshou">1</div>
替換方法
調出查找和替換界面
點下最左側的.*按鈕,啟用正則搜索
Find What界面中輸入<div id="aaaa">(.*)</div>,別忘了這兒的小括號
Replace With中輸入 <div id="aaaa" class="jiaoshou">$1</div>這兒的$1就代表了第一個括號中匹配的內容
Replace ALL!
替換前:

<div id="aaaa">較瘦f2e</div>
<div id="aaaa">前端</div>
<div id="aaaa">較瘦</div>

替換后:

<div id="aaaa" class="jiaoshou">較瘦f2e</div>
<div id="aaaa" class="jiaoshou">前端</div>
<div id="aaaa" class="jiaoshou">較瘦</div>

稍微再加點限制:

<div id="aaaa">較瘦f2e</div>
<span id="bbbb">前端</span>
<a id="cccc">較瘦</a>

Find What界面中輸入 <(.*) id=(.*)>(.*)</(.*)>
Replace With中輸入 <$1 id=$2 class="jiaoshou">$3</$4>
替換后:

<div id="aaaa" class="jiaoshou">較瘦f2e</div>
<span id="bbbb" class="jiaoshou">前端</span>
<a id="cccc" class="jiaoshou">較瘦</a>

element

使用E[attr]添加屬性:
帶有某個屬性的標簽( a[title=abc])
eg:

<a href="" title="abc"></a>

使用E{text}添加文本:

帶有標簽內容(p{內容})

eg:

<p>內容</p>

使用E$*N創建多個標簽
帶序號的元素(p.abc$*5)

eg:

<p class="abc1"></p>
<p class="abc2"></p>
<p class="abc3"></p>
<p class="abc4"></p>
<p class="abc5"></p>

settings.json

{
    //主題設置
    "workbench.colorTheme": "Monokai",
    // 默認編輯器字號
    "editor.fontSize": 14,
    //是否自動換行 
    "editor.wordWrap": "on",
    // tab幾個縮進
    "editor.tabSize": 2,
    // 文件自動保存
    "files.autoSave": "afterDelay",
    // 自動格式化粘貼的代碼
    "editor.formatOnPaste": true,
    // 在資源管理器刪除內容時候是否進行用戶提醒
    "explorer.confirmDelete": false,
    // 控制在資源管理器內拖放移動文件或文件夾時是否進行確認
    "explorer.confirmDragAndDrop": false,
    // 在資源管理器拖拽文件是否進行用戶提醒
    "workbench.statusBar.visible": true,
    // 工作區縮放級別
    "window.zoomLevel": 0,
    // 重命名或移動文件時,啟用或禁用自動更新導入路徑
    "javascript.updateImportsOnFileMove.enabled": "always",
    // 啟用/禁用導航路徑
    "breadcrumbs.enabled": true,
    // 終端cmd字號
    "terminal.integrated.fontSize": 16,
    // 不檢查縮進,保存后統一按設置項來設置
    "editor.detectIndentation": false,
    // 編輯器初始界面
    "workbench.startupEditor": "newUntitledFile",
    // 工作台狀態欄是否可見
    "workbench.statusBar.feedback.visible":false,
    // 添加多個光標時候需要的快捷鍵
    "editor.multiCursorModifier": "ctrlCmd",
    // 自定義代碼片段顯示的位置
    "editor.snippetSuggestions": "top",
    "window.menuBarVisibility": "toggle",
    // 啟用后,按下 TAB 鍵,將展開 Emmet 縮寫。
    "emmet.triggerExpansionOnTab": true,
    // 控制編輯器在空白字符上顯示符號的方式
    "editor.renderWhitespace": "all",
    // 控制編輯器是否應呈現空白字符
    "editor.renderControlCharacters": false,
    // 在文件和文件夾上顯示錯誤和警告
    "problems.decorations.enabled": false,
    // html文件格式化程序
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.codeActionsOnSave": {
          // 禁止eslint對html進行校驗
          "source.fixAll.eslint": false,
          // 禁止stylelint對html進行校驗
          "source.fixAll.stylelint": false
        }
    },
    // 編輯器文件保存時的操作(MacOS:快捷鍵是 command + s ),並不能修復所有問題,多數還是需要手動修復
    // 
    "editor.codeActionsOnSave": {
      // 文件保存時開啟eslint自動修復程序
      "source.fixAll.eslint": true,
      // 文件保存時開啟stylelint自動修復程序
      "source.fixAll.stylelint": true
    },
    // "[javascript]": {
    //     "editor.defaultFormatter": "vscode.typescript-language-features"
    // },

    // vscode-fileheader  -----settings begin-----

    // 文件作者
    "fileheader.Author": "JiaoShouf2e",
    // 文件最后修改者
    "fileheader.LastModifiedBy": "JiaoShouf2e",
    
    // vscode-fileheader  -----settings end-----

    
    //stylelint   -----settings begin-----
    
    // 防止編輯器內置linter與插件沖突設置
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    // 啟用stylelint插件
    "stylelint.enable": true,

    //stylelint   -----settings end-----

    // eslint   -----settings begin-----

    // 是否為JavaScript文件開啟eslint檢測
    "eslint.enable": true,
    // 保存之后進行lint
    "eslint.run": "onSave",
    // 是否啟用eslint的調試模式
    "eslint.debug": true
    // eslint   -----settings end-----
    
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM