WEB 前端插件整理

时间:2024-06-04 19:06:32

Vs Code 系统插件

#1 Bracket Pair Colorizer

让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

#2 Code Runner

非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

WEB 前端插件整理

#3 Image Preview

图像预览

#4 TODO Highlight

这个插件能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务。在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。

#5 Project Manager

多项目切换工具

H5、Css插件

#1 IntelliSense for CSS class names in HTML

在HTML中智能提示可用的类名

#2 Path Intellisense

这个插件支持自动完成文件路径

#3 Auto Rename Tag

自动重命名配对的HTML / XML标签

#4 Class autocomplete for HTML

智能提示HTML class =“”属性

#5 HTML CSS Support

在 html 标签上写class 智能提示当前项目所支持的样式

#6 HTML Snippets

html代码片段

#7 htmlhint

html代码检测

#8 Auto Close Tag

自动添加html结束标签

#9 HTML Boilerplate

通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。

#10 CSS Peek

使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

AngularJs、Ts、JQ插件

#1 angular2-switcher

通过三个简单的键绑定,在组件,模板和样式之间快速切换。当光标位于变量上时,只需按下F12键即可支持转到模板变量的定义。

#2 TsLint

TypeScript代码检查工具

#3 TypeScript Hero

管理导入语句,并可以自动导入缺少的依赖关系。可以组织和排序进口。

#4 Quokka.js

实时观看js变量的变化

WEB 前端插件整理

#5 vscode-faker

生成假数据,地址,电话,图片等等

打开方式shift+ctrl+p 然后输入faker 就可以选择了WEB 前端插件整理

#6 Prettier

格式化JavaScript / TypeScript / CSS 。

#7 jQuery Code Snippets

jq代码片段

#8 JavaScript Snippet Pack

js代码片段

#9 JavaScript (ES6) code snippets

es6代码片段

#10 npm Intellisense

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

#11 Auto Import

对于一堆组件的我们来说,这货简直贴心,支持JSX和typescript,还有一些细致化的配置参数

#12 TypeScript Import

专门处理TS内模块导入的,和#12互补;

#13 stylelint

语法校验,比内置的要全更智能

#14 Angular Files

在vsc中集成angular-cli工具,可界面华新建component、directove、module、routing、pipe等feature

#15 TypeScript Toolbox

ts必备插件