注:文章摘自 風行天下一萬號 - 博客園
vs code 的常用快捷鍵
1、注釋:
- 單行注釋:[ctrl+k,ctrl+c] 或 ctrl+/
- 取消單行注釋:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)
- 多行注釋:[alt+shift+A]
- 多行注釋:/**
2、移動行:alt+up/down
3、顯示/隱藏左側目錄欄 ctrl + b
4、復制當前行:shift + alt +up/down
5、刪除當前行:shift + ctrl + k
6、控制臺終端顯示與隱藏:ctrl + ~
7、查找文件/安裝vs code 插件地址:ctrl + p
8、代碼格式化:shift + alt +f
9、新建一個窗口 : ctrl + shift + n
10、行增加縮進: ctrl + [
11、行減少縮進: ctrl + ]
12、裁剪尾隨空格(去掉一行的末尾那些沒用的空格) : ctrl + shift + x
13、字體放大/縮小: ctrl + ( + 或 - )
14、拆分編輯器 : ctrl + 1/2/3
15、切換窗口 : ctrl + shift + left/right
16、關閉編輯器窗口 : ctrl + w
17、關閉所有窗口 : ctrl + k + w
18、切換全屏 : F11
19、自動換行 : alt + z
20、顯示git : ctrl + shift + g
21、全局查找文件:ctrl + shift + f
22、顯示相關插件的命令(如:git log):ctrl + shift + p
23、選中文字:shift + left / right / up / down
24、折疊代碼:
- ctrl + k + 0-9 (0是完全折疊)
- ctrl + shift + [ 折疊鼠標所在代碼段
- ctrl + shift + ] 展開鼠標所在代碼段
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 + 鼠標左鍵
32、多行同時添加內容(光標) :ctrl + alt + up/down
33、全局替換:ctrl + shift + h
34、當前文件替換:ctrl + h
35、打開最近打開的文件:ctrl + r
36、打開新的命令窗:ctrl + shift + c
vs code 的常用插件
1、Auto Rename Tag 修改html標簽,自動幫你完成尾部閉合標簽的同步修改,和webstorm一樣。愛掏網 - it200.com
2、Auto Close Tag 自動閉合HTML標簽
4、Beautiful 格式化代碼的工具
5、Dash Dash是MacOS的API文檔瀏覽器和代碼段管理器
6、Ejs Snippets ejs 代碼提示
7、ESLint 檢查javascript語法錯誤與提示
8、File Navigator 快速查找文件
9、Git History(git log) 查看git log
10、Gulp Snippets 寫gulp時用到,gulp語法提示。愛掏網 - it200.com
11、HTML CSS Support 在HTML標簽上寫class智能提示當前項目所支持的樣式
12、HTML Snippets 超級好用且初級的H5代碼片段以及提示
13、Debug for Chrome 讓vs code映射chrome的debug功能,靜態頁面都可以用vscode來打斷點調試、配飾稍微復雜一點
14、Document this Js的注釋模板
15、jQuery Code Snippets jquery提示工具
16、Html2jade html模板轉pug模板
17、JS-CSS-HTML Formatter 格式化
18、Npm intellisense require 時的包提示工具
19、Open in browser 打開默認瀏覽器
20、One Dark Theme 一個vs code的主題
21、Path Intellisense 自動路徑補全、默認不帶這個功能
22、Project Manager 多個項目之間快速切換的工具
23、Pug(Jade) snippets pug語法提示
24、React Components 根據文件名創建反應組件代碼。愛掏網 - it200.com
25、React Native Tools reactNative工具類為React Native項目提供了開發環境。愛掏網 - it200.com
26、Stylelint css/sass代碼審查
27、Typings auto installer 安裝vscode 的代碼提示依賴庫,基于typtings的
28、View In Browser 默認瀏覽器查看HTML文件(快捷鍵Ctrl+F1可以修改)
29、Vscode-icons 讓vscode資源目錄加上圖標、必備
30、VueHelper Vue2代碼段(包括Vue2 api、vue-router2、vuex2)
31、Vue 2 Snippets vue必備vue代碼提示
32、Vue-color vue語法高亮主題
33、Auto-Open Markdown Preview markdown文件自動開啟預覽
34、EverMonkey 印象筆記
35、atom one dark atom的一個高亮主題(個人推薦)