vscode学习

vscode编辑器技巧

1.快速打开命令行面板

Command + Shift + P （win：Ctrl + Shift + P）

2.在命令行中打开vscode

code + filename (如果不行检查环境变量中是否有添加vscode的bin文件夹)

3.光标移动

移动到行首 command + 左方向键 （win：Home键）

移动到行尾 command + 右方向键 （win：End键）

移动到文档的开头和末尾 command + 上下方向键 （win：Ctrl + Home/End）

回到光标上次的位置 command + u

4.复制、移动、注释、删除

复制代码：Option + Shift + 上下方向键 （win：Alt + Shift + 上下方向键）

移动光标行代码 Option + 上下方向键 （win：Alt + 上下方向键）

单行注释： Command + / (win：Ctrl + / ，取消注释同样)

块注释： Option + Shift + A （win：Alt + Shift + A）

删除代码 Command + Shfit + K 或者 Command + D （win：Ctrl + Shift + K ）

5.代码格式化

Option + Shift + F （win：Alt + Shift + F）

6.批量操作

  • 出现光标的同时按住Option(win:Alt),再点需要批量增减字符的地方，这时会出现多个光标就可以批量操作了
  • 也可以选中某个连续区域，Option + Shift + i (win: Alt + Shift + i),在区域中每行的末尾出现光标，同样可以批量进行操作

插件推荐

1.Atuo Rename Tag

自动重命名标签：

  • 在html文档开头输入!后按tab键（或者回车键），可以补全框架代码
  • 输入一个标签，会自动补全标签对
  • 修改一个标签，会同步修改与之成对的另一个标签
  • 输入div.box后回车会自动生成 <div class=”box”></div>

2.更好看的主题

Community Material Theme,选用其中的Community Material High Contrast

3.code runner插件

右键添加 run code 命令，可以方便执行代码

4.open in browser 插件

可以使html代码在浏览器中打开

5.gitignore插件

可以方便地将某个不需要git控制的文件加入.gitignore文件

6.vscode icons插件

通过图标可以使文件类型一目了然

7.Project Manager插件

  • 可以方便进行项目管理，装好后侧边栏会出现文件夹样式快捷按钮
  • 进行项目管理，首先要保存项目，在资源管理器打开的文件夹中ctrl+shift+p调出命令面板，选择Project Manager:save project
  • 保存多个项目后，可以方便地在不同项目间切换