一、 vscode中常用快捷鍵
- 註釋:
a) 單行註釋:cmd+/
b) 取消單行註釋:[cmd+k,cmd+u] (按下cmd不放,再按k + u)或者cmd+/
c) 多行註釋:[alt+shift+A]
d) 多行註釋:/** - 移動行:alt+up/down
- 顯示/隱藏左側目錄欄 cmd+ b
- 複製當前行:shift + alt +up/down
- 刪除當前行:cmd + x
- 控制檯終端顯示與隱藏:ctrl + ~
- 查找文件/安裝vs code 插件地址:cmd + p
- 代碼格式化:shift + alt + f
- 新建一個窗口 : cmd + shift + n
- 行增加縮進: cmd + ]
- 行減少縮進: cmd + [
- 裁剪尾隨空格(去掉一行的末尾那些沒用的空格) : ctrl + shift + x
- 字體放大/縮小: cmd + ( + 或 - )
- 拆分編輯器 : cmd + 1/2/3
- 切換窗口 : cmd + ~
- 關閉編輯器窗口 : cmd + w
- 關閉所有窗口 : cmd + k + w
- 切換全屏 : F11
- 自動換行 : alt + z
- 顯示git : ctrl + shift + g
- 全局查找文件:cmd + shift + f
- 顯示相關插件的命令(如:git log):cmd + shift + p
- 選中文字:shift + left / right / up / down
- 摺疊代碼: cmd + k + 0-9 (0是完全摺疊)或者cmd + alt + [
- 展開代碼: cmd + k + j (完全展開代碼)或者cmd + alt + ]
- 刪除行 : cmd + shift + k
- 快速切換主題:
首先:按下 cmd + k 然後再按下:cmd + t 此時就會彈出相關的主題,自行選擇就好了
- 快速回到頂部 : cmd + up
- 快速回到底部 : cmd + down
- 格式化選定代碼 :
首先按下:ctrl + k 然後再按下:ctrl +f
- 選中代碼 : shift + 鼠標左鍵
- 多行同時添加內容(光標) :ctrl + alt + up/down
- 全局替換:cmd + shift + h
- 當前文件查找:cmd + f
- 打開最近打開的文件:ctrl + r
- 打開新的命令窗:cmd + shift + c
- 合併行:ctrl + j
二、vs code 的常用插件
- Auto Rename Tag 修改html標籤,自動幫你完成尾部閉合標籤的同步修改,和webstorm一樣。
- Auto Close Tag 自動閉合HTML標籤
- Beautiful 格式化代碼的工具
- Dash Dash是MacOS的API文檔瀏覽器和代碼段管理器
- Ejs Snippets ejs 代碼提示
- ESLint 檢查javascript語法錯誤與提示
- File Navigator 快速查找文件
- Git History(git log) 查看git log
- Gulp Snippets 寫gulp時用到,gulp語法提示。
- HTML CSS Support 在HTML標籤上寫class智能提示當前項目所支持的樣式
- HTML Snippets 超級好用且初級的H5代碼片段以及提示
- Debug for Chrome 讓vs code映射chrome的debug功能,靜態頁面都可以用vscode來打斷點調試、配飾稍微複雜一點
- Document this Js的註釋模板
- jQuery Code Snippets jquery提示工具
- Html2jade html模板轉pug模板
- JS-CSS-HTML Formatter 格式化
- Npm intellisense require 時的包提示工具
- Open in browser 打開默認瀏覽器
- One Dark Theme 一個vs code的主題
- Path Intellisense 自動路徑補全、默認不帶這個功能
- Project Manager 多個項目之間快速切換的工具
- Pug(Jade) snippets pug語法提示
- React Components 根據文件名創建反應組件代碼。
- React Native Tools reactNative工具類爲React Native項目提供了開發環境。
- Stylelint css/sass代碼審查
- Typings auto installer 安裝vscode 的代碼提示依賴庫,基於typtings的
- View In Browser 默認瀏覽器查看HTML文件(快捷鍵Ctrl+F1可以修改)
- Vscode-icons 讓vscode資源目錄加上圖標、必備
- VueHelper Vue2代碼段(包括Vue2 api、vue-router2、vuex2)
- Vue 2 Snippets vue必備vue代碼提示
- Vue-color vue語法高亮主題
- Auto-Open Markdown Preview markdown文件自動開啓預覽
- EverMonkey 印象筆記
- atom one dark atom的一個高亮主題(個人推薦)