22个前端必备VsCode插件推荐

工欲善其事，必先利其器。

基础插件

编辑器的上手配置

1

Chinese Language Pack for Visual Stidio Code

适用于VS Code的中文（简体）语言包新手建议先用中文熟悉，以后上手英文界面也不迟

2

open-in-browser

右键一件选择

在默认浏览器中打开当前页面

界面美化

好的代码始于颜值

1

vscode-icons

文件格式一目了然

左侧文件目录的文件夹和文件都会显示相应的图标

2

Prettier-code formatter

代码格式化

主要作用于JavaScript/TypeScript/Css

3

Beautify

代码格式化

主要作用于JavaScript/Json/Css/Sass/Html

视觉辅助

色彩选择和图片展示

1

SVG Viewer

无需离开编辑器就可以打开SVG文件并查看它们

同时还包含了用于转换为PNG格式和生成数据URL模式的选项

2

Color Picker

拾色器

直接在编辑器中选择合适的颜色

3

Vetur

vue语法高亮/格式化/代码片段/语法检查等

4

语法高亮

直接搜索对应的语言名称即可比如Html/Css/Es6/Sass/TypeScript/React等

智能补全

智能提示、补全、修正

1

Css Peek

右键单击选择器时，展示当前样式，可直接跳转到定义css的代码位置

2

Auto Close Tag

自动闭合Html/Xml标签

3

Auto Rename Tag

自动完成另一侧标签的同步修改

4

Path Intellisense

自动提示文件路径，支持快速引入文件

版本控制

Git or Svn

1

GitLens

git版本控制

2

Git Histroy

Git的详细信息和图表

3

SVN

SVN版本控制

程序调试

debugger

1

Debugger for Chrome

在编辑器中设置断点等调试，用于Chrome

2

Quokka.js

实时调试和展示

代码检测

协同工作和代码质量

1

ESlint

将ESlint集成到vscode中

2

npm

根据package.json定义的依赖验证已安装的模块

云端同步

一周24小时在线

1

Settings Sync

使用Github Gist同步多台计算机上的设置，代码段，主题，文件图标