Vscode前端開發插件大全

快捷鍵

通用快捷鍵

快捷鍵	做用
Ctrl+Shift+P,F1	展現全局命令面板
Ctrl+P	快速打開最近打開的文件
Ctrl+Shift+N	打開新的編輯器窗口
Ctrl+Shift+W	關閉編輯器

基礎編輯

快捷鍵	做用
Ctrl + X	剪切
Ctrl + C	複製
Alt + up/down	移動行上下
Shift + Alt up/down	在當前行上下複製當前行
Ctrl + Shift + K	刪除行
Ctrl + Enter	在當前行下插入新的一行
Ctrl + Shift + Enter	在當前行上插入新的一行
Ctrl + Shift + \	匹配花括號的閉合處，跳轉
Ctrl + ] / [	行縮進
Home	光標跳轉到行頭
End	光標跳轉到行尾
Ctrl + Home	跳轉到頁頭
Ctrl + End	跳轉到頁尾
Ctrl + up/down	行視圖上下偏移
Alt + PgUp/PgDown	屏視圖上下偏移
Ctrl + Shift + [	摺疊區域代碼
Ctrl + Shift + ]	展開區域代碼
Ctrl + K Ctrl + [	摺疊全部子區域代碼
Ctrl + k Ctrl + ]	展開全部摺疊的子區域代碼
Ctrl + K Ctrl + 0	摺疊全部區域代碼
Ctrl + K Ctrl + J	展開全部摺疊區域代碼
Ctrl + K Ctrl + C	添加行註釋
Ctrl + K Ctrl + U	刪除行註釋
Ctrl + /	添加關閉行註釋
Shift + Alt +A	塊區域註釋
Alt + Z	添加關閉詞彙包含

導航

快捷鍵	做用
Ctrl + T	列出全部符號
Ctrl + G	跳轉行
Ctrl + P	跳轉文件
Ctrl + Shift + O	跳轉到符號處
Ctrl + Shift + M	打開問題展現面板
F8	跳轉到下一個錯誤或者警告
Shift + F8	跳轉到上一個錯誤或者警告
Ctrl + Shift + Tab	切換到最近打開的文件
Alt + left / right	向後、向前
Ctrl + M	進入用Tab來移動焦點

查詢與替換

快捷鍵	做用
Ctrl + F	查詢
Ctrl + H	替換
F3 / Shift + F3	查詢下一個/上一個
Alt + Enter	選中全部出如今查詢中的
Ctrl + D	匹配當前選中的詞彙或者行，再次選中-可操做
Ctrl + K Ctrl + D	移動當前選擇到下個匹配選擇的位置(光標選定)
Alt + C / R / W

多行光標操做於選擇

快捷鍵	做用
Alt + Click	插入光標-支持多個
Ctrl + Alt + up/down	上下插入光標-支持多個
Ctrl + U	撤銷最後一次光標操做
Shift + Alt + I	插入光標到選中範圍內全部行結束符
Ctrl + I	選中當前行
Ctrl + Shift + L	選擇全部出如今當前選中的行-操做
Ctrl + F2	選擇全部出如今當前選中的詞彙-操做
Shift + Alt + right	從光標處擴展選中全行
Shift + Alt + left	收縮選擇區域
Shift + Alt + (drag mouse)	鼠標拖動區域，同時在多個行結束符插入光標
Ctrl + Shift + Alt + (Arrow Key)	也是插入多行光標的[方向鍵控制]
Ctrl + Shift + Alt + PgUp/PgDown	也是插入多行光標的[整屏生效]

豐富的語言操做

快捷鍵	做用
Ctrl + Space	輸入建議[智能提示]
Ctrl + Shift + Space	參數提示
Tab	Emmet指令觸發/縮進
Shift + Alt + F	格式化代碼
Ctrl + K Ctrl + F	格式化選中部分的代碼
F12	跳轉到定義處
Alt + F12	代碼片斷顯示定義
Ctrl + K F12	在其餘窗口打開定義處
Ctrl + .	快速修復部分能夠修復的語法錯誤
Shift + F12	顯示全部引用
F2	重命名符號
Ctrl + Shift + . / ,	替換下個值
Ctrl + K Ctrl + X	移除空白字符
Ctrl + K M	更改頁面文檔格式

編輯器管理

快捷鍵	做用
Ctrl + F4, Ctrl + W	關閉編輯器
Ctrl + k F	關閉當前打開的文件夾
Ctrl + \	切割編輯窗口
Ctrl + 1/2/3	切換焦點在不一樣的切割窗口
Ctrl + K Ctrl <-/->	切換焦點在不一樣的切割窗口
Ctrl + Shift + PgUp/PgDown	切換標籤頁的位置
Ctrl + K <-/->	切割窗口位置調換

文件管理

快捷鍵	做用
Ctrl + N	新建文件
Ctrl + O	打開文件
Ctrl + S	保存文件
Ctrl + Shift + S	另存爲
Ctrl + K S	保存全部當前已經打開的文件
Ctrl + F4	關閉當前編輯窗口
Ctrl + K Ctrl + W	關閉全部編輯窗口
Ctrl + Shift + T	撤銷最近關閉的一個文件編輯窗口
Ctrl + K Enter	保持開啓
Ctrl + Shift + Tab	調出最近打開的文件列表，重複按會切換
Ctrl + Tab	與上面一致，順序不一致
Ctrl + K P	複製當前打開文件的存放路徑
Ctrl + K R	打開當前編輯文件存放位置【文件管理器】
Ctrl + K O	在新的編輯器中打開當前編輯的文件

顯示

快捷鍵	做用
F11	切換全屏模式
Shift + Alt + 1	切換編輯佈局【目前無效】
Ctrl + =/-	放大 / 縮小
Ctrl + B	側邊欄顯示隱藏
Ctrl + Shift + E	資源視圖和編輯視圖的焦點切換
Ctrl + Shift + F	打開全局搜索
Ctrl + Shift + G	打開Git可視管理
Ctrl + Shift + D	打開DeBug面板
Ctrl + Shift + X	打開插件市場面板
Ctrl + Shift + H	在當前文件替換查詢替換
Ctrl + Shift + J	開啓詳細查詢
Ctrl + Shift + V	預覽Markdown文件【編譯後】
Ctrl + K v	在邊欄打開渲染後的視圖【新建】

調試

快捷鍵	做用
F9	添加解除斷點
F5	啓動調試、繼續
F11 / Shift + F11	單步進入 / 單步跳出
F10	單步跳過
Ctrl + K Ctrl + I	顯示懸浮

集成終端

快捷鍵	做用
Ctrl + `	打開集成終端
Ctrl + Shift + `	建立一個新的終端
Ctrl + Shift + C	複製所選
Ctrl + Shift + V	複製到當前激活的終端
Shift + PgUp / PgDown	頁面上下翻屏
Ctrl + Home / End	滾動到頁面頭部或尾部

前端適用插件

功能性

• Auto Close Tag : 匹配標籤，關閉對應的標籤。很實用【HTML/XML】
• Auto Rename Tag: sublime和webstorm也有這個內置功能，改變標籤的時候同時改動開閉合標籤；【HTML/XML】
• beautify: 良好的拓展性，能夠格式化JSON|JS|HTML|CSS|SCSS,比內置格式化好用
• Code Runner : 代碼編譯運行看結果，支持衆多語言
• colorize: 會給顏色代碼增長一個當前匹配代碼顏色的背景，很是好
• Document This : JSDOC註解調用，值得易用
• Git History : 不得不讚的插件，誰用誰知道，功能很贊
• HTML CSS Support : 這個也是必備插件之一
• Path Autocomplete : 路徑智能補全
• Path Intellisense ： 路徑智能提示.
• SCSS IntelliSense Preview: SCSS智能提醒，配置強大
• Syncing: 這個同步插件要比官方市場那個最高下載量的要好，支持刪除同步！！！
• Version Lens : 能夠及時看到package.json內部版本的變更，很實用
• Output Colorizer : 能夠終端日誌輸出着色，實用

React

• ES7 React/Redux/GraphQL/React-Native snippets:最好用的snippet彙總,很是全面,牆裂推薦!!!
• react-explorer-addons: 增長鼠標右鍵直接生成react的組件模板,好很差用,用過的才知道
• React PropTypes Intellisense: React props的智能提示
• vscode-styled-components: 對styled-componnents的支持,高亮包括智能提示
• styled-components-snippets: styled-components的代碼片斷
• React PropTypes Generate: 一鍵生成react的proptypes, 不用ts的小夥伴必備
• React JavaScript to TypeScript Transformer for VSCode: React的js版本轉ts版本,有些瑕疵,但可用
• React Native Tools: 讓 vscode能夠寫 RN 的插件,包括調試!
• Auto Import - ES6, TS, JSX, TSX: 這個插件是做者在一個長期不更新的項目加以維護的,相似智能補全的,基本跟進主流
• Useful React Snippets: React的snippet
• React-Native/React/Redux snippets for es6/es7:這個是比較重量級的插件，並且做者更新很勤快
• Typescript React/Redux Snippets：ts語法的react代碼片斷

Vue

• Vue TypeScript Snippets: 針對vue的ts代碼片斷
• Axios Snippets: axios的默認api智能提示,ts/html/js/vue都支持..不支持react(看它的發包json)
• vusion peek : Vue組件快速跳轉(Peek)
• TSLint Vue: 讓tslint 支持vue單組件內 ts的語法

Typescript

• Comments in Typescript: 針對TS的註釋插件,基於JSDoc定製
• Class IO: 能夠顯示引用類相關的關係(在代碼編輯區域顯示一個對應的標誌位)
• ClassLens: 快速跳轉到類的相關引用
• TSLens: tslens的gutter,可讓你更直觀的看到不一樣類型的引用,支持五種類型
• TypeLens : 類型引用索引展現，用過visual studio的都看到過，至關強大的一個功能；換個名詞可能更多人知道，peek file
• TypeScript Import : 專門處理TS內模塊導入的，和第一個互補；
• Typings : 這個就是用來處理d.ts的
• Latest TypeScript and Javascript Grammar :完美的支持beta及穩定版本的TS語法；
• JSON to TS:有了這個來聲明和後臺協商的對接接口簡直不能再方便了【typescript interface】
• Auto Import : 對於一堆組件的咱們來講，這貨簡直貼心，支持JSX和typescript，還有一些細緻化的配置參數
• exports autocomplete : 和上個功能相似可是不等同，至關實用

GraphQL

• GraphQL: 讓VS Code支持GraphQL

Node

• npm-import-package-version: 在引入模塊的時候直接展現該模塊的版本,很實用!!
• eggjs: 蛋框的相關幫助插件,代碼片斷,智能提示等
• egg-jump-definition: 蛋框的函數跳轉
• npm Intellisense: 正如標題所說,在寫引入模塊的時候智能提示!!
• NPM Smart Importer: 與上個的插件的差別是智能補全,好比你 copy 了一些代碼,而木有引入部分模塊!能夠點擊引入!
• NPM Dependency Links: 這個就是方便你在初始化腳手架項目以後想了解某些模塊,點擊直接調到npm 模塊發佈頁面...省去了打開瀏覽器,搜索....
• ExpressJs 4 Snippets: 如標題所言,裏面彙總了70個片斷,基本是 ES6的語法的!!
• Pug: 這是模板語言的代碼片斷,嚴格來講並不屬於 node,問題這貨基本用於服務端渲染的模板語言,通常和 node 的服務端框架搭配...

微信小程序

• mpvue snippets: mpvue的一些代碼片斷,以及部分原生小程序的代碼提示
• minapp: 用VS Code寫小程序必備的插件,裏面有衆多實用的特性集成
• minapp : 寫原生微信小程序必備的插件,智能補全,函數跳轉等等

代碼測試

• js-test-gen-vscode: 能夠針對部分函數直接生成jest單元測試代碼
• Jest: 讓你寫Jest代碼有IDE的感受
• Mocha Test Explorer: 針對mocha測試的GUI話,會給編輯器多一個獨立的版塊
• Coverage Gutters: 能夠直觀的看到你代碼覆蓋率的區域

代碼質量把控

• CodeMetrics: 能夠計算TS/JS內代碼的複雜度(好比函數這些),這些與代碼質量和性能是掛鉤的
• Import Cost: 就是你import一個東西的時候,能夠計算改引入模塊的大小!!!厲害吧
• Prettier: 這個東西在github上挺火,能夠支持不少種新框架的格式,高度自定義,因此有人封裝成了插件..實用!(vue,ng,react,jsx,ts)這些格式化毫無壓力

代碼可視化改善

• Polacode: 生成精美的代碼截圖,很漂亮,根據你當前主題配色生成的
• vscode-pigments: 代碼頁面展現顏色代碼並展現對應的顏色,很是實用
• Json Editor: 很是實用的可視化JSON編輯,不容錯過
• Subtle Match Brackets:快速高亮你配置的閉合,對於聚焦咱們的光標區塊代碼頗有幫助
• vscode-live-server: 很是全面的HTML預覽工具,支持衆多實際開發須要的特性,好比https,代理,cros
• Filter Line: 對於處理日誌文件,能夠快速篩選出咱們須要聚焦的內容
• Better Comments: 最好用的註釋區域高亮,對於TODO這些支持也很好
• :emojisense:: 可配置化(針對語言),智能提示emoji,很是實用..走過路過不要錯過
• Markdown Header Coloring: 給Markdown的標題區域添加一個亮瞎眼的顏色...
• BreadCrumb in StatusBar: 麪包屑的支持,在底部狀態欄展現

改善編碼體驗

• Vim: 王牌插件,讓vscode支持vim的經常使用特性,還集成幾種經常使用vim插件的特性,喜歡的不容錯過
• Class Helper: 對class快速編輯,支持ts,js,php
• Bash IDE: 對bash提供相似IDE的體驗,跳轉,智能提示這些
• JSON Helper: 提供大綱功能,能夠快速跳轉編輯
• Shortcut Menu Bar: 把幾個很經常使用的行爲作成圖標內置在編輯區域內,對於非快捷鍵熟練的小夥伴有所用處
• [YAML Support by Red Hat Preview](): 涵蓋了對YAML的校驗,智能提示,對於用這個寫配置文件的頗有用處
• indent-rainbow: 會給縮進添加一種顏色,讓你更加直觀的看到代碼層次
• Web Search: 選擇代碼內容,快速跳轉到搜索引擎,支持Google, DuckDuckGo, StackOverflow三種引擎,打開的是默認本地瀏覽器
• vscode-pdfviewer: 讓VS Code能夠閱讀PDF文檔,支持目錄這些
• Projects+: 項目管理必備插件,能夠快速錄入本地項目的地址,打開..很是實用
• VS DocBlockr: Atom插件Docblockr移植版,很是好用的註釋插件
• Visual Studio IntelliCode - Preview: 提供AI支持(強化你的代碼智能提示),微軟出品
• File Utils: 很是實用的一個文件工具集,脫離鼠標,直接操做當前打開的頁面.
• npm-ui: 側邊欄添加npm圖標,npm菜單內能夠直接執行命令
• NPM Scripts: 命令行執行npm命令 ,能夠算是npm ui的非UI版本
• Surround: 快速包裹代碼而且添加對應的條件語句,很實用
• koroFileHeader: 快速添加註解到文件頭部(預約義模板),好比建立時間,誰建立的
• gi: 快速生成.gitignore
• tea-time: 番茄計時器!有助於改善你長期盯電腦的習慣,到點去喝杯水緩緩什麼的
• Visual Snake Code: 擼代碼累了.來一把貪吃蛇?而後繼續苦逼!
• javascript console utils: 快速生成console.log(選中)
• Turbo Console Log: 與上面那個相似,功能弱化些
• clear-console: 快速清除當前文件內的console.log信息,很實用
• Node JSON Autocomplete: 對於引入json文件提供智能提示

協做系列

• VS Live Share Whiteboard : Live Share 畫板支持,這下子不只代碼能協做,思路也能演示了
• VS Live Share : 代碼協做,會使用上面這個插件的小夥伴,確定也會用這個插件

文件支持系列

• docs-yaml : 提供yaml的智能補全和語法校驗功能
• DotENV : env文件的支持

工具篇

• Error Gutters: 會把錯誤顯示爲圖標,相似git gutter,一目瞭然
• carbon-now-sh: 快速生成漂亮的代碼圖片
• Bracket Pair Colorizer 2: 原做者的第二版,括號高亮匹配更快速
• file-tree-generator: tree命令的鼠標操做版,還會輸出icon符號
• TypeScript Import Sorter: 適合強迫症用戶,給引入語句進行排序,能夠單文件或者整個目錄深度遍歷
• JSON Tree View: 可視化跳轉json,適合懶人快速定位json的某個key
• Babelrc: 驗證babelrc內的語法格式!!
• CodeMap: 能夠理解爲"大綱",支持ts,md,python. 挺實用的
• Debugger for Chrome: 更新迭代了那麼久,穩定性已經很不錯了,很是棒的調試工具.用過都說好
• Complete JSDoc Tags: 智能提示補全JSDOC的語法
• Git Project Manager: 適合有多個git項目的小夥伴,能夠快速跳轉,好比打開文件夾慢慢找快 N 倍
• Git Branch Warnings: 一個很舒適的提醒,能夠高亮某個分支提醒你要慎重,這個小功能感受之後會內置
• Git Lens: 暫時沒有發現比這個看git記錄更爲詳細了,內置功能不少..很方便
• jumpy: 羨慕vim黨,可是不會耍,想快速跳轉到指定位置!這個就能夠...
• licenser: 能夠快速生成開源協議的頭部!!,配置本身的用戶名和郵箱等,挺實用的
• Bookmarks: 給文件某個位置打標籤,用來快速跳轉的..不知道這個功能到如今爲什麼沒內置!!
• RegExp Preview and Editor: 這個就厲害了.能夠完美的展現你寫的正則,圖形化給你看你寫正則的造成

文章撰寫

• PicGo : 很實用的圖牀上傳工具,直接返回url,用了都說好.
• MarkDown Link Suggestions : md內本地資源智能提示
• Markdown Command Assist:傻瓜化md使用,鼠標右鍵選擇生成

Markdown(md 規範的文檔)

• Markdown Preview Enhanced: 國人出品的精品插件!!!涵蓋的東西不少,上至公式下至導出(裝了這個其餘都是能夠選裝了),不過你要跟着它提供的文檔把對應的功能點依賴給補齊了..適合願意折騰的
• Markdown All in One: 添加了一些內置md 沒有的,好比支持 github的 tasklist,table formatter,還有 TOC和快捷鍵這些
• Markdown+Math: 支持多種數學公式的展現!!
• Markdown PDF: 把 MD 轉爲 PDF,支持emoji,checkbox和語法高亮
• Markdown Preview Mermaid Support:支持Mermaid規範的流程表生成
• Markdown Emoji: 支持 md 插入emoji..可是用起來支持的力度不怎麼夠,不知道做者會不會繼續維護下去..可是常見的emoji是有的

css or scss

• css-triggers:這個插件的亮點就是能夠看到渲染的流程和理論...能夠當作參考工具
• HTML SCSS Support: scss的智能補全,支持在 html,ng,vue,.net等使用(佈局侷限具體看文檔).
• Autoprefixer: 如果基於腳手架的項目基本配置下就行了(不用這個插件)..這個通常用於你想寫點什麼或者維護老項目,能夠省點時間的
• CSS Grid Snippets: CSS Grid的代碼片斷,CSS Grid是下一代的佈局姿式,不過目前兼容性很渣..成爲主流可能要等個三四年,移動端上好一些(但只限於比較新的系統)
• SCSS IntelliSense: scss的智能提示
• CSS Blocks: 支持css模塊化的智能提示,跳轉
• perfect-css-modules: css modules,做用相似同上

語法校驗

• stylelint: 比內置的要全，更智能

代碼片斷插件

• JavaScript (ES6) code snippets : ES6的代碼片斷，實用
• JavaScript Snippet Pack : ES5及如下的代碼片斷，實用