Vscode个人推荐前端开发必备插件

本人是Vscode编辑器的死忠粉，那漂亮的界面，那可迎合自身习惯高度自定义的插件，爱了爱了...下面是多年来使用Vscode自己总结的前端开发非常非常实用的插件，其中很多不局限于前端，适用于所有人

一、全局插件

全局插件并不局限于项目使用的技术栈，是所有前端项目甚至其他语言都适用的插件，是我本人必装的插件

1.1 Chinese(simplifled) Language 中文（简体）

作用：软件汉化插件，英语渣必备

如果英语差的，在下载安装后第一件事情便是装此插件，将软件汉化一下，用起来舒心许多

1.2 Vscode-icons

作用：用于美化文件和文件夹图标，可以让我们的开发更舒心

效果：使用前系统图标表现力没那么丰富，使用后明显不一样，美观多了

1.3 Path Intellisence

作用：路径提示插件，有些时候编译器不能根据输入的路径前缀提示文件，自己输入有可能会出现忘记、漏输等情况，这个插件能很好的帮助到我们

使用前：

可能会出现以下情况，输入前缀后并不提示

使用后：

出现提示，并且还能显示Vscode-icons的图标美化效果

其实现在编辑器都会自动实现路径提示功能，但是有个别情况下出现提示不了的情况下，可以使用此插件补充

1.4 Beautify

作用：顾名思义，可以让你的代码更美观，有色觉上的不同颜色高亮

使用后：

1.5 Live Server

作用：一个前端开发的神器，可以将项目代理到本地服务器运行

很多时候，我们我项目中有任何请求网络资源行为，就不能在本地文件运行，因为file://协议无法发送网络请求

这时候就要将文件运行为http://127.0.0.1上，安装此插件后，可以非常简单的实现

上图中两种方法都能启用代理

1. 右键Html文件，点击Open with Live Server即可代理此文件页面
2. 点击界面右下角的Go Live按钮即可代理整个项目

1.6 Bracket Pair ColorIzer

作用：括号对高亮提示

很多时候我们都会因为嵌套结构中的()、{}而头晕，这个插件能帮助我们更好的辨识括号对

在使用前，左右的括号都是一种颜色，不容易看出多了还是少了括号

使用后，每一个括号对都用不同颜色标识，一眼就能看出来问题所在

1.7 Eslint

作用：起规范代码的作用，对待吗进行严格的检查

让很多人又爱又恨，爱是因为他们规范我们的代码，让我们写出漂亮的代码格式，恨则是因为只要多个逗号之类的他便会报错而使项目无法运行，必须要解决后才能运行

这里要注意可能会跟Vetur插件有点功能冲突，下面一节细讲

1.8 Color Highlight

作用：使代码中涉及的色块代码清晰的展示出色块，支持RGB/RGBA 色值及单词描述色块

1.9 VS Code Counter

作用：代码计数器，可以看到项目中写了多少有效代码

1.10 TODO TREE

代码事项提示树

它会在右侧增加一个菜单栏，里面陈列代码中使用到 // TODO XXX 标签的所有代码标记

![image-20220218112432145](http://oss.yitian2019.cn/img/image-20220218112432145.png

如果有些代码没办法一次性完成，需要等待的话，以便于下次能快速定位到该位置，建议养成使用// TODO 的习惯，将位置打上标记

---

二、HTML+CSS+JS

2.1 HTML CSS Support

作用：HTML，CSS基础代码补全，节点提示

2.2 jQuery Code Snippets

作用：jquery代码补全

在引用了jquery包的项目中使用，输入jq+关键词即可显示出jQuery方法的各种提示

三、Vue

3.1 Vue 2 Snippets

作用：vue 2.x 版本的代码补全

3.2 vue-helper

作用：vue代码提示

1.可能是目前vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码提示

2.代码高亮，在vue文件中<template>部分支持html/jade/pug的高亮，style部分支持css/scss/less/stylus的高亮，script部分支持js/ts的高亮！对于我来说足够了！

可以和Vue 2 Snippets 补充使用

3.3 vue-beautify

作用：vue代码美化，快捷键是ctrl + shift + F

3.4 Vutur

作用：这是个代码格式化工具，可以很方便也用快捷键格式化、对齐我们的代码，让我们不规范的代码瞬间变得高大上

没有这个插件的话，想要过Eslint的代码规范检查有点困难，安装了之后只需要简单使用快捷键shift + alt + F即可解君愁

上面代码中，红色波浪线处就是Eslint检测报错的地方，其实代码逻辑没错，只不过不符和stander代码规范，这时候只要使用快捷键shift + alt + F，或者右键选择格式化文档即可

一瞬间全搞定

注意：上一节中有说到一个冲突问题

就是使用Vutur格式化代码时，他会自动在一些地方句末给你加上,、;等这些符号，本身没什么大问题，但是在stander规范中是不允许的，否则就是波浪线警告。这个很致命，当代码一多情况下，想自动格式化一下代码，出现那么多莫名其妙的逗号，头大

这个问题解决方式也很简单，只要在setting.json 文件中加上以下配置即可

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": false,                         // 格式化不加分号
    "singleQuote": true                // 格式化以单引号为主
  }
},
//分号和双引号确实不会再自动添加了，但是不会在方法括号之间插入空格，可以再加入这条配置即可
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,      
"vetur.format.defaultFormatter.js": "vscode-typescript",

完美解决

四、React

4.1 ES7+ React/Redux/React-Native snippets

Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

React 开发必备的格式化代码插件

4.2 vscode-styled-components

作用：使用 styled-components作为项目样式结构时必备插件，提供样式代码提示

五、Git

5.1 GitLens — Git supercharged

作用：Vscode 可视化 Git操作插件，可以在菜单栏中加入一个 Git操作菜单，方便可视化操作 Git，可以配合其他插件使用

个人认为最方便的就是可以有效跟踪本地代码距离上一次提交之后的代码操作，非常有用

5.2 Git History

作用：跟踪记录每一个文件的修改记录，方便冲突回溯及责任定位

很多时候自己确认无误的代码被篡改了，导致出现 BUG，这里就能追查到谁改了代码提交了

也能防止改了一些边缘代码并未触碰到关键代码，而被甩锅担责的情况

有了这，简直 ‘甩锅’，‘防甩锅’ 必备

安装好插件之后，到目标文件下右键 Git:View File History 即可查看历史操作

5.3 git-commit-plugin

注：此插件需要配合 GitLens — Git supercharged 使用

作用：方便对每次提交的标注进行提示分类及美化图标

长期使用，对养成规范化提交代码很有帮助

先暂时写到这，有时间再做补充 最后更新于：2022-02-18