Visual Studio Code的使用

Visual Studio Code的使用

一、安装

下载地址：https://www.visualstudio.com/

安装属于傻瓜式的，只要注意不要安装在C目录就行。

注意：cscode的配置文件保存在：C:\Users\start\AppData\Roaming\Code目录中，如果页面或者哪些地方调整错误的，可以将这个文件删除，重新启动vscode，在重新设置就可以了。

二、使用

VS Code 使用手册：https://code.visualstudio.com/docs

2.1、界面布局

安装完成后，我们看到的Visual Studio Code界面如下，当然不同的系统界面边框略有不同，基本布局如图：

2.2、插件安装

• open in browser

使用 Alt + B 使用默认浏览器打开当前 html 页面，或 Shift + Alt + B 选择其他浏览器

• Vetur

语法高亮、智能感知、Emmet，识别.vue文件的等

• Auto Rename Tag

自动完成另一侧标签的同步修改

• Path Intellisense

自动路径补全

• HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式，安装后有快捷提示

• liveServer

服务端插件，用于 Ajax 接口调用

• Element UI Snippets

有 element 语法提示

• Node Snippets

有代码快捷提示

2.3、设置

• 开启自动保存文件（不需要手动按 Ctrl + S 保存）

2.4、搜索

• 全局搜索

• 局部搜索

ctrl+F

• Debug调试

具体参考官方文档： https://code.visualstudio.com/Docs/editor/debugging

2.5、快捷键

因为经常使用idea工具，所以快捷键也设置和idea工具一样的。

选中想要设置的快捷键，双击，弹出框来直接按下快捷键，如果想输入两个快捷键的可以先按下第一个快捷键全部松开继续按第二个快捷键。确认后，按下enter保存。

• 常用快捷键

编号	快捷键标识	设置后快捷键	说明
1	Move line up	Alt+ ↑	向上移动
2	Move line down	Alt+ ↓	向上移动
3	Copy line up	Ctrl+ alt+↑	向上复制行
4	Copy line down	Ctrl+ alt+↓	向下复制行
5	Delete line	Ctrl+D	删除行
6	Insert line below	Shift+enter	在下面插入行
7	Insert line above	Ctrl+alt+enter	在上面插入行
8	Scroll line up		向上滚动行
9	Scroll line down		向下滚动行
10	Toggle line comment	Ctrl+/	单行注释
11	Toggle block comment	Ctrl+shift+/	多行注释
12	Close editor	Ctrl+F4	关闭编辑器
13	Ctrl+shift+S	随便	另存为
14	？	Ctrl+shift+F	格式化代码

注意：Ctrl+shift+S 另存为这个快捷键我们并不是使用，但是这个快捷键在很多软件中表示保存所有。因为在其他软件中使用习惯，容易这样操作。这里会弹出提示框很烦，所以讲这个快捷键设置为不常用的。

• debug调试

编号	快捷键标识	设置后快捷键	说明
1	Toggle breakpoint	F9	下一个断点
2	Start/Continue	F5	开始/继续
3	Stop	Shift+F5	停止
4	Step into	F6	下一步
5	out	F7	上一步
6	Step over	F10	跳过

Ctrl+`:打开命令行

shift+alt+F 格式化代码

2.6、git版本控制

有的时候，某个目录下会存在多个项目，这个时候，vscode会将这些项目名变成大写展示在git管理处。需要管理那个项目，找到项目点击就可以操作了。

2.7、重置快捷键

这些快捷键全部删掉就可以了，如果你想将自己的快捷键保存下来，可以将这里的json全部保存下来，设置快捷键的时候就直接将json复制进去就行。

上面的快捷键JSON如下

// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+shift+oem_2",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+a",
        "command": "-editor.action.blockComment",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+y",
        "command": "workbench.action.files.saveAs"
    },
    {
        "key": "ctrl+shift+s",
        "command": "-workbench.action.files.saveAs"
    },
    {
        "key": "ctrl+alt+up",
        "command": "editor.action.copyLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+up",
        "command": "-editor.action.copyLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+alt+down",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+down",
        "command": "-editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+k",
        "command": "-editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "shift+enter",
        "command": "editor.action.insertLineAfter",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+enter",
        "command": "-editor.action.insertLineAfter",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+alt+enter",
        "command": "editor.action.insertLineBefore",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+enter",
        "command": "-editor.action.insertLineBefore",
        "when": "editorTextFocus && !editorReadonly"
    }
]

2.8、将多个项目导入一个工作区