有用的vscode快捷键大全+自定义快捷键
VS Code是前端的一個(gè)比較好用的代碼編輯器，但是我們不能老是局限于鼠標(biāo)操作呀，有時(shí)候很不方便，所以呢，快捷鍵大全來啦，有的可能會(huì)和你們電腦自帶的快捷鍵沖突呢，這時(shí)候，你自己設(shè)置一下就好了呀
一、vs code 的常用快捷鍵列表
1、注釋：
a)?單行注釋：[ctrl+k,ctrl+c] 或 ctrl+/
b)?取消單行注釋：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)
c)?多行注釋：[alt+shift+A]
d)?多行注釋：/**
2、移動(dòng)行：alt+up/down
3、顯示/隱藏左側(cè)目錄欄?ctrl + b
4、復(fù)制當(dāng)前行：shift + alt +up/down
5、刪除當(dāng)前行：shift + ctrl + k
6、控制臺(tái)終端顯示與隱藏：ctrl + ~
7、查找文件/安裝vs code?插件地址：ctrl + p
8、代碼格式化：shift + alt +f
9、新建一個(gè)窗口: ctrl + shift + n
10、行增加縮進(jìn):?ctrl + [
11、行減少縮進(jìn):?ctrl + ]
12、裁剪尾隨空格(去掉一行的末尾那些沒用的空格)?: ctrl + shift + x
13、字體放大/縮小:?ctrl + ( + 或 - )
14、拆分編輯器 :ctrl + 1/2/3
15、切換窗口: ?ctrl + shift + left/right
16、關(guān)閉編輯器窗口: ?ctrl + w
17、關(guān)閉所有窗口 :?ctrl + k + w
18、切換全屏 :F11
19、自動(dòng)換行: ?alt + z
20、顯示git: ? ctrl + shift + g
21、全局查找文件：ctrl + p
22、顯示相關(guān)插件的命令(如：git log)：ctrl + shift + p
23、選中文字：shift + left / right / up / down
24、折疊代碼： ctrl + k + 0-9 (0是完全折疊)
25、展開代碼： ctrl + k + j (完全展開代碼)
26、刪除行?： ctrl + shift + k
27、快速切換主題：ctrl + k / ctrl + t
28、快速回到頂部?： ctrl + home
29、快速回到底部?: ctrl + end
30、格式化選定代碼?：ctrl + k / ctrl +f
31、選中代碼 ：?shift + 鼠標(biāo)左鍵
32、多行同時(shí)添加內(nèi)容（光標(biāo)） ：ctrl + alt + up/down
33、全局替換：ctrl + shift + h
34、當(dāng)前文件替換：ctrl + h
35、打開最近打開的文件：ctrl + r
36、打開新的命令窗：ctrl + shift + c
37、自動(dòng)生成閉合標(biāo)簽：VsCode內(nèi)置了Emmet語(yǔ)法,在后綴為.html/.css中輸入縮寫后按Tab鍵即會(huì)自動(dòng)生成相應(yīng)代碼
請(qǐng)注意在VsCode新版本中按Tab不再默認(rèn)啟用Emmet展開縮寫!需要在首選項(xiàng)配置中將emmet.triggerExpansionOnTab設(shè)置為true值!
E 代表HTML標(biāo)簽。
E#id 代表id屬性。E.class 代表class屬性。E[attr=foo] 代表某一個(gè)特定屬性。
E{foo} 代表標(biāo)簽包含的內(nèi)容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同級(jí)元素。
E^N 代表N是E的上級(jí)元素。
二、vs code 的常用插件
1、Auto Rename Tag?修改html標(biāo)簽，自動(dòng)幫你完成尾部閉合標(biāo)簽的同步修改，和webstorm一樣。
2、Auto Close Tag?自動(dòng)閉合HTML標(biāo)簽
4、Beautiful?格式化代碼的工具
5、Dash?Dash是MacOS的API文檔瀏覽器和代碼段管理器
6、Ejs Snippets?ejs 代碼提示
7、ESLint?檢查javascript語(yǔ)法錯(cuò)誤與提示
8、File Navigator?快速查找文件
9、Git History(git log)查看git log
10、Gulp Snippets?寫gulp時(shí)用到，gulp語(yǔ)法提示。
11、HTML CSS Support ?在HTML標(biāo)簽上寫class智能提示當(dāng)前項(xiàng)目所支持的樣式
12、HTML Snippets?超級(jí)好用且初級(jí)的H5代碼片段以及提示
13、Debug for Chrome讓vs code映射chrome的debug功能，靜態(tài)頁(yè)面都可以用vscode來打斷點(diǎn)調(diào)試、配飾稍微復(fù)雜一點(diǎn)
14、Document this?Js的注釋模板
15、jQuery Code Snippets?jquery提示工具
16、Html2jade?html模板轉(zhuǎn)pug模板
17、JS-CSS-HTML Formatter?格式化
18、Npm intellisense?require 時(shí)的包提示工具
19、Open in browser?打開默認(rèn)瀏覽器
20、One Dark Theme?一個(gè)vs code的主題
21、Path Intellisense?自動(dòng)路徑補(bǔ)全、默認(rèn)不帶這個(gè)功能
22、Project Manager多個(gè)項(xiàng)目之間快速切換的工具
23、Pug(Jade) snippets?pug語(yǔ)法提示
24、React Components?根據(jù)文件名創(chuàng)建反應(yīng)組件代碼。
25、React Native Tools?reactNative工具類為React Native項(xiàng)目提供了開發(fā)環(huán)境。
26、Stylelintcss/sass代碼審查
27、Typings auto installer?安裝vscode 的代碼提示依賴庫(kù)，基于typtings的
28、View In Browser?默認(rèn)瀏覽器查看HTML文件（快捷鍵Ctrl+F1可以修改）
29、Vscode-icons?讓vscode資源目錄加上圖標(biāo)、必備
30、VueHelper?Vue2代碼段（包括Vue2 api、vue-router2、vuex2）
31、Vue 2 Snippets?vue必備vue代碼提示
32、Vue-color?vue語(yǔ)法高亮主題
33、Auto-Open Markdown Preview?markdown文件自動(dòng)開啟預(yù)覽
34、EverMonkey?印象筆記
35、atom one dark?atom的一個(gè)高亮主題(個(gè)人推薦)
36、GitLens 顯示每一行代碼是誰(shuí)寫的，方便查看代碼更改記錄溝通
三、常用的電腦快捷鍵
1、ctrl + shift + delete?快速清除瀏覽器緩存
2、ctrl + alt + delete?快速進(jìn)入任務(wù)管理器頁(yè)面
3、window + L??快速鎖定電腦
4、window + d??所有窗口最小化
5、 window + e??打開我的資源管理器(我的電腦)
6、 window + f??快速打開搜索窗口
7、 alt + tab快速查看打開的應(yīng)用與窗口
借鑒別人的博客的啦。。。。。。
四、這是我在后期使用中得到的一些小快捷，很好用哦
每次在代碼調(diào)試的時(shí)候都需要輸入console.log（），但是每次都要敲好多字
文件---首選項(xiàng)---用戶代碼片段----搜 javaScript ，進(jìn)入JavaScript.json，可以自定義好多有用的快捷鍵，
下面這個(gè)例子就是打出c然后tab就樂意直接出來console.log(‘’)啦
"Print to console": {
????"prefix": "c",
????"body": [
??????"console.log('$1')"
????],
????"description": "Log output to console"
??}
作者：有一個(gè)程序媛
鏈接：https://www.jianshu.com/p/512dde9376da
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
總結(jié)
以上是生活随笔為你收集整理的有用的vscode快捷键大全+自定义快捷键的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： practical vim2 笔记
- 下一篇： 前端学习资源汇总