VSCODE 前端相关插件记录
- vscode 基本插件
- Auto Close Tag
- Auto Rename Tag
- Beautify
- Bracket Pair Colorizer
- Debugger for Chrome
- HTML CSS Support
- HTML Snippets
- JavaScript(ES6) code snippets
- jQuery Code Snippets
- open in browser
- Chinese(Simplified)language
- Path Intellisense
- Vetur
- React/Redux/react-router Snippets
- vscode-icon
- HTMLHint
- Project Manager
- filesize
- CSS Peek
- Prettier
- Icon Fonts
- bootstrap 4 snippets
vscode 基本插件
Auto Close Tag
自动闭合HTML/XML标签
Auto Rename Tag
自动完成另一侧标签的同步修改
Beautify
格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则
Bracket Pair Colorizer
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
Debugger for Chrome
映射vscode上的断点到chrome上,方便调试
HTML CSS Support
智能提示CSS类名以及id
HTML Snippets
智能提示HTML标签,以及标签含义
JavaScript(ES6) code snippets
ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
jQuery Code Snippets
jQuery代码智能提示
open in browser
vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
Chinese(Simplified)language
语言插件,vscode默认语言英语,需要安装其他语言插件
Path Intellisense
自动提示文件路径,支持各种快速引入文件
Vetur
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
React/Redux/react-router Snippets
React/Redux/react-router语法智能提示
vscode-icon
让 vscode 资源树目录加
HTMLHint
html代码检测
Project Manager
在多个项目之前快速切换的工具
filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
CSS Peek
使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯!
Icon Fonts
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
bootstrap 4 snippets
bootstrap 类提示插件