![e3dc98649b67ebb11902b347f9adab89.png](https://i-blog.csdnimg.cn/blog_migrate/96ff060a2856c75562cbbd8ff4bd931e.jpeg)
1. vscode 简介
- vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。
- 当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。
- 比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;
- 比起sublime,vscode颜值更高,安装配置插件更为方便;
- 比起atom,vscode启动速度更快,打开各种大文件不卡。
- 可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。
- 可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。
- vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。
![50af42d41b204d69bd232b4c95fa5f38.png](https://i-blog.csdnimg.cn/blog_migrate/2bd0848d3765a80633f70b5618f924f4.jpeg)
当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。
![0ddd70160091e3dae538ad91a7aab781.png](https://i-blog.csdnimg.cn/blog_migrate/6aa679a211dae89763cde856980e4de8.jpeg)
2. 前端常用插件 (ps: 必备 > 推荐 > 了解)
必备的一定要装, 推荐的看自己需要, 了解的可不装 !!!
1.Auto Close Tag (必备)
自动闭合HTML/XML标签
![a1ea9005d2925f5d00266b06133476ce.png](https://i-blog.csdnimg.cn/blog_migrate/c9e79d2e2e9652d5aa2436b677a32dbf.jpeg)
2.Auto Rename Tag (必备)
自动完成另一侧标签的同步修改
![d0c7ba88ff286727420fcda94eef9029.png](https://i-blog.csdnimg.cn/blog_migrate/9a91544ce55cddcb570c61bed8b4fae5.jpeg)
3.Beautify (必备)
格式化 html ,js,css
vue 里面配置方法和快捷键配置 戳这里
![c55400f62d0120c5fec566fdd464d8f8.png](https://i-blog.csdnimg.cn/blog_migrate/b4bce55d16b9556c0d55ede2b2ff15e5.jpeg)
另一款 Prettier
格式化JavaScript / TypeScript / CSS
配置教程 戳这里
![6cb5ff10c270454c5ca68da0fde7ab59.png](https://i-blog.csdnimg.cn/blog_migrate/d65674df33a4aeefb84d3d7d39c26b24.jpeg)
4.Bracket Pair Colorizer (必备)
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
![6731b17967785ec5865d01cb7bcfa852.png](https://i-blog.csdnimg.cn/blog_migrate/8f2eba3c5d407b865ced18d5c1225595.jpeg)
5.Debugger for Chrome (推荐)
映射vscode上的断点到chrome上,方便调试
调试方法戳这
![f112e19ab1ac66a8a3561b6e639e5ce3.png](https://i-blog.csdnimg.cn/blog_migrate/5a18c3aff864b70563d7331fac569a7f.jpeg)
6.ESLint (推荐)
js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。
![569e4cfb6acef0c0a5edb1cd954fbd8c.png](https://i-blog.csdnimg.cn/blog_migrate/5bdbbb6fe7a2d1e57c3a98f8723f9d11.jpeg)
7.GitLens(使用git的必备)
方便查看git日志,git重度使用者必备
使用教程
![c773cdc9e4e3795f60e5eb101ef27e3a.png](https://i-blog.csdnimg.cn/blog_migrate/2c10a92b9ae0262fb276728148178def.jpeg)
8.HTML CSS Support (必备)
智能提示CSS类名以及id
![b3dd9f9f15d5c85b8745ed77c334d616.png](https://i-blog.csdnimg.cn/blog_migrate/09210a9e72c7c24ac1a2fa3d3985a740.jpeg)
9.HTML Snippets (必备)
智能提示HTML标签,以及标签含义
![304aac663a36536f04bb5c94f23bc042.png](https://i-blog.csdnimg.cn/blog_migrate/351c1c16cae95c5f5997c64bdee5221a.jpeg)
10.JavaScript(ES6) code snippets (必备)
ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
![73a2b35e9a68b04d09bb6ffeb366cbd5.png](https://i-blog.csdnimg.cn/blog_migrate/2d15a77b12597d5c916894d4fbb0119d.jpeg)
11.jQuery Code Snippets (推荐)
jQuery代码智能提示
![817fa5805b1b91551d87490131907eba.png](https://i-blog.csdnimg.cn/blog_migrate/a1d1a7e48688ec17888d3805e973e218.jpeg)
12.Markdown Preview Enhanced (推荐)
实时预览markdown,markdown使用者必备
![22b56d636a76a7a753ff67fa820ae50f.png](https://i-blog.csdnimg.cn/blog_migrate/4822e1a72a6e4c90c8b11c54fefaeefb.jpeg)
13.markdownlint (推荐)
markdown语法纠错
![999138014422ba8eee99e91b8f308827.png](https://i-blog.csdnimg.cn/blog_migrate/00cfc39291a1b67704a73e23943760e5.jpeg)
14.Material Icon Theme (推荐)
vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致
极简主义是不需要的
![4ab9731b86bb14b4f9e95bcd62dd4ef2.png](https://i-blog.csdnimg.cn/blog_migrate/d286d681f61faeeede3ccfe865750cd5.jpeg)
另一套 目录树图标主题 vscode-icons
![aa7161f1b4f15c1134ca71612688366a.png](https://i-blog.csdnimg.cn/blog_migrate/de9bef03c743ff645076c2d46b405a98.jpeg)
使用方法,配置如下json
![5b96dd56cf88194ee1c8fb5335dc778c.png](https://i-blog.csdnimg.cn/blog_migrate/1d96cff79f4ec3b404c10fbdd8daa622.png)
15.open in browser (必备)
vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
![4226be95d8198c3d3519416cc4cb4287.png](https://i-blog.csdnimg.cn/blog_migrate/4ac53bf0cf0580c62f64166702d8af85.jpeg)
设置默认浏览器
![7503a369496e1565c6d7b08e63183ccc.png](https://i-blog.csdnimg.cn/blog_migrate/147c7d2145393832e371904e8bea293e.jpeg)
16.Path Intellisense (必备)
自动提示文件路径,支持各种快速引入文件
![40ec94011e96badb74dbed928b423e26.png](https://i-blog.csdnimg.cn/blog_migrate/3f8b09ac95b241b2223061dc852b8212.jpeg)
17.React/Redux/react-router Snippets (推荐)(react必备)
React/Redux/react-router语法智能提示
![f9e12e8bde939b68fc2c7caf0b6e480c.png](https://i-blog.csdnimg.cn/blog_migrate/c55a581b0596d8c25ef2df9f082a7273.jpeg)
补充两个
1) React-Native/React/Redux snippets for es6/es7
![3d03fc2800d6b283a0975c5bda3991e2.png](https://i-blog.csdnimg.cn/blog_migrate/f6fce8be70c6d3001b03383e0a49ced9.png)
2) react-beautify
![db4a8136e258a0f4e8c66bd86dff42d8.png](https://i-blog.csdnimg.cn/blog_migrate/2982c92bb9be55cb29743d3d0e1c5c57.png)
18.Vetur (推荐)(vue必备)
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
![77d0e7457b999d894e4e427c95670bed.png](https://i-blog.csdnimg.cn/blog_migrate/b378460731bf976d5f76a5e846dac44b.jpeg)
补充 两个:
1) VueHelper
![45bf6c757d5c051a65c4a990fbd43e58.png](https://i-blog.csdnimg.cn/blog_migrate/c66d2402aba46c99616c50ffee3a7af8.png)
2) Vue TypeScript Snippets
![50b6cff027fd488023d027a893a376e6.png](https://i-blog.csdnimg.cn/blog_migrate/8252796ad8b9e7c3db26820f2cc392c3.png)
3) Vue 2 Snippets
![40fe680f965fb963ab57f24e07dfe2f1.png](https://i-blog.csdnimg.cn/blog_migrate/7ce2bd4203bad8756e24027ef8e210ae.png)
19.Dracula Official (推荐)
很好看的一款主题风格
![a364b494f013cc257afe58d829695a69.png](https://i-blog.csdnimg.cn/blog_migrate/bfc1045eebc7ebf69777cda172b1f232.jpeg)
这样的
![62c34cdd098d73c0b77dcf45b5a97c15.png](https://i-blog.csdnimg.cn/blog_migrate/cb584953f67350fdb2fccf9b5b7c617e.jpeg)
20.filesize (了解)
查看文件大小
![a03c79d1da735caefe1123514847a7c5.png](https://i-blog.csdnimg.cn/blog_migrate/661bac1de3866db1505f72d7f545439a.jpeg)
20.HTMLHint(了解)
静态检查规则 具体规则戳这
![678287ac2b1e481fa3315eedf65245ef.png](https://i-blog.csdnimg.cn/blog_migrate/e6916479370d7a57b692ac37fbc1f2dc.jpeg)
21. Class autocomplete for HTML (推荐)
智能提示HTML class =“”属性(必备)
![5ac3ac8e559903bca63d1e1b5a8943d7.png](https://i-blog.csdnimg.cn/blog_migrate/f523cd396bc6a6a9d540769195fecc77.jpeg)
22. IntelliSense for CSS class names (推荐)
智能提示 css 的 class 名
![fe75ff197f1bedc0107b861c07fb8d20.png](https://i-blog.csdnimg.cn/blog_migrate/bea4610484ae55ea940ed9516a04853e.jpeg)
23. Npm Intellisense(node必备)
require 时的包提示
![42071a8de689b321bf3b413e6cf50b8f.png](https://i-blog.csdnimg.cn/blog_migrate/32e1864d6836486c396cf6b8046dd18c.jpeg)
如果还有好的插件我会随时补充 ~~~
ps : 下面是一些常用的json 配置
![4b4807e9bdd1029923aba9fd74ffa59d.png](https://i-blog.csdnimg.cn/blog_migrate/9134f4c6eb23be7d89a175194bdcdfe5.jpeg)
————————————————
版权声明:本文为CSDN博主「懂懂kkw」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
vscode前端常用插件推荐_jiandan1127的博客-CSDN博客blog.csdn.net![506e0b573a3147f7ae7a8a9d53fdc14a.png](https://i-blog.csdnimg.cn/blog_migrate/4218196e319e1afa5fab67477132abcf.png)