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自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。
- 点击管理按钮—选择里面的设置命令
- 选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的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)