[效率up]vscode前端插件分享

Part1前言

分享一些我本人正在使用的vscode的前端相关的插件，不过平时我也会经常用webStorm，后面会再出一篇文来介绍我的webStorm安装的插件。

Part2编码实用

这部分的主要是一些通用的，在写代码时能提高效率的插件。

• Bracket Pair Colorizer (必备)

  给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

  

  BorderBackground

• Auto Close Tag （必备）

  自动闭合HTML/XML标签

• Auto Rename Tag (必备)

  自动完成另一侧标签的同步修改

• Path Intellisense (推荐)

  文件路径补全

Part3测试部署

这部分的插件主要是用于平常的各种调试，部署配置辅助。

• Live Server(必备)

  轻量级的web服务器，可以直接在5500端口运行加载html文件

• Code Runner(必备)

  可以右键直接点击run script等操作，快速运行脚本调试

• NGINX Configuration Language Support(推荐)

  如果和nginx配置文件打交道是不可避免的，它能给你相关提示和补全。

• Debugger for Chrome(推荐)

  映射vscode上的断点到chrome上，方便调试

Part4CSS常用

主要用于css辅助的插件。

• Easy LESS (推荐)

  编写less文件，保存时自动编译出css文件

• px to rem & rpx (cssrem) (推荐)

  px转换为rem

• CSS Tree (推荐)

  从选定的 HTML/JSX 生成 CSS 树

• CSS Peek (推荐)

  查看dom元素时，可根据id和class快速查看到其css样式

Part5js常用

主要用于js辅助的插件。

• jQuery Code Snippets (必备)

  jQuery代码智能提示

• JavaScript (ES6) code snippets (必备)

  es6代码片段，快速补全

• Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile (必备)

  轻易地编译ts, tsx, scss, less, stylus, jade, pug和es6+，在保存时自动编译

• IntelliSense for CSS class names in HTML (推荐)

  它根据工作空间或通过link元素引用的外部文件中的定义，为HTML类属性提供CSS类名补全

Part6React开发

• React-Native/React/Redux snippets for es6/es7 (必备)

  React-Native/React/Redux的代码片段，助你快速补全

• React Native Tools (推荐)

  React Native的调试和集成命令

• Typescript React code snippets (推荐)

  此扩展包含 React with Typescript 的代码片段

Part7Vue开发

• Vetur (必备)

  必备的vue开发插件！有语法高亮、智能感知、Emmet等功能。

• vue (必备)

  vue代码高亮

• Vue 3 Snippets（必备）

  这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。

  

  img

• Element UI Snippets (必备)

  elements -UI的代码片段，用于Vue2

Part8小程序开发

• minapp (必备)

  微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

• wechat-snippet(推荐)

  微信小程序代码辅助,代码片段自动完成

Part9客户端前端

客户端前端的我做得很少，目前我只装过一个flutter的。

• Flutter（推荐）

  写flutter必备，我只能这么说了。

Part10代码排版审查

这里的是web前端比较通用的排版和代码审查的插件。

• Beautify (必备)

  一键排版美化html,js,css

• ESLint (必备)

  作为前端人，eslint的重要性就不多说了，很好用的代码规范和错误检查工具

• Prettier(必备)

  它通过解析您的代码并使用自己的规则重新打印它来强制执行一致的样式，这些规则将最大行长度考虑在内，并在必要时包装代码。对前端多种格式的文件都提供排版支持。

Part11包管理

我的包管理工具主要使用的是npm，插件也主要用于支持npm。

• npm（必备）

  此扩展支持运行 package.json 文件中定义的 npm 脚本，并根据 package.json 中定义的依赖项验证已安装的模块。

• npm Intellisense（必备）

  自动完成导入语句中的 npm 模块的 Visual Studio Code 插件。

Part12vscode美化

编译器好看，写代码的时候，心情也会变得更好哟~

• background (推荐)

  自定义背景哟，如果是肥宅的话，搞点二次元背景是很正常的事情吧

  

• Material Icon Theme (推荐)

  个人认为比较好看的一套icon风格