前端vscode必备插件-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端vscode必备插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、基础的

1、Auto Rename Tag⭐

vscode ts插件,vscode,前端,vue.js,编辑器,ide

修改标签会同步修改

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

vscode ts插件,vscode,前端,vue.js,编辑器,ide

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

3、Code Runner⭐

vscode ts插件,vscode,前端,vue.js,编辑器,ide

快速运行 调试js

4、CSS Peek

vscode ts插件,vscode,前端,vue.js,编辑器,ide

跳转对应 css

5、DotENV

vscode ts插件,vscode,前端,vue.js,编辑器,ide

高亮ENV文件

6、Error Lens

vscode ts插件,vscode,前端,vue.js,编辑器,ide

显示错误

7、ESLint

8、GitLens — Git supercharged⭐

vscode ts插件,vscode,前端,vue.js,编辑器,ide

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

9、JavaScript (ES6) code snippets

vscode ts插件,vscode,前端,vue.js,编辑器,ide

ES6代码块

10、jsdoc

vscode ts插件,vscode,前端,vue.js,编辑器,ide

快速生成函数注释

11、npm Intellisense

vscode ts插件,vscode,前端,vue.js,编辑器,ide

智能npm引入 >>> 没啥用

12、open in browser

vscode ts插件,vscode,前端,vue.js,编辑器,ide

CTRL + B 在浏览器打开

13、Path Intellisense⭐

vscode ts插件,vscode,前端,vue.js,编辑器,ide

智能路径引入

14、Prettier - Code formatter

15、Smart Click

vscode ts插件,vscode,前端,vue.js,编辑器,ide

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

16、Tabnine AI⭐⭐

vscode ts插件,vscode,前端,vue.js,编辑器,ide

代码提示

17、Turbo Console Log

vscode ts插件,vscode,前端,vue.js,编辑器,ide

快速高效的Console Log

18、vscode extension for ECharts

vscode ts插件,vscode,前端,vue.js,编辑器,ide

智能提示 echarts 的 options

19、vscode-element-helper

vscode ts插件,vscode,前端,vue.js,编辑器,ide

智能提示element-ui

20、path-alias

vscode ts插件,vscode,前端,vue.js,编辑器,ide

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

21、i18n Ally⭐

vscode ts插件,vscode,前端,vue.js,编辑器,ide

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"],
}