Front-end vscode essential plug-in

1. Basic

1、Auto Rename Tag⭐

修改标签会同步修改

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

Automatically finds, parses, and provides code manipulation and code completion for all available imports. Available for JavaScript (ES6) and TypeScript (TS)

3、Code Runner⭐

Run quickly调试js

4、CSS Peek

Jump correspondingcss

5、DotENV

高亮ENV文件

6、Error Lens

显示错误

7、ESLint

8、GitLens — Git supercharged⭐

Check who modified the code at each line of code

9、JavaScript (ES6) code snippets

ES6代码块

10、jsdoc

快速生成函数注释

11、npm Intellisense

Smart npm introduction >>> useless

12、open in browser

CTRL + B in浏览器打开

13、Path Intellisense⭐

Intelligence 路径Introduction

14、Prettier - Code formatter

15、Smart Click

双击标签，选中标签包裹的内容

16、Tabnine AI⭐⭐

代码提示

17、Turbo Console Log

Fast and efficientConsole Log

18、vscode extension for ECharts

Smart Tips echarts ’s options

19、vscode-element-helper

Smart reminderelement-ui

20、path-alias

A vscode plug-in that can solve the path alias prompt and jump>>> It was of no use when I tested it

21、i18n Ally⭐

i18n plug-in, real-time preview, very easy to use,

Remember to configure the following code in 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

Smart Tips Tailwind CSSGrammar

23、view helper

Vue2 component jump source code includes Element-UI, vux and iView. You can also input el-table to generate a skeleton.

24、JSON to TS

Convert Json data to Ts with one click

2. Vue related

1、View 3 Snippets

This plugin adds Code Snippets based on the latest Vue 2 and Vue 3 APIs.

2、Vue VSCode Snippets

It is also a vue code snippet

3、vue-component

Intelligently introduce self-written components + jump components >>> See the official instructions for details

4、Vue Language Features (Volar)⭐⭐⭐

A must-have plug-in for vue projects
Attention! ! ! The two plug-ins Vuter and Volar cannot be used together, otherwise conflicts and errors will occur! ! ! , now both vue2 and vue3 use this plug-in

5、TypeScript Vue Plugin (Volar)

Plug-ins used by Vue3 projects

3. Beautification

1、Material Icon Theme⭐

file icon

2、Vitesse Theme⭐⭐⭐

Theme >>> RecommendedVitesse Dark Soft