VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
首先這幾個(gè)是VSCode推薦Vue開發(fā)必備的插件
Vetur —— 語法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化選中代碼,兩個(gè)Ctrl需要同時(shí)按著)
EsLint —— 語法糾錯(cuò)
Debugger for Chrome —— 映射vscode上的斷點(diǎn)到chrome上,方便調(diào)試(配置有點(diǎn)麻煩,其實(shí)我沒用這個(gè))
Auto Close Tag —— 自動(dòng)閉合HTML/XML標(biāo)簽
Auto Rename Tag —— 自動(dòng)完成另一側(cè)標(biāo)簽的同步修改
JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入,除js外還支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各種包含js代碼文件的時(shí)間
Path Intellisense —— 自動(dòng)路勁補(bǔ)全
HTML CSS Support —— 讓 html 標(biāo)簽上寫class 智能提示當(dāng)前項(xiàng)目所支持的樣式
VSCode快捷鍵
常用 General
按 Press | 功能 Function |
---|---|
Ctrl + Shift + P,F(xiàn)1 | 顯示命令面板 Show Command Palette |
Ctrl + P | 快速打開 Quick Open |
Ctrl + Shift + N | 新窗口/實(shí)例 New window/instance |
Ctrl + Shift + W | 關(guān)閉窗口/實(shí)例 Close window/instance |
基礎(chǔ)編輯 Basic editing
按 Press | 功能 Function |
---|---|
Ctrl+X | 剪切行(空選定) Cut line (empty selection) |
Ctrl+C | 復(fù)制行(空選定)Copy line (empty selection) |
Alt+ ↑ / ↓ | 向上/向下移動(dòng)行 Move line up/down |
Shift+Alt + ↓ / ↑ | 向上/向下復(fù)制行 Copy line up/down |
Ctrl+Shift+K | 刪除行 Delete line |
Ctrl+Enter | 在下面插入行 Insert line below |
Ctrl+Shift+Enter | 在上面插入行 Insert line above |
Ctrl+Shift+\ | 跳到匹配的括號(hào) Jump to matching bracket |
Ctrl+] / [ | 縮進(jìn)/縮進(jìn)行 Indent/outdent line |
Home | 轉(zhuǎn)到行首 Go to beginning of line |
End | 轉(zhuǎn)到行尾 Go to end of line |
Ctrl+Home | 轉(zhuǎn)到文件開頭 Go to beginning of file |
Ctrl+End | 轉(zhuǎn)到文件末尾 Go to end of file |
Ctrl+↑ / ↓ | 向上/向下滾動(dòng)行 Scroll line up/down |
Alt+PgUp / PgDown | 向上/向下滾動(dòng)頁面 Scroll page up/down |
Ctrl+Shift+[ | 折疊(折疊)區(qū)域 Fold (collapse) region |
Ctrl+Shift+] | 展開(未折疊)區(qū)域 Unfold (uncollapse) region |
Ctrl+K Ctrl+[ | 折疊(未折疊)所有子區(qū)域 Fold (collapse) all subregions |
Ctrl+K Ctrl+] | 展開(未折疊)所有子區(qū)域 Unfold (uncollapse) all subregions |
Ctrl+K Ctrl+0 | 折疊(折疊)所有區(qū)域 Fold (collapse) all regions |
Ctrl+K Ctrl+J | 展開(未折疊)所有區(qū)域 Unfold (uncollapse) all regions |
Ctrl+K Ctrl+C | 添加行注釋 Add line comment |
Ctrl+K Ctrl+U | 刪除行注釋 Remove line comment |
Ctrl+/ | 切換行注釋 Toggle line comment |
Shift+Alt+A | 切換塊注釋 Toggle block comment |
Alt+Z | 切換換行 Toggle word wrap |
導(dǎo)航 Navigation
按 Press | 功能 Function |
---|---|
Ctrl + T | 顯示所有符號(hào) Show all Symbols |
Ctrl + G | 轉(zhuǎn)到行... Go to Line... |
Ctrl + P | 轉(zhuǎn)到文件... Go to File... |
Ctrl + Shift + O | 轉(zhuǎn)到符號(hào)... Go to Symbol... |
Ctrl + Shift + M | 顯示問題面板 Show Problems panel |
F8 | 轉(zhuǎn)到下一個(gè)錯(cuò)誤或警告 Go to next error or warning |
Shift + F8 | 轉(zhuǎn)到上一個(gè)錯(cuò)誤或警告 Go to previous error or warning |
Ctrl + Shift + Tab | 導(dǎo)航編輯器組歷史記錄 Navigate editor group history |
Alt + ←/→ | 返回/前進(jìn) Go back / forward |
Ctrl + M | 切換選項(xiàng)卡移動(dòng)焦點(diǎn) Toggle Tab moves focus |
搜索和替換 Search and replace
按 Press | 功能 Function |
---|---|
Ctrl + F | 查找 Find |
Ctrl + H | 替換 Replace |
F3 / Shift + F3 | 查找下一個(gè)/上一個(gè) Find next/previous |
Alt + Enter | 選擇查找匹配的所有出現(xiàn) Select all occurences of Find match |
Ctrl + D | 將選擇添加到下一個(gè)查找匹配 Add selection to next Find match |
Ctrl + K Ctrl + D | 將最后一個(gè)選擇移至下一個(gè)查找匹配項(xiàng) Move last selection to next Find match |
Alt + C / R / W | 切換區(qū)分大小寫/正則表達(dá)式/整個(gè)詞 Toggle case-sensitive / regex / whole word |
多光標(biāo)和選擇 Multi-cursor and selection
按 Press | 功能 Function |
---|---|
Alt +單擊 | 插入光標(biāo) Insert cursor |
Ctrl + Alt +↑/↓ | 在上/下插入光標(biāo) Insert cursor above / below |
Ctrl + U | 撤消上一個(gè)光標(biāo)操作 Undo last cursor operation |
Shift + Alt + I | 在選定的每一行的末尾插入光標(biāo) Insert cursor at end of each line selected |
Ctrl + I | 選擇當(dāng)前行 Select current line |
Ctrl + Shift + L | 選擇當(dāng)前選擇的所有出現(xiàn) Select all occurrences of current selection |
Ctrl + F2 | 選擇當(dāng)前字的所有出現(xiàn) Select all occurrences of current word |
Shift + Alt + → | 展開選擇 Expand selection |
Shift + Alt + ← | 縮小選擇 Shrink selection |
Shift + Alt + (拖動(dòng)鼠標(biāo)) | 列(框)選擇 Column (box) selection |
Ctrl + Shift + Alt +(箭頭鍵) | 列(框)選擇 Column (box) selection |
Ctrl + Shift + Alt + PgUp / PgDown | 列(框)選擇頁上/下 Column (box) selection page up/down |
豐富的語言編輯 Rich languages editing
按 Press | 功能 Function |
---|---|
Ctrl + 空格 | 觸發(fā)建議 Trigger suggestion |
Ctrl + Shift + Space | 觸發(fā)器參數(shù)提示 Trigger parameter hints |
Tab | Emmet 展開縮寫 Emmet expand abbreviation |
Shift + Alt + F | 格式化文檔 Format document |
Ctrl + K Ctrl + F | 格式選定區(qū)域 Format selection |
F12 | 轉(zhuǎn)到定義 Go to Definition |
Alt + F12 | Peek定義 Peek Definition |
Ctrl + K F12 | 打開定義到邊 Open Definition to the side |
Ctrl + . | 快速解決 Quick Fix |
Shift + F12 | 顯示引用 Show References |
F2 | 重命名符號(hào) Rename Symbol |
Ctrl + K Ctrl + X | 修剪尾隨空格 Trim trailing whitespace |
Ctrl + K M | 更改文件語言 Change file language |
編輯器管理 Editor management
按 Press | 功能 Function |
---|---|
Ctrl+F4, Ctrl+W | 關(guān)閉編輯器 Close editor |
Ctrl+K F | 關(guān)閉文件夾 Close folder |
Ctrl+\ | 拆分編輯器 Split editor |
Ctrl+ 1 / 2 / 3 | 聚焦到第1,第2或第3編輯器組 Focus into 1st, 2nd or 3rd editor group |
Ctrl+K Ctrl+ ←/→ | 聚焦到上一個(gè)/下一個(gè)編輯器組 Focus into previous/next editor group |
Ctrl+Shift+PgUp / PgDown | 向左/向右移動(dòng)編輯器 Move editor left/right |
Ctrl+K ← / → | 移動(dòng)活動(dòng)編輯器組 Move active editor group |
文件管理 File management
按 Press | 功能 Function |
---|---|
Ctrl+N | 新文件 New File |
Ctrl+O | 打開文件... Open File... |
Ctrl+S | 保存 Save |
Ctrl+Shift+S | 另存為... Save As... |
Ctrl+K S | 全部保存 Save All |
Ctrl+F4 | 關(guān)閉 Close |
Ctrl+K Ctrl+W | 關(guān)閉所有 Close All |
Ctrl+Shift+T | 重新打開關(guān)閉的編輯器 Reopen closed editor |
Ctrl+K | 輸入保持打開 Enter Keep Open |
Ctrl+Tab | 打開下一個(gè) Open next |
Ctrl+Shift+Tab | 打開上一個(gè) Open previous |
Ctrl+K P | 復(fù)制活動(dòng)文件的路徑 Copy path of active file |
Ctrl+K R | 顯示資源管理器中的活動(dòng)文件 Reveal active file in Explorer |
Ctrl+K O | 顯示新窗口/實(shí)例中的活動(dòng)文件 Show active file in new window/instance |
顯示 Display
按 Press | 功能 Function |
---|---|
F11 | 切換全屏 Toggle full screen |
Shift+Alt+1 | 切換編輯器布局 Toggle editor layout |
Ctrl+ = / - | 放大/縮小 Zoom in/out |
Ctrl+B | 切換側(cè)欄可見性 Toggle Sidebar visibility |
Ctrl+Shift+E | 顯示瀏覽器/切換焦點(diǎn) Show Explorer / Toggle focus |
Ctrl+Shift+F | 顯示搜索 Show Search |
Ctrl+Shift+G | 顯示Git Show Git |
Ctrl+Shift+D | 顯示調(diào)試 Show Debug |
Ctrl+Shift+X | 顯示擴(kuò)展 Show Extensions |
Ctrl+Shift+H | 替換文件 Replace in files |
Ctrl+Shift+J | 切換搜索詳細(xì)信息 Toggle Search details |
Ctrl+Shift+C | 打開新命令提示符/終端 Open new command prompt/terminal |
Ctrl+Shift+U | 顯示輸出面板 Show Output panel |
Ctrl+Shift+V | 切換Markdown預(yù)覽 Toggle Markdown preview |
Ctrl+K V | 從旁邊打開Markdown預(yù)覽 Open Markdown preview to the side |
調(diào)試 Debug
按 Press | 功能 Function |
---|---|
F9 | 切換斷點(diǎn) Toggle breakpoint |
F5 | 開始/繼續(xù) Start/Continue |
Shift+F5 | 停止 Stop |
F11 / Shift+F11 | 下一步/上一步 Step into/out |
F10 | 跳過 Step over |
Ctrl+K Ctrl+I | 顯示懸停 Show hover |
集成終端 Integrated terminal
按 Press | 功能 Function |
---|---|
Ctrl+` | 顯示集成終端 Show integrated terminal |
Ctrl+Shift+` | 創(chuàng)建新終端 Create new terminal |
Ctrl+Shift+C | 復(fù)制選定 Copy selection |
Ctrl+Shift+V | 粘貼到活動(dòng)端子 Paste into active terminal |
Ctrl+↑ / ↓ | 向上/向下滾動(dòng) Scroll up/down |
Shift+PgUp / PgDown | 向上/向下滾動(dòng)頁面 Scroll page up/down |
Ctrl+Home / End | 滾動(dòng)到頂部/底部 Scroll to top/bottom |
到此這篇關(guān)于VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))的文章就介紹到這了,更多相關(guān)VSCode Vue開發(fā)推薦插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue狀態(tài)模式實(shí)現(xiàn)窗口停靠功能(靈動(dòng)、自由, 管理后臺(tái)Admin界面)
這篇文章主要介紹了Vue狀態(tài)模式實(shí)現(xiàn)窗口停靠功能(靈動(dòng)、自由, 管理后臺(tái)Admin界面),本文通過實(shí)例代碼文字說明給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Vue插槽slot詳細(xì)介紹(對(duì)比版本變化,避免踩坑)
Vue中的Slot對(duì)于編寫可復(fù)用可擴(kuò)展的組件是再合適不過了,下面這篇文章主要給大家介紹了關(guān)于Vue插槽slot詳細(xì)介紹的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue常用傳值方式、父?jìng)髯印⒆觽鞲讣胺歉缸訉?shí)例分析
這篇文章主要介紹了Vue常用傳值方式、父?jìng)髯?、子傳父及非父?結(jié)合實(shí)例形式分析了vue.js常見的傳值方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)
在實(shí)際的應(yīng)用開發(fā)中,涉及用戶登錄驗(yàn)證、密碼重置等場(chǎng)景時(shí),通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能,以提升用戶體驗(yàn)和安全性,以下是一個(gè)簡(jiǎn)單的前端實(shí)現(xiàn),演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送,并開始一個(gè)倒計(jì)時(shí)2024-04-04window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10源碼揭秘為什么 Vue2 this 能夠直接獲取到 data 和 methods
本篇文章主要介紹的是Vue2 this 能夠直接獲取到 data 和 methods,閱讀本文將能學(xué)到如何學(xué)習(xí)調(diào)試 vue2 源碼、data 中的數(shù)據(jù)為什么可以用 this 直接獲取到、methods 中的方法為什么可以用 this 直接獲取到,需要的朋友可以參考一下2021-09-09