前端开发常用插件

1.Bracket Pair Colorizer

Bracket Pair Colorizer 主要是用于高亮显示成对得大括号、花括号、小括号，点击其中一个括号，就能标识出成对的另外一个括号，并且用不同的颜色进行区分。

2.Auto Close Tag

自动闭合HTML/XML标签

3.Auto Rename Tag

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

4.Chinese (Simplified) Language Pack for Visual Studio Code

此中文（简体）语言包为 VS Code 提供本地化界面。安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 “config” 筛选可用命令列表，最后选择配置语言命令。

5.HTML CSS Support

HTML标签上写class智能提示当前项目所支持的样式

6.JavaScript (ES6) code snippets

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

7.Path Intellisense

Path Intellisense 可以自动提示和补全路径。

8.HTML CSS Support

智能提示CSS类名以及id

9.HTML Snippets

智能提示HTML标签，以及标签含义

10.Material Icon Theme

个人认为最好的vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致

11.Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

12.CSS Peek

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

13.Beautify

格式化 html ,js,css
配置链接

！！！！！！
我们可以利用vscode自动的功能格式化代码，暂且不用格式化插件，自动保存照样能格式化代码。

1. 点击管理按钮—选择里面的设置命令
   
2. 选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的2个按钮
   这样，我们不用安装插件，就可以自动保存自动格式化代码了。

14.Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

15.markdownlint

markdown语法纠错

16.open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
设置默认浏览器

17.Live Server

改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐各位小伙伴安装 live server 这个插件，修改完代码，自动更新浏览器，爽歪歪~~~
注意点：
使用live server 各位小伙伴要注意， 先用vscode 打开 文件所在的目录文件夹哦。

18.会了吧

是的，你没看错，这个插件的名字就是 <会了吧>
你是不是还在为英文单词不认识而发愁，是不是认识不会读而烦心， 这个插件你值得拥有。

19.Easy Sass

vscode 文件夹下建一个叫 settings.json 的文件（针对于当前项目的配置，全局的配置在全局的 settings.json 里添加）
settings.json 中配置内容如下：

"easysass.compileAfterSave": true, 
 "easysass.formats": [ //nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
"easysass.targetDir": "css/" //路径

可以在 文件–首选项–设置 搜索框中搜索easysass，点击setting.json文件中编辑,在文档的末尾添加上以上配置就可。

在工作区中新建两个文件夹，一个sass一个css，两个文件夹同级。

在sass文件夹中，新建一个scss文件。在scss文件中可以随意书写css样式。

保存后vscode会自动在css文件夹中生成两个文件，css文件和min.css文件

在平时开发时，引入css文件，正式上线时，引入min.css文件。min.css文件是将css中的空格，换行去掉，减小了文件的大小。

20.ESLint

21.Power Mode

22.px to rem & rpx (cssrem)