VS Code 使用指南 [前端开发]
![在这里插入图片描述](http://img.e-com-net.com/image/info8/823ef3eaf8404566805cd47d98f92cb0.jpg)
VS Code 是一款来自Microsoft某团队的优秀的套壳浏览器(开源 免费 编辑器) 真香!
下载地址:https://code.visualstudio.com/
![前端、VUE开发 VS Code (10个常用快捷键、17个常用插件)_第1张图片](http://img.e-com-net.com/image/info8/0cf8bdbbd5284dd6b4d41c979bcd8eba.jpg)
快捷键
我常用的快捷键
- 打卡终端 CTRL + `
- 显示/隐藏侧边栏 CTRL + B
- 查找下一个(需要先选中) CTRL + D
- 格式化代码 ALT + SHIFT + F (实在不习惯 我修改为 CTRL + ALT + L)
- 注释代码 CTRL + /
- 向右缩进 Tab
- 向左缩进 SHIFT + Tab
- 向上向下复制一行 ALT + SHIFTt + Up 或 ALT + SHIFT + Down
- 同时选中所有匹配: CTRL + SHIFTt + L
- 打卡命令窗口 CTRL + SHITF + P
> Reload Window 重启窗口 (释放内存用)
-------------------------------------------------------分割线------------------------------------------------
2022更新
![前端、VUE开发 VS Code (10个常用快捷键、17个常用插件)_第2张图片](http://img.e-com-net.com/image/info8/bb336da4524347f7969da30f50b939c6.jpg)
![前端、VUE开发 VS Code (10个常用快捷键、17个常用插件)_第3张图片](http://img.e-com-net.com/image/info8/9b82d85022a3427daefa237834ae955e.jpg)
推荐
![前端、VUE开发 VS Code (10个常用快捷键、17个常用插件)_第4张图片](http://img.e-com-net.com/image/info8/817517703ccf4df8818c84cdd2a7d777.jpg)
-------------------------------------------------------分割线------------------------------------------------
下面是2019年
插件
1.Bracket Pair Colorizer
为代码中的各种结对的括号提供了颜色高亮
![在这里插入图片描述](http://img.e-com-net.com/image/info8/b3ceb769bf274da8a6f32e32d36952fe.jpg)
2.Chinese (Simplified) Language Pack for Visual Studio Code
界面汉化
![在这里插入图片描述](http://img.e-com-net.com/image/info8/4b6eb336bf78460aadad9c66f68a6ab8.jpg)
3.Code Runner
代码一键运行
![在这里插入图片描述](http://img.e-com-net.com/image/info8/bb2df54d3a80403385726e41bc15c0d3.jpg)
4.Dracula Official
一款吸血鬼配色主题
![在这里插入图片描述](http://img.e-com-net.com/image/info8/ca473e499a0b4649aa01e0cd788e7fd9.jpg)
5.Easy LESS
转换less文件
![在这里插入图片描述](http://img.e-com-net.com/image/info8/4eea5bf68acc48e9aa7b00d752b3b17a.jpg)
6.Git History
扩展GIT操作 墙裂推荐
![在这里插入图片描述](http://img.e-com-net.com/image/info8/06acbf3e37c341bb8c40713dcd8a19d1.jpg)
7.markdownlint
预览 编辑 markdown文件
![在这里插入图片描述](http://img.e-com-net.com/image/info8/a93e4f6a52b54b2f9a18655e07077c4e.jpg)
8.Material Icon Theme
美化 文件图标
![在这里插入图片描述](http://img.e-com-net.com/image/info8/354cf449ef93439b9c9e15d93f8dad99.jpg)
9.Debugger for Chrome
方便调试
![在这里插入图片描述](http://img.e-com-net.com/image/info8/3e4da32b236e437ebb489492a1acc83f.jpg)
10.Path Intellisense
导入文件 路径自动补全
![在这里插入图片描述](http://img.e-com-net.com/image/info8/ecc2f42e46b24d26b76d6bf5008139fe.jpg)
11.Prettier - Code formatter
格式化代码
![在这里插入图片描述](http://img.e-com-net.com/image/info8/5fac6b41687147c1ae77178347312bd6.jpg)
12.Reactjs code snippets
React代码提示
![在这里插入图片描述](http://img.e-com-net.com/image/info8/c53e4dcbf7024e289af9571ae7f257c1.jpg)
13.TypeScript Hero
辅助TS组织和导入
![在这里插入图片描述](http://img.e-com-net.com/image/info8/f4c171ceded448a3ae5ef2311f5a035b.jpg)
14.Vetur
代码高亮 格式化
![在这里插入图片描述](http://img.e-com-net.com/image/info8/332b43562e3e4208a32662722697c6f0.jpg)
15.Vue 2 Snippets
代码片段补全
![在这里插入图片描述](http://img.e-com-net.com/image/info8/89d83b151fad48f4bf39e9c4a92b1c83.jpg)
16.Vue VSCode Snippets
代码片段提示 依赖 Vue 2 Snippets
![在这里插入图片描述](http://img.e-com-net.com/image/info8/9e35d120ba5f4f199c8d9e754a87cfdb.jpg)
17.vue-helper
增强了对Element-UI,VUX,IVIEW进行写Vue和扩展的能力
重要的是 按住Ctrl点击方法名或事件名可以快速定位跳转到对应方法代码行
![在这里插入图片描述](http://img.e-com-net.com/image/info8/f9138a25f2cb4d73ba58ffd444ccaedc.jpg)