WEB 前端插件整理

Vs Code 系统插件

#1 Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。 #2 Code Runner 非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：

#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变量的变化

#5 vscode-faker 生成假数据，地址，电话，图片等等 打开方式shift+ctrl+p 然后输入faker 就可以选择了

#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必备插件