20+前端常⽤的vscode插件（总结推荐）
本篇⽂章给⼤家总结分享20多个前端常⽤的vscode插件。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对⼤家有所帮助。
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使得插件⽣效。
当你不需要某个插件时只需要进⼊扩展，点击对应插件右下⾓的齿轮按钮即可选择禁⽤或卸载该插件。
2. 前端常⽤插件 (ps: 必备 > 推荐 > 了解)
必备的⼀定要装, 推荐的看⾃⼰需要, 了解的可不装
1.Auto Close Tag (必备)
⾃动闭合HTML/XML标签
2.Auto Rename Tag (必备)
⾃动完成另⼀侧标签的同步修改
3.Beautify (必备)
格式化 html ,js,css
  vue ⾥⾯配置⽅法和快捷键配置戳这⾥
另⼀款 Prettier
格式化JavaScript / TypeScript / CSS
配置教程戳这⾥
  4.Bracket Pair Colorizer (必备)
  给括号加上不同的颜⾊，便于区分不同的区块，使⽤者可以定义不同括号类型和不同颜⾊
  5.Debugger for Chrome (推荐)
  映射vscode上的断点到chrome上，⽅便调试
webstorm插件推荐调试⽅法戳这
  6.ESLint (推荐)
  js语法纠错，可以⾃定义配置，不过配置较为复杂，建议使⽤⽹上⼀些⼴泛使⽤的eslint配置，⽇后我也会专门针对eslint配置写⼀篇⽂章。
  7.GitLens(使⽤git的必备)
  ⽅便查看git⽇志，git重度使⽤者必备
使⽤教程
  8.HTML CSS Support (必备)
  智能提⽰CSS类名以及id
  9.HTML Snippets (必备)
  智能提⽰HTML标签，以及标签含义
  10.JavaScript(ES6) code snippets (必备)
  ES6语法智能提⽰，以及快速输⼊，不仅仅⽀持.js，还⽀持.ts，.jsx，.tsx，.html，.vue，省去了配置其⽀持各种包含js代码⽂件的时间
  11.jQuery Code Snippets (推荐)
  jQuery代码智能提⽰
  12.Markdown Preview Enhanced (推荐)
  实时预览markdown，markdown使⽤者必备
  13.markdownlint (推荐)
  markdown语法纠错
  14.Material Icon Theme (推荐)
  vscode图标主题，⽀持更换不同⾊系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持⼀致
极简主义是不需要的
另⼀套⽬录树图标主题 vscode-icons
使⽤⽅法，配置如下json
  15.open in browser (必备)
  vscode不像IDE⼀样能够直接在浏览器中打开html，⽽该插件⽀持快捷键与⿏标右键快速在浏览器中打开html⽂件，⽀持⾃定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
设置默认浏览器
建议使⽤及时显⽰渲染插件，在⽤户保存后，浏览器会⾃动渲染修改后的结果，省去⼿动渲染浏览器的操作
  16.Path Intellisense (必备)
  ⾃动提⽰⽂件路径，⽀持各种快速引⼊⽂件
  17.React/Redux/react-router Snippets (推荐)(react必备)
  React/Redux/react-router语法智能提⽰
补充两个
1) React-Native/React/Redux snippets for es6/es7
react代码⽚段，下载⼈数超多
2) react-beautify
格式化 javascript, JSX, typescript, TSX ⽂件
  18.Vetur (推荐)(vue必备)
  Vue多功能集成插件，包括：语法⾼亮，智能提⽰，emmet，错误提⽰，格式化，⾃动补全，debugger。vscode官⽅钦定Vue插件，Vue开发者必备。
补充两个:
1) VueHelper
vue代码⽚段
2) Vue TypeScript Snippets
vue的 typescript 代码⽚段
3) Vue 2 Snippets
vue 2代码⽚段
19.Dracula Official (推荐)
  很好看的⼀款主题风格
这样的
20.filesize (了解)
  查看⽂件⼤⼩
20.HTMLHint(了解)
  静态检查规则具体规则戳这
21. Class autocomplete for HTML (推荐)
智能提⽰HTML class =“”属性（必备）22. IntelliSense for CSS class names (推荐)智能提⽰ css 的 class 名
23. Npm Intellisense(node必备)
require 时的包提⽰
2021.6.7 新增:
24.indent-rainbow(代码必备)
使缩进更容易阅读
2021.7.1 新增
25.Comment Translate
英⽂选中翻译

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。