VScode 插件推荐 献给所有前端开发者

VScode 插件推荐 献给所有前端开发者

HTML Snippets

初级H5代码提示,很实用

VScode 插件推荐 献给所有前端开发者_第1张图片

CSS Formatter

给CSS代码提供格式化支持 按alt+shift+f即可一键格式化代码

CSS Peek

在HTML源码中查看CSS类的定义 按F12直接跳转到定义编辑页,按alt+F12则可以再当前页面查看CSS类的定义

VScode 插件推荐 献给所有前端开发者_第2张图片

JS & CSS Minifier

用来压缩css和js文件 按下F1后输入minify即可使用 会在原路径中生成对应的.mim.js和.min.css文件

css-minify

安装前面那款可以不用安装这个
按ctrl+F1启动css minify(没有反应的话就按下F1输入css-minify) >用来压缩css文件 在css原路径中生成 [你的文件名].min.css文件 保持源码没有变动的情况下大幅减少css文件体积

Quokka.js

可以实时显示js代码中的变量值 使用时先按F1输入quokka选择new file再开始写代码

VScode 插件推荐 献给所有前端开发者_第3张图片

HTML CSS Support

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

VScode 插件推荐 献给所有前端开发者_第4张图片

vscode-icon

让 vscode 资源树目录加上图标,清晰易懂

VScode 插件推荐 献给所有前端开发者_第5张图片

Path Intellisense

自动补全路径
VScode 插件推荐 献给所有前端开发者_第6张图片

vscode-fileheader

按ctrl+alt+i 自动为文档加上作者信息,可以在插件设置里修改

VScode 插件推荐 献给所有前端开发者_第7张图片

Color Info

显示代码中颜色的详细信息 rgba cmyk 16进制的都可以使用 悬浮在颜色代码上即可看到详细信息

VScode 插件推荐 献给所有前端开发者_第8张图片

filesize

在vscode中显示当前文件的大小
按下Crtl-shift-'可以在控制台显示当前文件的大小,压缩后大小,创建和修改日期

VScode 插件推荐 献给所有前端开发者_第9张图片

HTML Boilerplate

HTML5的代码模板 创建html文件后输入html即可使用

你可能感兴趣的:(VScode 插件推荐 献给所有前端开发者)