1. 启动相关
1.1 open in browser
右键选择html文件,直接以默认浏览器运行当前静态网页
1.2 Live Server
模拟本地服务器,编写网页时保存后自动刷新,无需到浏览器中刷新
2. 编译器相关
2.1 Material Icon
改变编辑器里面的文件图标。系统内置的文件夹图标不能够区分不同类型文件件,使用这个插件可以使文件看起来更加一目了然的知道他的作用
2.2 Color Info
这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了
2.3 TODO Tree
在开发或者是review代码时,经常会碰到一些待处理或者待优化的场景,这个插件能帮你组织和管理 TODO 注释, 你在代码中注释的带 TODO 的标签会统一在侧边栏显示出来,点击标签可以跳转到文件对应的位置。当然不限于 TODO 注释,可以自定义管理标签比如 FIXME 等。插件默认有 TODO、FIXME、BUG 三个标签,我们也可以在设置中定义自己想要的标签
2.4 One Dark Pro
这是VsCode的主题,可以让代码高亮更加精美
2.5 Power Mode
代码特效插件,打开左下角settings,然后找到下图所示位置,打开文档,并添加配置 enabled用于启动该插件 shakeIntensity用于控制窗口抖动值,默认是6,如果希望不抖动,设置为0即可
{
...
"powermode.enabled": true,
"powermode.shakeIntensity": 0
}
3. 编码相关
3.1 vscode-faker
能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码,或者经典的乱数假文段落,并且每个类别还包含了各种子类别,你可以根据自身的需求来使用这些数据
3.2 Bracket Pair Colorizer
此插件作用可以让代码中不同的括号拥有不同颜色,让代码区分度更高
3.3 Prettier - Code formatter
各种前端代码的格式化插件,右键选择格式化即可
3.4 Auto Rename Tag
自动修改匹配的HTML标签,修改标签的时候前后匹配的标签可以一起修正
3.5 ESLint
JavaScript 语法纠错,可以自定义配置,也可以参照官网的配置,摆正开发者的代码格书写格式