快捷键
ctrl + shift + p ⇒ 调出设置框
![](https://file.jishuzhan.net/article/1766148042735489026/75cdfe4e8bfaea726cd8f3c9d42d123b.webp)
安装语言插件
安装好之后 会变成灰色
修改主题Theme
![](https://file.jishuzhan.net/article/1766148042735489026/0cf2abecf04bf38072d0aa12c7616287.webp)
配置前端 js css html vue等
推荐视频地址
学废了,VS Code 网页前端开发的配置与插件
ps: 直接输入 ! tab就可以生成html 模板
使用右箭头嵌套也可以生成
配置同步修改标签功能
![](https://file.jishuzhan.net/article/1766148042735489026/2da491ee2329f31c1dd3c0ba424b9113.webp)
勾选Linked Editing
添加中文插件
![](https://file.jishuzhan.net/article/1766148042735489026/0a7e7906cb875a87ef1f5a68ed0a927e.webp)
![](https://file.jishuzhan.net/article/1766148042735489026/05d64fabc7b54b3371ff93bfdf490f9c.webp)
安装前端使用浏览器调试插件
![](https://file.jishuzhan.net/article/1766148042735489026/43c49dc1d8f044c235949e5550201e34.webp)
安装前端代码格式化插件
也可以用快捷键 alt+shift+F 格式化代码
![](https://file.jishuzhan.net/article/1766148042735489026/3cbbb00be7798e51ff5d08b6c41dacf3.webp)
将这里的默认工具选成prettier
![](https://file.jishuzhan.net/article/1766148042735489026/ca2355cb889f0567f474a92b0cbaed4e.webp)
勾选Format On Save ⇒ 保存的时候会自动格式化代码
ps:多人开发的大型项目最好把代码格式化关了
安装自动定位css样式插件
![](https://file.jishuzhan.net/article/1766148042735489026/63ca3403f4357b0bc5175688b300e542.webp)
安装代码快速插入
![](https://file.jishuzhan.net/article/1766148042735489026/136398fe01749ae7b0bd2712e21d2a0d.webp)
添加括号颜色变化插件
最新版本已经这个插件内置进了VScode中
![](https://file.jishuzhan.net/article/1766148042735489026/29ad03433e0f88b0ae9e6957d76ec0d0.webp)
在回调地狱里可以看清当前的代码是在哪个代码块内
vue插件
vue2版本目前最好用的插件 vetur