Visual Studio Code -- 插件篇

Visual Studio Code -- 插件篇

@(blog-)

---

目录

[TOC]

---

前端通用

View In Browser

View In Browser

• 功能
  • 预览HTML页面
• 使用说明
  • 安装之后，在 html 文件中按 Ctrl+F1

---

HTML Snippets

HTML Snippets

• 功能
  • HTML代码提示
• 演示
  • 

---

HTML CSS Class Completion

HTML CSS Class Completion

• 功能
  • 扫描项目中的所有css中的class名，在html中自动补全，安装后每次打开自动启用。
  • 注意：如果css过多容易卡死。
• 演示

---

HTML CSS Support

HTML CSS Support

• 功能
  • 增加 .html 中css的代码补全，可以手动增加配置文件来增加外部css中的class补全。
  • 这个和上一个的功能差不多，推荐使用这个。
• 演示
  • 

---

Path Autocomplete

Path Autocomplete

• 功能
  • 路径自动补齐
• 演示

---

Auto Rename Tag

Auto Rename Tag

• 功能
  • 自动同步修改标签
• 演示

---

Debugger for Chrome

Debugger for Chrome

• 功能
  • 集合Chrome进行调试

---

beautify

beautify

• 功能
  • 格式化代码

微信小程序

vscode-wechat

vscode-wechat

• 功能
  • 用vscode开发微信小程序
  • 支持 wxml、wxss 语法高亮
  • 页面预览
• 使用说明
  • 启动项目后按 Ctrl + f8 就可以开启预览功能

颜值控

Material-theme

Material-theme

• 功能
  • 一个挺好看的代码高亮主题。
• 演示
  • 

---

vscode-icons

vscode-icons

• 功能
  • 侧栏的图标
• 使用说明
  • 安装之后，按下图进行操作：
  • 
• 演示
  • 

---

background

vscode-background

• 功能
  • 一个萌萌的插件，可以自己设置vsc的背景图。
  • 备注：安装之后，卸载，还是更换了背景图。
• 演示