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

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

➢ 版本控制

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同步多台计算机上的设置，代码段，主题，文件图标