VSCODE前端常用插件

118 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;比起sublime,vscode颜值更高,安装配置插件更为方便;比起atom,vscode启动速度更快,打开各种大文件不卡。可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。

  1. Class autocomplete for HTML,自动补全HTML;
  2. beautify,格式化代码;
  3. HTML Snippets,html标签;
  4. Can I Use,检测所写代码能否在相应容器正常编译执行;
  5. JavaScript Snippet Pack,js的常用语法关键字;
  6. HTML CSS Support,自动补全样式功能
  7. Auto Close Tag,写完开始标签,自动补全结束标签;
  8. Auto Rename Tag,修改标签名称的时候自动修改结束标签;
  9. Path Intellisense,自动路劲补全;
  10. Debugger for Chrome: vscode 映射 chrome 的 debug功能
  11. Vetur , Vue语法高亮、智能感知、Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
  12. JavaScript(ES6) code snippets , ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
  13. Material Icon Theme,这款主题叫做 Material Icon Theme,它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面。而且在暗黑模式下使用效果更佳。
  14. Bracket Pair Colorizer:一个可定制的扩展,用于为匹配的括号着色
  15. .ES7 React/Redux/GraphQL/React-Native snippets:使用ES7语法在JS/TS中对React、Redux和Graphql进行简单扩展
  16. Simple React Snippets:react代码提示
  17. React Native Tools:react代码调试工具
  18. Vue 3 Snippets:vue3 语法提示