2022，VS Code 前端插件推薦

前言

推薦一波前端開(kāi)發(fā)必備插件，絕對(duì)可以提高你的生產(chǎn)力，剩下來(lái)的時(shí)間來(lái) mo魚(yú)，豈不美哉

開(kāi)發(fā)綜合推薦

別名路徑跳轉(zhuǎn)

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

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

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

配置說(shuō)明

• 下載后只需自定義配置一些自己常用的別名路徑即可

  //?文件名別名跳轉(zhuǎn)
  ??"alias-skip.mappings":?{
  ????"~@/":?"/src",
  ????"views":?"/src/views",
  ????"assets":?"/src/assets",
  ????"network":?"/src/network",
  ????"common":?"/src/common"
  ??},
  

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

效果展示

路徑別名智能提示

• 插件名：path-alias
• 場(chǎng)景: 在導(dǎo)入組件的時(shí)候，使用別名路徑?jīng)]用提示時(shí)?? (可和別名路徑跳轉(zhuǎn)同時(shí)使用, 無(wú)沖突)
• 詳細(xì)使用教程(賊簡(jiǎn)單)

安裝效果和功能

indent-rainbow

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

Bracket Pair Colorizer 2

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

Auto Rename Tag

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

Code Spell Checker

• 插件名：Code Spell Checker
• 功能：檢查單詞拼寫(xiě)是否錯(cuò)誤（支持英語(yǔ)）

Code Runner

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

Debugger for Chrome

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

Live ServerPP

• 插件名：Live ServerPP

• 功能：在服務(wù)器端打開(kāi)你的文件，實(shí)時(shí)顯示你修改的代碼

• 支持websocket 消息服務(wù)，可以用于調(diào)試websocket 客戶端
• 支持可編程虛擬文件，可用于模擬服務(wù)端API接口

Svg Preview

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

Tabnine

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

Template String Converter

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

vscode-pigments

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

Parameter Hints

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

Quokka.js

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

Highlight Matching Tag

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

大眾類插件

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

插件

• Bookmarks

• 功能：常用于讀源碼進(jìn)行標(biāo)記行，跳轉(zhuǎn)（代碼標(biāo)記快速跳轉(zhuǎn)）

• ESLint

• 功能：代碼規(guī)范檢查

• Prettier - Code formatter

• 功能：代碼美化，自動(dòng)格式化成規(guī)范格式

• Project Manager

• 功能：項(xiàng)目管理插件，當(dāng)開(kāi)發(fā)多個(gè)項(xiàng)目時(shí)，可以快速跳轉(zhuǎn)

• Path Intellisense

• 功能：路徑智能提示

• Image preview

• 功能：當(dāng)引入路徑為圖片時(shí)，可以預(yù)覽當(dāng)前圖片

• GitLens

• 功能：增強(qiáng)了git功能，支持在VSCode查看作者、修改時(shí)間等等

• open in browser

• 功能：在瀏覽器打開(kāi)當(dāng)前文件

Vue 開(kāi)發(fā)推薦

vue-component

• 插件名：vue-component

• 功能：輸入組件名稱自動(dòng)導(dǎo)入找到的組件，自動(dòng)導(dǎo)入路徑和組件

• 選中后自動(dòng)輸入組件名（包含必填屬性）、import語(yǔ)句、components屬性

Vetur

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

Vue 3 Snippets

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

React 開(kāi)發(fā)推薦

React Style Helper

• 插件名：React Style Helper

• 功能：在React中更快速地編寫(xiě)內(nèi)聯(lián)樣式，并對(duì) CSS、LESS、SASS 等樣式文件提供強(qiáng)大的輔助開(kāi)發(fā)功能

• 自動(dòng)補(bǔ)全
• 跳轉(zhuǎn)至樣式和變量定義位置
• 創(chuàng)建 JSX/TSX 的行內(nèi)樣式
• 預(yù)覽樣式及變量?jī)?nèi)容
  
  

• 行內(nèi)樣式自動(dòng)補(bǔ)全，同時(shí)支持 SASS 變量的跳轉(zhuǎn)及預(yù)覽。

ES7 Reactsnippets

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

vscode-styled-components

• 插件名：vscode-styled-components
• 功能：在JS文件中寫(xiě)樣式時(shí)，有智能提示

主題類

Dracula Official

• 插件名：vscode-styled-components

One Dark Pro

• 插件名：One Dark Pro

vscode-icons

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

其他推薦

• 以下插件，可能不常用，大家感興趣可以試試??

CSS Initial Value

• 插件名：vscode-icons
• 功能：顯示每個(gè)CSS屬性的初始值，當(dāng)光標(biāo)停留在css屬性時(shí)

畫(huà)板作圖

• 插件名：Draw.io Integration
• 功能：在VSCode中畫(huà)圖，支持多人協(xié)作編輯圖表..

Echars 智能提示插件

• 插件名：echarts-vscode-extension
• 使用：安裝插件后，ctrl+shift+p輸入active Echars即可開(kāi)啟智能提示
• 功能：提示各種Echar中Option 的屬性，挺強(qiáng)大的

翻譯插件

• 插件名：A-super-translate

• 使用方法：選中行，Ctrl+Shift+p 輸入 翻譯

• 鍵入 ctrl+`再按下 ctrl+1 為翻譯直接替換選中區(qū)域

• 功能：翻譯識(shí)別代碼中注釋部分，不干擾閱讀。支持不同語(yǔ)言，單行、多行注釋、

• 支持用戶字符串與變量翻譯,支持駝峰拆分

總結(jié)（附全部插件圖片）

• 根據(jù)需求，大家安裝對(duì)應(yīng)插件即可（安裝太多插件，VSCode會(huì)很卡）
• 當(dāng)然電腦配置足夠強(qiáng)大，當(dāng)我沒(méi)說(shuō)??