原標(biāo)題：廣州藍(lán)景分享—VSCode 前端開發(fā)必備插件推薦

Hello~~各位小伙伴好，今天廣州藍(lán)景整理一波前端開發(fā)必備插件，絕對可以提高你的生產(chǎn)力，希望這篇文章對大家有所幫助。

開發(fā)綜合推薦

別名路徑跳轉(zhuǎn)

插件名：別名路徑跳轉(zhuǎn)

使用說明: 別名路徑跳轉(zhuǎn)插件，支持任何項目，

使用場景: 當(dāng)你在開發(fā)頁面時, 想點(diǎn)擊別名路徑導(dǎo)入的組件時（演示如下）

配置說明

下載后只需自定義配置一些自己常用的別名路徑即可// 文件名別名跳轉(zhuǎn)

"alias-skip.mappings": {

"~@/": "/src",

"views": "/src/views",

"assets": "/src/assets",

"network": "/src/network",

"common": "/src/common"

},

右擊插件--》擴(kuò)展設(shè)置--》路徑映射在settinas.json中編輯

效果展示

路徑別名智能提示

插件名：path-alias 場景: 在導(dǎo)入組件的時候，使用別名路徑?jīng)]用提示時 (可和別名路徑跳轉(zhuǎn)同時使用, 無沖突)

安裝效果和功能

indent-rainbow

插件名: indent-rainbow 功能：彩虹縮進(jìn)

Bracket Pair Colorizer 2

插件名: Bracket Pair Colorizer 2 功能：給匹配的括號() 或者 對象{}.. 添加對應(yīng)的顏色用于區(qū)分

Auto Rename Tag

插件名: Auto Rename Tag 功能：自動重命名標(biāo)簽

Code Spell Checker

插件名：Code Spell Checker 功能：檢查單詞拼寫是否錯誤（支持英語）

Code Runner

插件名：Code Runner 功能：一鍵執(zhí)行各種語言代碼（常用于測試）

Debugger for Chrome

插件名：Debugger for Chrome 功能：在VSCode端，調(diào)試代碼

Live ServerPP

插件名：Live ServerPP 功能：在服務(wù)器端打開你的文件，實(shí)時顯示你修改的代碼 支持websocket 消息服務(wù)，可以用于調(diào)試websocket 客戶端 支持可編程虛擬文件，可用于模擬服務(wù)端API接口

Svg Preview

插件名：Svg Preview 功能：可以顯示你的SVG圖片，還可以編輯

Tabnine

插件名：Tabnine 功能：智能提示代碼，可以預(yù)測你將要寫的代碼進(jìn)行提示

Template String Converter

插件名：Template String Converter 功能：在字符串中輸入$觸發(fā)，將字符串轉(zhuǎn)換為模板字符串

vscode-pigments

插件名：vscode-pigments 功能：實(shí)時預(yù)覽設(shè)置的顏色

Parameter Hints

插件名：Parameter Hints 功能：提示函數(shù)的參數(shù)類型及消息

Quokka.js

插件名：Quokka.js 使用：安裝插件后，ctrl+shift+p輸入Quokka new JavaScr..即可使用 功能：實(shí)時顯示打印輸出，更多功能自行探索（常用于測試）

Highlight Matching Tag

插件名：Highlight Matching Tag 功能：當(dāng)光標(biāo)停留在標(biāo)簽時，高亮匹配的標(biāo)簽

大眾類插件

基本都有安裝就不詳細(xì)介紹了

插件

Bookmarks 功能：常用于讀源碼進(jìn)行標(biāo)記行，跳轉(zhuǎn)（代碼標(biāo)記快速跳轉(zhuǎn)） ESLint 功能：代碼規(guī)范檢查 Prettier - Code formatter 功能：代碼美化，自動格式化成規(guī)范格式 Project Manager 功能：項目管理插件，當(dāng)開發(fā)多個項目時，可以快速跳轉(zhuǎn) Path Intellisense 功能：路徑智能提示 Image preview 功能：當(dāng)引入路徑為圖片時，可以預(yù)覽當(dāng)前圖片 GitLens 功能：增強(qiáng)了git功能，支持在VSCode查看作者、修改時間等等 open in browser 功能：在瀏覽器打開當(dāng)前文件

Vue 開發(fā)推薦

vue-component

插件名：vue-component 功能：輸入組件名稱自動導(dǎo)入找到的組件，自動導(dǎo)入路徑和組件 選中后自動輸入組件名（包含必填屬性）、import語句、components屬性

Vetur

插件名：Vetur 開發(fā) Vue 必備

Vue 3 Snippets

插件名：Vue 3 Snippets 基本必備：很多Vue的代碼段，很方便開發(fā)

React 開發(fā)推薦

React Style Helper

插件名：React Style Helper 功能：在React中更快速地編寫內(nèi)聯(lián)樣式，并對 CSS、LESS、SASS 等樣式文件提供強(qiáng)大的輔助開發(fā)功能 自動補(bǔ)全 跳轉(zhuǎn)至樣式和變量定義位置 創(chuàng)建 JSX/TSX 的行內(nèi)樣式 預(yù)覽樣式及變量內(nèi)容 行內(nèi)樣式自動補(bǔ)全，同時支持 SASS 變量的跳轉(zhuǎn)及預(yù)覽。

ES7 Reactsnippets

插件名：ES7 React/Redux/React-Native/JS snippets 功能：很多React的代碼段，很方便開發(fā)

vscode-styled-components

插件名：vscode-styled-components 功能：在JS文件中寫樣式時，有智能提示

主題類

Dracula Official

插件名：vscode-styled-components

One Dark Pro

插件名：One Dark Pro

vscode-icons

插件名：vscode-icons VSCode文件夾&文件圖標(biāo)

以上內(nèi)容就是今天跟大家分享的前端開發(fā)必備插件，希望對大家有幫助。返回搜狐，查看更多

責(zé)任編輯：