前端开发工具——VScode的使用

1、双击打开软件。

2、新建文件(Ctrl+N).

3、保存(Ctrl+S),保存为.html / .css / .js的文件。

4、Ctrl+加号键,Ctrl+减号键,和放大缩小视图。

5、快捷生成页面骨架结构(输入!按下 Tab 键)。

6、在浏览器中预览页面:单击鼠标右键,在弹出窗口中点击“Open In Default Browser”。

Emmet语法

快速生成HTML结构语法

        1.生成标签直接输入标签名按tab键即可比如 div 然后tab键,就可以生成

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

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

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

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

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

.demo$*5

        7.如果想要在生成的标签内部写内容可以用 {} ,然后按 tab键

div{文字}

快速生成CSS样式语法

CSS基本采取简写形式即可.
        1.比如w200 按tab可以生成width: 200px;

         2.比如Ih26按tab 可以生成line-height: 26px;

快速格式化代码

Vscode快速格式化代码: shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码:
        1 、文件------> [首选项] -------- >[设置]
        2、在搜索中输入format,点击格式化,将其中按需求勾选即可。

你可能感兴趣的:(前端,vscode,编辑器)