一、基礎(chǔ)的

1、Auto Rename Tag?

修改標(biāo)簽會同步修改

2、Auto Import - ES6, TS, JSX, TSX

自動查找、解析并為所有可用導(dǎo)入提供代碼操作和代碼完成。適用于 JavaScript (ES6) 和 TypeScript (TS)

3、Code Runner?

快速運(yùn)行 調(diào)試js

4、CSS Peek

跳轉(zhuǎn)對應(yīng) css

5、DotENV

高亮ENV文件

6、Error Lens

顯示錯誤

7、ESLint

8、GitLens — Git supercharged?

在每行代碼查看代碼是誰修改的

9、JavaScript (ES6) code snippets

ES6代碼塊

10、jsdoc

快速生成函數(shù)注釋

11、npm Intellisense

智能npm引入 >>> 沒啥用

12、open in browser

CTRL + B 在瀏覽器打開 

13、Path Intellisense?

智能路徑引入

14、Prettier - Code formatter

15、Smart Click

雙擊標(biāo)簽，選中標(biāo)簽包裹的內(nèi)容

16、Tabnine AI??

代碼提示

17、Turbo Console Log

快速高效的Console Log

18、vscode extension for ECharts

智能提示 echarts 的 options

19、vscode-element-helper

智能提示element-ui

20、path-alias

一個可以解決路徑別名提示，跳轉(zhuǎn)的vscode插件 >>> 我測試的時候沒啥用

21、i18n Ally?

i18n插件，實時預(yù)覽，非常的好用,

記得在settings.json中配置下面的代碼

{
  "i18n-ally.localesPaths": "locales",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.enabledParsers": ["yaml", "js"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.enabledFrameworks": ["vue"],
}

22、Tailwind CSS IntelliSense

智能提示 Tailwind CSS語法

23、vue-helper

Vue2 組件跳轉(zhuǎn)源碼 包括 Element-UI 和 vux 和 iView，也可以比如輸入el-table，可以生成一個骨架

24、JSON to TS

Json數(shù)據(jù)一鍵轉(zhuǎn)Ts

二、Vue相關(guān)的

1、Vue 3 Snippets

這個插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets（代碼片段）。

2、Vue VSCode Snippets

也是一個vue的代碼片段

3、vue-component

智能引入自己寫的組件 + 跳轉(zhuǎn)組件 >>> 詳情去看官方說明

4、Vue Language Features (Volar)???

vue項目必開插件
注意?。?！Vuter 和 Volar 兩個插件不可以共同使用，否則會沖突報錯?。?！，現(xiàn)在不管是vue2 還是 vue3 都使用這個插件

5、TypeScript Vue Plugin (Volar)

Vue3項目使用的插件

三、美化

1、Material Icon Theme?

文件圖標(biāo)

2、Vitesse Theme???

主題 >>> 推薦使用 Vitesse Dark Soft

總結(jié) 

到此這篇關(guān)于前端vscode必備插件推薦的文章就介紹到這了,更多相關(guān)前端vscode必備插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論