VS Code系列：（三）插件篇

前置知识

1. 本文推荐插件，主要针对 web前端开发；
2. 部分插件可能会因为版本更新等原因，会有所变化；

---

通用插件

• HTML CSS Support

html 标签class属性等 智能提示
新版已经支持scss文件检索

标签

• Auto Close Tag

  自动闭合标签【HTML/XML】

• Auto Rename Tag

  改变标签时，同时自动修改闭合标签【HTML/XML】

格式化

• beautify

  可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用

• Prettier

  用于代码格式化，将整个 JS 和 CSS 文档快速格式化为统一的代码样式。
  如果还想使用 ESLint，可以试试 Prettier – Eslint 插件

CSS相关

• SCSS IntelliSense Preview

  SCSS智能提醒，配置强大

• CSS Peek

  使用此插件，可以跳转至样式表中 CSS 类和 ids 定义的位置。
  在 HTML 文件中右键单击选择器，选择“ Go to Definition 和 Peek definition ”选项，便会跳转到相应的 CSS 代码处。

浏览器

• open in browsers

  在浏览器中打开，默认快捷键：Alt+Shift+B

• Debugger for Chrome

注释

• Document This :

  JS文件头部添加文档注释

• vscode-fileheader

  HTML添加头部文档注释，看情况使用，我是不会告诉你，你是在给自己加戏。。。

路径

• Path Autocomplete

  路径智能补全

• Path Intellisense

  路径智能感知

颜色

• color picker

• color info

  悬停于颜色代码之上时，会显示相应的样式颜色信息（HEX、 RGB、HSL 和 CMYK）；

• Colorize

  给颜色代码匹配一个相应的背景颜色，更加直观；

• Output Colorizer

  可以给终端日志输出着色

• Bracket Pair Colorizer

  自动标识相匹配括号的颜色，有利于区分

代码片段

• HTML Snippets

  H5代码片段以及提示

• JavaScript (ES6) code snippets

  ES6的代码片段，实用

• JavaScript Snippet Pack

  ES5及以下的代码片段，实用

语法校验

• ESLint

  大名鼎鼎的代码检查工具，提高我们代码质量

• stylelint

  用于css/scss/less语法检查

• Regex Previewer

  实时测试正则表达式

• Quokka.js

  调试工具插件，能够根据你正在编写的代码提供实时反馈

Git相关

• GitLens

• Git History

markdown

• markdownlint

  Markdown / CommonMark linting 和 样式检查

• Markdown-TOC

  为当前文本添加头部目录

• Markdown table prettifier

  表格格式化

• markdown preview Github’s styling

  github 样式风格的预览效果

• Markdown PDF

  markdown 格式保存为 PDF 格式

其他

• Syncing

  这个同步插件要比官方市场那个最高下载量的要好，支持删除同步！

• Minify

  用于压缩合并 JavaScript 和 CSS 文件

• Version Lens

  可以查看 package.json 内部版本的变动信息

• Code Runner : 代码编译运行看结果，支持众多语言

• SVG Viewer

  查看SVG 文件

---

框架插件

（1）vue

• vetur

  语法高亮、智能感知、Emmet等

• VueHelper

  snippet代码片段

（2）React

• React Native Snippet

  RN 代码片段

• ES7 React/Redux/GraphQL/React-Native snippets

  如标题所示,涵盖的代码片段贼丰富

主题插件

（1）图标插件

• vscode-icon 图标主题

  给vscode 资源树目录和文件添加图标，颜值爆表，一目了然！

• Material Icon Theme

  同样是一款炫酷的 icon 主题

• simple icon

（2）主题插件

• dracula 主题

  个人最喜欢的一款主题，一直在用

• Panda 主题

  不错的一款，用过一段时间，蛮可爱的

（3）关于主题插件

主题插件还有很多，不限于这些呦，
主题插件的选择，因人而异，毕竟每个人的审美不同，但是对于颜值问题应该是每个前端的追求，不是吗？没错，就是要颜控！！！

有趣的插件

• Emoji Code

  表情

• background

  比较骚气