VS Code系列：（三）插件篇

前置知识
本文推荐插件，主要针对 web前端开发；
部分插件可能会因为版本更新等原因，会有所变化；
通用插件
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

 

转载：https://blog.youkuaiyun.com/Bumphy/article/details/79248361