由於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-----
}