前端vscode必备插件


一、基础的

1、Auto Rename Tag⭐

图片[1] - 前端vscode必备插件 - MaxSSL

修改标签会同步修改

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

图片[2] - 前端vscode必备插件 - MaxSSL

自动查找、解析并为所有可用导入提供代码操作和代码完成。适用于 JavaScript (ES6) 和 TypeScript (TS)

3、Code Runner⭐

图片[3] - 前端vscode必备插件 - MaxSSL

快速运行 调试js

4、CSS Peek

图片[4] - 前端vscode必备插件 - MaxSSL

图片[4] - 前端vscode必备插件 - MaxSSL

跳转对应 css

5、DotENV

图片[6] - 前端vscode必备插件 - MaxSSL

高亮ENV文件

6、Error Lens

图片[7] - 前端vscode必备插件 - MaxSSL

显示错误

7、ESLint

8、GitLens — Git supercharged⭐

图片[8] - 前端vscode必备插件 - MaxSSL

在每行代码查看代码是谁修改的

9、JavaScript (ES6) code snippets

图片[9] - 前端vscode必备插件 - MaxSSL

ES6代码块

10、jsdoc

图片[10] - 前端vscode必备插件 - MaxSSL

快速生成函数注释

11、npm Intellisense

图片[11] - 前端vscode必备插件 - MaxSSL

智能npm引入 >>> 没啥用

12、open in browser

图片[12] - 前端vscode必备插件 - MaxSSL

CTRL + B 在浏览器打开

13、Path Intellisense⭐

图片[13] - 前端vscode必备插件 - MaxSSL

智能路径引入

14、Prettier – Code formatter

15、Smart Click

图片[14] - 前端vscode必备插件 - MaxSSL

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

16、Tabnine AI⭐⭐

图片[15] - 前端vscode必备插件 - MaxSSL

代码提示

17、Turbo Console Log

图片[16] - 前端vscode必备插件 - MaxSSL

快速高效的Console Log

18、vscode extension for ECharts

图片[17] - 前端vscode必备插件 - MaxSSL

智能提示 echarts 的 options

19、vscode-element-helper

图片[18] - 前端vscode必备插件 - MaxSSL

智能提示element-ui

20、path-alias

图片[19] - 前端vscode必备插件 - MaxSSL

一个可以解决路径别名提示,跳转的vscode插件 >>> 我测试的时候没啥用

21、i18n Ally⭐

图片[20] - 前端vscode必备插件 - MaxSSL

i18n插件,实时预览,非常的好用,

记得在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

图片[21] - 前端vscode必备插件 - MaxSSL

图片[22] - 前端vscode必备插件 - MaxSSL

智能提示 Tailwind CSS语法

23、vue-helper

图片[23] - 前端vscode必备插件 - MaxSSL

Vue2 组件跳转源码 包括 Element-UI 和 vux 和 iView,也可以比如输入el-table,可以生成一个骨架

24、JSON to TS

图片[24] - 前端vscode必备插件 - MaxSSL

Json数据一键转Ts

二、Vue相关的

1、Vue 3 Snippets

图片[25] - 前端vscode必备插件 - MaxSSL

这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets(代码片段)。

2、Vue VSCode Snippets

图片[26] - 前端vscode必备插件 - MaxSSL

也是一个vue的代码片段

3、vue-component

图片[27] - 前端vscode必备插件 - MaxSSL

智能引入自己写的组件 + 跳转组件 >>> 详情去看官方说明

4、Vue Language Features (Volar)⭐⭐⭐

图片[28] - 前端vscode必备插件 - MaxSSL

vue项目必开插件
注意!!!VuterVolar 两个插件不可以共同使用,否则会冲突报错!!!,现在不管是vue2 还是 vue3 都使用这个插件

5、TypeScript Vue Plugin (Volar)

图片[29] - 前端vscode必备插件 - MaxSSL

Vue3项目使用的插件

三、美化

1、Material Icon Theme⭐

图片[30] - 前端vscode必备插件 - MaxSSL

文件图标

2、Vitesse Theme⭐⭐⭐

图片[31] - 前端vscode必备插件 - MaxSSL

主题 >>> 推荐使用 Vitesse Dark Soft

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享