前端第一阶段 工具篇(vs code & chrome)

工欲善其事，必先利其器

VS Code 篇

I 工作空间：操作-打开vs code --> Open file

作用：绑定电脑的目录，这样就能自动同步编辑的代码

II 布局

拖动文件tag到右或下面。

或者

III 插件

IV 快捷方式

！enter或tab 生成html模板

 ctrl+P 跳转其它可编辑文件

 ctrl+F 查找关键字

全局查找并替换

ctrl + x  剪切 ctrl+c 复制   ctrl +v 粘贴     行

不需要全选

alt+上或下， 移动当前光标所处行到上或下

shift+alt+上或下 ，复制当前光标所处行到上或下

ctrl+enter 向下插入一行

ctrl+shift+enter 向上插入一行

ctrl + /  单行 注释/反注释

shift+alt+A 选中注释/反注释

alt+鼠标点击 选择多个光标点

ctrl+L 选中当前行

shift+上下左右  选中上下左右字符

ctrl+shift+L 选中所有出现的当前选择的文本

shift+alt+鼠标选择   矩形选择文本

ctrl+space 提示帮助（和输入法有冲突，已改ctrl+i）

shift+alt+F 格式化文本

F12 转到定义，如不跳转 alt+F12

div*3 生成3个div

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

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

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

chrome 篇

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i”   打开 开发者工具

菜单：   右击网页空白出--检查--找到问题代码在第几行

小技巧：

1. ctrl+滚轮 可以 放大开发者工具代码大小。

2. 左边是HTML元素结构   右边是CSS样式。

3. 右边CSS样式可以改动数值和颜色查看更改后效果。