环境搭建-Visual Studio Code及常用插件安装、 Emmet语法示例

一、VsCode 下载安装

程序下载

1. 百度搜索vscode或者直接进入vscode官网：https://code.visualstudio.com
   
2. 点击Download进行下载
   

程序安装

1. 双击下载的VSCode程序进行安装
   
2. 选择同意点击下一步
   
3. 下一步
   
4. 下一步
   
5. 勾选创建桌面快捷方式，下一步
   
6. 点击安装
   
7. 等待安装中
   
8. 安装结束，点击完成。
   

二、VsCode 插件安装

插件安装

1、打开VsCode编辑器，点击扩展插件市场

2、语言包安装

输入chinese搜索安装Chinese (Simplified) Language Pack for Visual Studio Code插件，点击install安装

安装完毕重启编辑器即可变为中文

3、主题插件安装

输入one dark pro搜索安装One Dark Pro插件，点击安装

4、代码运行服务安装

输入live server搜索安装Live Server插件，点击安装

5、代码格式化插件安装

输入prettier搜索安装Prettier - Code formatter插件，点击安装

6、图标美化插件安装

输入vscode-icons搜索安装vscode-icons插件，点击安装

7、自动关闭标签插件安装

输入 auto close tag搜索安装Auto Close Tag插件，点击安装

8、语法提示增强插件安装

输入 html css support搜索安装HTML CSS Support插件，点击安装

9、代码片段插件安装

输入html snippets搜索安装HTML Snippets插件，点击安装

10、 输入 css peek搜索安装CSS Peek插件，点击安装

输入 css peek搜索安装CSS Peek插件，点击安装

11、智能感应CLSS和ID插件安装

输入intellisense for css搜索安装IntelliSense for CSS class names in HTML插件，点击安装

12、ES6代码片段插件安装

输入javascript(es6)搜索安装JavaScript (ES6) code snippets插件，点击安装

13、光标跳转插件安装

输入tabout搜索安装TabOut插件，点击安装

14、括号配对颜色插件安装

输入bracket pair搜索安装Bracket Pair Colorizer插件，点击安装

15、MARKDOWN插件安装

输入markdownlint搜索安装markdownlint插件，点击安装

16、MARKDOWN预览增强插件安装

输入markdown preview搜索安装Markdown Preview Enhanced插件，点击安装

17、 注释增强插件安装

输入better搜索安装Better Comments插件，点击安装

18、路劲嗅探器插件安装

输入path intellisense搜索安装Path Intellisense插件，点击安装

应用市场有很多好用的插件，等着你来发现！！！

三、Emmet语法实例

带出html5结构

写法：!+Tab

DIV带ID

写法：div#box+Tab
简写方式：#box+Tab

DIV带Class

写法：div.yf+Tab
简写方式：.yf+Tab

P标签带文本

写法：p{hello PHP}+Tab

标签上下级写法

写法：div>p>a+Tab

标签平级写法

写法：div+p+a+Tab

标签上下级加平级组合写法

写法：div>p^a+Tab

标签重复写法

写法：div*3+Tab

标签组合重复写法

写法：ul>li*3>a+Tab

标签带属性写法

写法：a[href="http://www.baidu.com"]{百度}+Tab

标签内容加序号写法

写法：ul>li{测试$}*3+Tab

标签内容加两位序号写法

写法：ul>li{测试$$}*3+Tab

标签内容从指定序号开始写法

写法：ul>li{测试$$@4}*3+Tab

标签内容从指定序号反向开始写法

写法：ul>li{测试$$@-4}*3+Tab

样式中宽度写法

写法：w200+Tab

样式中背景颜色写法

写法：bgc+Tab

掌握好 Emmet语法可以高效快捷的写出前端代码，能有效地提高工作效率，文章只演示了部分 Emmet语法，需要进阶的小伙伴可以去查询相关资料哦~