VSCode前端常用插件

396 阅读2分钟

VSCode前端常用插件

1.HTML Snippets

html标签提示,新版已内置

2.Eclipse快捷键

若以前是习惯eclipse开发的,可以安装这个插件进行快捷键重置

image-20231129092850219

3.Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改

4.Bracket Pair Colorizer

让括号拥有独立的颜色,易于区分。可以配合任意主题使用。 新版已内置,无需安装

5.ESlint

JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化

6.Path Intellisense

路径补全,比如输入link,自动补全link标签

image-20231129095038446

7.filesize

显示当前文件大小

8.Live Server

在线部署调试的工具,相当于模拟了一个服务器启动

9.Auto Import、Auto Close Tag、Auto Rename Tag

标签自动化三剑客:

Auto Import可以根据你引入的组件,自动导入提示

Auto Rename Tag当你修改标签的时候,自动完成另一侧标签的同步修改

Auto Close Tag 自动闭合HTML/XML标签

10.koroFileHeader

自动生成文件注释和方法注释

11.CSS Peek

忘记自己命名的css定义了什么样式吧,这东西,ctrl+鼠标移入上去,就可以看到自己写了什么css代码

12.HTML CSS Support、HTML Snippets、JavaScript (ES6) code snippets

前端三剑客,HTML CSS Support 智能提示CSS类名以及id

HTML Snippets 智能提示HTML标签,以及标签含义

JavaScript (ES6) code snippets ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间。你不要也得给我装!安装即可。

13.Stylelint、TSLint

跟eslint差不多,Stylelint是css规范,TSLint是TypeScript规范,有需求再用,需要一定配置

14.Material Icon Theme、vscode-icons

比较出名的2个文件图标主题,没错,就是这么低俗,连文件图标都要有个性!安装即可,可自行选择类型。

参考:

VSCode前端必备插件2022版

VSCode前端最常用的插件