【vscode高级玩家】VScode 插件推荐(献给所有前端开发者)

发表于2019-03-27更新于2023-05-04字数统计847阅读次数阅读次数

HTML Snippets

初级H5代码提示,很实用

在这里插入图片描述

CSS Formatter

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

CSS Peek

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

在这里插入图片描述

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再开始写代码

在这里插入图片描述

HTML CSS Support

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

在这里插入图片描述

vscode-icon

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

在这里插入图片描述

Path Intellisense

自动补全路径
在这里插入图片描述

vscode-fileheader

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

在这里插入图片描述

Color Info

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

在这里插入图片描述

filesize

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

在这里插入图片描述

HTML Boilerplate

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

在这里插入图片描述

关于vscode的所有内容看这里

系列文章

推荐