VS Code的基本快捷键（一）

1. 快速生成标签

英文 + tab

2. 保存文件

ctrl + s

• 注意1：写完文件之后务必需要保存文件，否则网页无变化

• 注意2：可以设置自动保存省去每次保存的麻烦

3. 快速查看网页效果：

右击 → Open in Default Browser

• 快捷键：alt + b

• 注意：必须安装了open in browser 插件

4. 快速生成结构标签：

! + tab

• 注意1：!必须是英文的，中文!无效

• 注意2：必须保证当前文件后缀名是.html，否则无效 • VS Code自动生成的骨架多了其他标签，之后会介绍

5、emmet语法之快速生成HTML结构语法

生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>

如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

如果有父子级关系的标签，可以用 >  比如   ul > li就可以了

如果有兄弟关系的标签，用  +  就可以了 比如 div+p  

如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了

如果生成的div 类名是有顺序的， 可以用 自增符号  $ 

如果想要在生成的标签内部写内容可以用  { }  表示

6、emmet语法之CSS 基本采取简写形式即可

比如 w200 按tab 可以 生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

7、格式化代码

shift+alt+f  快捷键

 保存页面的时候自动格式化代码：

        1）文件 ------.>【首选项】---------->【设置】；

        2）搜索emmet.include;

        3）在settings.json下的【工作区设置】中添加以下语句：

                ​"editor.formatOnType": true,

                ​"editor.formatOnSave": true

8、同时编辑多个标签

按住Alt键 选中想要编辑的标签，选中后就可以直接编辑了

同时也可以选中文字（当文字格式与标签格式相同时）

例如：

 

ctrl+x剪切

 

ctrl+v粘贴

 

 9、快捷键注释

ctrl+/

10、图片选择快捷方式：

同级目录与下级目录：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

上级目录：：直接敲../后，会自动提示上级目录下有文件，直接选择即可！