VS Code开发技巧集锦

「爱情、让人受尽委屈。」 2022-07-19 02:30 198阅读 0赞

--------------------

1.  入门
2.  自定义
3.  扩展
4.  文件/文件夹管理
5.  编辑技巧
6.  智能感应功能
7.  代码片段
8.  Git集成
9.  调试
10. 任务运行

下文提及的快捷键可能与机器最新设置不符，请参考官方快捷键说明。

### 1.入门 ###

--------------------

打开命令面板

轻松找出VS Code所有可用命令。

Mac：`cmd+shift+p` or `f1`

Windows / Linux：`ctrl+shift+p` or `f1`

![20160805175327569][]

快捷键偏好设置

--------------------

所有命令（及其快捷键）均显示在命令面板中。如果忘记了如何操作，可随时查看。

快速打开

--------------------

快速打开文件，运行命令（见下文）

Mac: `cmd+p`

Windows / Linux: `ctrl+p`

键入“?”获取帮助。

将命令复制粘贴到快速打开中

--------------------

键入`cmd+p` ，然后粘贴想要运行的命令，浏览扩展（插件）市场时尤为适用。

![20160805175650117][]

![20160805175659226][]

命令行参数

--------------------

*  Linux: Follow instructions [here][].
 *  Windows: Follow instructions [here][here 1].
 *  Mac: see below.

Linux指南和Windows指南参考：[http://code.visualstudio.com/docs/setup/setup-overview][http_code.visualstudio.com_docs_setup_setup-overview]。

Mac指南见下文：

打开命令面板（`F1`）→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。

![20160805175948839][]

# create a new window
    code -n
    
    # change the language
    code --locale=es
    
    # open diff editor
    code --diff <file1> <file2>
    
    # see help options
    code --help

.vscode文件夹

--------------------

工作区文件夹在 .vscode中，比如任务运行是tasks.json，检查漏洞是launch.json。

状态栏效果

--------------------

*  错误和警告

Mac: `shift+cmd+m`

Windows / Linux: `ctrl+shift+m`

快速跳转到错误和警告。

按`f8`或`shift+f8`，循环错误检查。

![20160805180230546][]

*  更新扩展

更新扩展提示会出现在左下角状态栏。

![20160805180300885][]

*  更改语言模式

Mac: `cmd+k` `m`

Windows / Linux: `ctrl+k` `m`

![20160805180449840][]

### 2. 个人设置 ###

--------------------

这一部分个人发挥的空间很大，完整信息请参考：[http://code.visualstudio.com/docs/customization/overview][http_code.visualstudio.com_docs_customization_overview]。

设置编辑器

打开settings.json。

Mac: `cmd+,`

Windows / Linux: File -> Preferences -> User Settings

更改字体大小：”editor.fontSize”: 18

更改标签大小：”editor.tabSize”: 4

空格/标签：”editor.insertSpaces”: true

忽略文件/文件夹

清除编辑窗口中的文件/文件夹。

"files.exclude": {
            "somefolder/": true,
            "somefile": true
    }

清除搜索结果中的文件/文件夹。

"search.exclude": {
        "someFolder/": true,
        "somefile": true
    }

更多内容请参考：[http://code.visualstudio.com/docs/customization/userandworkspace][http_code.visualstudio.com_docs_customization_userandworkspace]。

预览主题

--------------------

![20160808153606322][]

JSON验证

--------------------

很多文件默认设置了json验证，可以在settings.json中创建自己的验证模式：

"json.schemas": [
        {
            "fileMatch": [
                "/bower.json"
            ],
            "url": "http://json.schemastore.org/bower"
        }
    ]

对于工作区中的模式：

"json.schemas": [
        {
            "fileMatch": [
                "/foo.json"
            ],
            "url": "./myschema.json"
        }
    ]

自定义模式：

"json.schemas": [
        {
            "fileMatch": [
                "/.myconfig"
            ],
            "schema": {
                "type": "object",
                "properties": {
                    "name" : {
                        "type": "string",
                        "description": "The name of the entry"
                    }
                }
            }
        },

更多内容请参考：[http://code.visualstudio.com/docs/languages/json][http_code.visualstudio.com_docs_languages_json]。

### 3.扩展 ###

--------------------

贡献点

--------------------

参考：[http://code.visualstudio.com/docs/extensionAPI/extension-points][http_code.visualstudio.com_docs_extensionAPI_extension-points]

*  配置
 *  命令
 *  快捷键
 *  语言
 *  调试器
 *  语法
 *  主题
 *  代码片段
 *  json验证

找到扩展

--------------------

1.  官方VS Code市场；
2.  搜索产品（见下文）；
3.  浏览扩展推荐（见下文）；
4.  社区扩展产品，如[awesome-vscode][]。

安装扩展

--------------------

Mac：`cmd+shift+p`

Windows / Linux：`ctrl+shift+p`

然后键入“ext install”。选择合适的扩展，再按回车键。

![20160808153841434][]

扩展推荐

--------------------

Mac: `cmd+shift+p`

Windows / Linux: `ctrl+shift+p`

键入“ext”→选择“Show Extension Recommendations”

![20160808153925904][]

卸载扩展

Mac: `cmd+shift+p`

Windows / Linux: `ctrl+shift+p`

键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

![20160808154004680][]

### 4.文件和文件夹管理 ###

OS X布局

--------------------

使用任务控制，将终端窗口和VS Code放在同一个屏幕上，就得到一个整合的终端啦！

![20160808154027499][]

自动保存

--------------------

用`cmd+`,打开`settings.json`：

"files.autoSave": "afterDelay"

开启侧边栏

--------------------

Mac: `cmd+b`

Windows / Linux: `ctrl+b`

![20160808154208024][]

分割（Side by side）编辑

--------------------

Mac: `cmd+\` or `cmd` then click a file from the file browser.

Windows / Linux: `ctrl+\`

Linux: `ctrl+2`

![20160808154307987][]

编辑器切换

Mac: `cmd+1`, `cmd+2`, `cmd+3`

Windows / Linux: `ctrl+1`, `ctrl+2`, `ctrl+3`

![20160808154343754][]

切换到资源管理器窗口（explorer window）

--------------------

Mac: cmd+shift+e

Windows / Linux: ctrl+shift+e

关闭当前文件夹

--------------------

Linux: `ctrl+k` `f`

历史

--------------------

用`ctrl+tab`来浏览历史

向后浏览：

Mac: `ctrl+-`

Windows / Linux: `alt+left`

向前浏览：

Mac: `ctrl+shift+up`

Windows / Linux: `alt+right`

![20160808154510791][]

打开文件

--------------------

Mac: `cmd+e` or `cmd+p`

Windows / Linux: `ctrl+e` or `ctrl+p`

![20160808154544947][]

文件关联

--------------------

为无法精确检测的文件设置语言关联（即配置文件）：

"file.associations": {
        ".eslintrc": "json"
    }

### 5.编辑技巧 ###

括号匹配

--------------------

更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

Mac: `cmd+shift+\`

Windows / Linux: `ctrl+shift+\`

![20160808154654977][]

多游标选择

更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

Mac: `opt+cmd+up` or `opt+cmd+down`

Windows: `ctrl+alt+up` or `ctrl+alt+down`

Linux: `alt+shift+up` or `alt+shift+down`

![20160808154745337][]

![20160808154757822][]

为当前选择添加游标。

![20160808154821464][]

复制一行

--------------------

Mac: `opt+shift+up` or `opt+shift+down`

Windows / Linux([Issue \#5363][Issue _5363]): `shift+alt+down` or `shift+alt+up`

![20160808154911214][]

缩小/扩大选择

--------------------

更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

Mac: `ctrl+shift+cmd+left` or `ctrl+shift+cmd+right`

Windows / Linux: `shift+alt+left` or `shift+alt+right`

![20160808154952902][]

符号查找

Mac: `cmd+shift+o`

Windows / Linux: `ctrl+shift+o`

![20160808155031106][]

定位特定的一行

Mac: `ctrl+g` or `cmd+p` `, :`

Windows / Linux: `ctrl+g`

![20160808155110231][]

撤销游标位置

Mac: `cmd+u`

Windows / Linux: `ctrl+u`

![20160808155136950][]

上下移动一行

--------------------

Mac: `opt+up` or `opt+down`

Windows / Linux: `alt+up` or `alt+down`

![20160808155209187][]

修整行尾空格

--------------------

Mac: `cmd+shift+x`

Windows / Linux: `ctrl+shift+x`

![20160808155438785][]

代码格式化

--------------------

Mac: `opt+shift+f`

Windows / Linux: `shift+alt+f`

![20160808155518598][]

代码折叠

--------------------

Mac: `shift+cmd+[` and `shift+cmd+]`

Windows / Linux: `ctrl+shift+[` and `ctrl+shift+]`

![20160808155559701][]

选择当前一行

Mac: `cmd+i`

Windows / Linux: `ctrl+i`

![20160808155626764][]

回到文件开端/末尾

--------------------

Mac: `cmd+up` and `cmd+down`

Windows: `ctrl+up` and `ctrl+down`

Linux: `ctrl+home` and `ctrl+end`

![20160808155737773][]

打开README预览

--------------------

在markdown文件中使用：

Mac: `shift+cmd+v`

Windows / Linux: `ctrl+shift+v`

![20160808155814390][]

分割（Side by Side）Markdown编辑和预览

--------------------

在markdown文件中使用：

Linux: `ctrl+k v`

### 6.智能感应 ###

试用`ctrl+space`来启动建议栏，这一条可以说是最有用的建议了。

![20160808155902577][]

可浏览可用的方法、参数以及简短文档等等。

### 预览（peek） ###

--------------------

选择一个符号，键入`alt+f12`，或者使用快捷菜单。

![20160808160001812][]

转到定义

--------------------

选择一个符号，键入`f12`，或者使用快捷菜单。

![20160808160058297][]

查找所有引用

--------------------

选择一个符号，键入`shift+f12`，或者使用快捷菜单。

![20160808160122653][]

符号重命名

--------------------

选择一个符号，键入`f2`，或者使用快捷菜单。

![20160808160203014][]

jsconfig.json

--------------------

在javascript源文件根上配置jsconfig.json，就可以使用ES6了。

{
        "compilerOptions": { "target": "ES6", "module": "commonjs" }, "exclude": [ "npm_modules" ] }

.eslintrc.json

安装[eslint extension][]。按照个人喜好配置。具体说明参考：[http://eslint.org/docs/user-guide/configuring][http_eslint.org_docs_user-guide_configuring]

以下是使用es6的配置。

{
        "env": { "browser": true, "commonjs": true, "es6": true, "node": true },
        "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true } },
        "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1 } }

package.json

参考package.json文件中的智能感应功能。

![20160808160333703][]

安装typings应用

安装[typings][]来引进.d.ts文件来激活javascript智能感应功能。

npm install typings --global
    
    # Search for definitions.
    typings search tape
    
    # Find an available definition (by name).
    typings search --name react
    
    # Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`).
    typings install react --ambient --save

install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。

Emmet语法

[Emmet语法支持][Emmet]

![20160808160432813][]

### 7.代码片段 ###

创建自定义代码

File -> Preferences -> User Snippets，选择语言，创建代码片段。

"create component": {
        "prefix": "component",
        "body": [
            "class $1 extends React.Component {",
            "",
            " render() {",
            " return ($2);",
            " }",
            "",
            "}"
        ]
    },

更多内容请参考：[http://code.visualstudio.com/docs/customization/userdefinedsnippets][http_code.visualstudio.com_docs_customization_userdefinedsnippets]

### 8.Git集成 ###

Git工作流的流畅集成。

Diffs

点击Git图标，选择要diff的文件。

![20160808160521189][]

分割（Side by side）

默认的是分割diff。

![20160808160541486][]

内联视图

点击下图所示的“more”选项来启动内联视图。

![20160808160602909][]

![20160808160614722][]

分支

通过状态栏可轻松切换分支。

![20160808160658520][]

Staging

*  Stage所有文件

一次选择多个文件，再点击加号按钮。

![20160808160726206][]

*  Stage选择

Stage文件一部分的方法是：使用箭头选择该文件，然后点击“more”按钮来stage“selected lines”。

![20160808160744771][]

撤销最近一次命令

![20160808160808991][]

查看Git输出

有时难免需要了解工具的运行状况。有了VS Code，查看正在运行的命令更简单，这对于Git学习或是解决源代码管理问题尤为有帮助。

Mac: `shift+cmd+u`

Windows / Linux: `ctrl+shift+u`

运行toggleOutput要下拉选择Git。

边槽指示器

查看编辑器中的diff设置。更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

![20160808160848882][]

消除合并冲突

在合并时点击git图标，在diff view里做更改。

将VS Code设置为默认合并工具

git config --global merge.tool code

### 9.调试 ###

配置调试器

点击F1，选择“Debug: Open Launch.json”，再选择环境，随后产生一个launch.json文件。Node.js等环境可以直接运行，可能需要额外配置其他语言。更多内容请参考：[http://code.visualstudio.com/docs/editor/debugging][http_code.visualstudio.com_docs_editor_debugging]

![20160808160959973][]

断点和逐句通过

断点应在行数旁边。用调试插件向前浏览。

![20160808161053885][]

数据检查

检查变量在调试面板和控制台里。

![20160808161114214][]

### 10.任务运行 ###

自动检测任务

按下`f1`，键入“Configure Task”，然后选择“Configure Task Runner”，会生成一个task.json文件，内容如下。更多内容请参考：[http://code.visualstudio.com/docs/editor/tasks][http_code.visualstudio.com_docs_editor_tasks]

{
        // See http://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "0.1.0",
        "command": "npm",
        "isShellCommand": true,
        "showOutput": "always",
        "suppressTaskName": true,
        "tasks": [
            {
                "taskName": "install",
                "args": ["install"]
            },
            {
                "taskName": "build",
                "args": ["run", "build"]
            }
        ]
    }

自动生成有时会出问题。参考上文的网址来了解正确操作方法。

在命令面板上运行任务

点击`f1`，运行命令“Run Task”，然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。

![20160808161158334][]

--------------------

1.  入门
2.  自定义
3.  扩展
4.  文件/文件夹管理
5.  编辑技巧
6.  智能感应功能
7.  代码片段
8.  Git集成
9.  调试
10. 任务运行

下文提及的快捷键可能与机器最新设置不符，请参考官方快捷键说明。

### 1.入门 ###

--------------------

打开命令面板

轻松找出VS Code所有可用命令。

Mac：`cmd+shift+p` or `f1`

Windows / Linux：`ctrl+shift+p` or `f1`

![20160805175327569][]

快捷键偏好设置

--------------------

所有命令（及其快捷键）均显示在命令面板中。如果忘记了如何操作，可随时查看。

快速打开

--------------------

快速打开文件，运行命令（见下文）

Mac: `cmd+p`

Windows / Linux: `ctrl+p`

键入“?”获取帮助。

将命令复制粘贴到快速打开中

--------------------

键入`cmd+p` ，然后粘贴想要运行的命令，浏览扩展（插件）市场时尤为适用。

![20160805175650117][]

![20160805175659226][]

命令行参数

--------------------

*  Linux: Follow instructions [here][].
 *  Windows: Follow instructions [here][here 1].
 *  Mac: see below.

Linux指南和Windows指南参考：[http://code.visualstudio.com/docs/setup/setup-overview][http_code.visualstudio.com_docs_setup_setup-overview]。

Mac指南见下文：

打开命令面板（`F1`）→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。

![20160805175948839][]

# create a new window
    code -n
    
    # change the language
    code --locale=es
    
    # open diff editor
    code --diff <file1> <file2>
    
    # see help options
    code --help

.vscode文件夹

--------------------

工作区文件夹在 .vscode中，比如任务运行是tasks.json，检查漏洞是launch.json。

状态栏效果

--------------------

*  错误和警告

Mac: `shift+cmd+m`

Windows / Linux: `ctrl+shift+m`

快速跳转到错误和警告。

按`f8`或`shift+f8`，循环错误检查。

![20160805180230546][]

*  更新扩展

更新扩展提示会出现在左下角状态栏。

![20160805180300885][]

*  更改语言模式

Mac: `cmd+k` `m`

Windows / Linux: `ctrl+k` `m`

![20160805180449840][]

### 2. 个人设置 ###

--------------------

这一部分个人发挥的空间很大，完整信息请参考：[http://code.visualstudio.com/docs/customization/overview][http_code.visualstudio.com_docs_customization_overview]。

设置编辑器

打开settings.json。

Mac: `cmd+,`

Windows / Linux: File -> Preferences -> User Settings

*更改字体大小：”editor.fontSize”: 18*

*更改标签大小：”editor.tabSize”: 4*

*空格/标签：”editor.insertSpaces”: true*

*忽略文件/文件夹*

清除编辑窗口中的文件/文件夹。

"files.exclude": {
            "somefolder/": true,
            "somefile": true
    }

清除搜索结果中的文件/文件夹。

"search.exclude": {
        "someFolder/": true,
        "somefile": true
    }

更多内容请参考：[http://code.visualstudio.com/docs/customization/userandworkspace][http_code.visualstudio.com_docs_customization_userandworkspace]。

预览主题

--------------------

![20160808153606322][]

JSON验证

--------------------

很多文件默认设置了json验证，可以在settings.json中创建自己的验证模式：

"json.schemas": [
        {
            "fileMatch": [
                "/bower.json"
            ],
            "url": "http://json.schemastore.org/bower"
        }
    ]

对于工作区中的模式：

"json.schemas": [
        {
            "fileMatch": [
                "/foo.json"
            ],
            "url": "./myschema.json"
        }
    ]

自定义模式：

更多内容请参考：[http://code.visualstudio.com/docs/languages/json][http_code.visualstudio.com_docs_languages_json]。

### 3.扩展 ###

--------------------

贡献点

--------------------

参考：[http://code.visualstudio.com/docs/extensionAPI/extension-points][http_code.visualstudio.com_docs_extensionAPI_extension-points]

*  配置
 *  命令
 *  快捷键
 *  语言
 *  调试器
 *  语法
 *  主题
 *  代码片段
 *  json验证

找到扩展

--------------------

1.  官方VS Code市场；
2.  搜索产品（见下文）；
3.  浏览扩展推荐（见下文）；
4.  社区扩展产品，如[awesome-vscode][]。

安装扩展

--------------------

Mac：`cmd+shift+p`

Windows / Linux：`ctrl+shift+p`

然后键入“ext install”。选择合适的扩展，再按回车键。

![20160808153841434][]

扩展推荐

--------------------

Mac: `cmd+shift+p`

Windows / Linux: `ctrl+shift+p`

键入“ext”→选择“Show Extension Recommendations”

![20160808153925904][]

卸载扩展

Mac: `cmd+shift+p`

Windows / Linux: `ctrl+shift+p`

键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

![20160808154004680][]

### 4.文件和文件夹管理 ###

OS X布局

--------------------

使用任务控制，将终端窗口和VS Code放在同一个屏幕上，就得到一个整合的终端啦！

![20160808154027499][]

自动保存

--------------------

用`cmd+`,打开`settings.json`：

"files.autoSave": "afterDelay"

开启侧边栏

--------------------

Mac: `cmd+b`

Windows / Linux: `ctrl+b`

![20160808154208024][]

分割（Side by side）编辑

--------------------

Mac: `cmd+\` or `cmd` then click a file from the file browser.

Windows / Linux: `ctrl+\`

Linux: `ctrl+2`

![20160808154307987][]

编辑器切换

Mac: `cmd+1`, `cmd+2`, `cmd+3`

Windows / Linux: `ctrl+1`, `ctrl+2`, `ctrl+3`

![20160808154343754][]

切换到资源管理器窗口（explorer window）

--------------------

Mac: cmd+shift+e

Windows / Linux: ctrl+shift+e

关闭当前文件夹

--------------------

Linux: `ctrl+k` `f`

历史

--------------------

用`ctrl+tab`来浏览历史

向后浏览：

Mac: `ctrl+-`

Windows / Linux: `alt+left`

向前浏览：

Mac: `ctrl+shift+up`

Windows / Linux: `alt+right`

![20160808154510791][]

打开文件

--------------------

Mac: `cmd+e` or `cmd+p`

Windows / Linux: `ctrl+e` or `ctrl+p`

![20160808154544947][]

文件关联

--------------------

为无法精确检测的文件设置语言关联（即配置文件）：

"file.associations": {
        ".eslintrc": "json"
    }

### 5.编辑技巧 ###

括号匹配

--------------------

更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

Mac: `cmd+shift+\`

Windows / Linux: `ctrl+shift+\`

![20160808154654977][]

多游标选择

更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

Mac: `opt+cmd+up` or `opt+cmd+down`

Windows: `ctrl+alt+up` or `ctrl+alt+down`

Linux: `alt+shift+up` or `alt+shift+down`

![20160808154745337][]

![20160808154757822][]

为当前选择添加游标。

![20160808154821464][]

复制一行

--------------------

Mac: `opt+shift+up` or `opt+shift+down`

Windows / Linux([Issue \#5363][Issue _5363]): `shift+alt+down` or `shift+alt+up`

![20160808154911214][]

缩小/扩大选择

--------------------

更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

Mac: `ctrl+shift+cmd+left` or `ctrl+shift+cmd+right`

Windows / Linux: `shift+alt+left` or `shift+alt+right`

![20160808154952902][]

符号查找

Mac: `cmd+shift+o`

Windows / Linux: `ctrl+shift+o`

![20160808155031106][]

定位特定的一行

Mac: `ctrl+g` or `cmd+p` `, :`

Windows / Linux: `ctrl+g`

![20160808155110231][]

撤销游标位置

Mac: `cmd+u`

Windows / Linux: `ctrl+u`

![20160808155136950][]

上下移动一行

--------------------

Mac: `opt+up` or `opt+down`

Windows / Linux: `alt+up` or `alt+down`

![20160808155209187][]

修整行尾空格

--------------------

Mac: `cmd+shift+x`

Windows / Linux: `ctrl+shift+x`

![20160808155438785][]

代码格式化

--------------------

Mac: `opt+shift+f`

Windows / Linux: `shift+alt+f`

![20160808155518598][]

代码折叠

--------------------

Mac: `shift+cmd+[` and `shift+cmd+]`

Windows / Linux: `ctrl+shift+[` and `ctrl+shift+]`

![20160808155559701][]

选择当前一行

Mac: `cmd+i`

Windows / Linux: `ctrl+i`

![20160808155626764][]

回到文件开端/末尾

--------------------

Mac: `cmd+up` and `cmd+down`

Windows: `ctrl+up` and `ctrl+down`

Linux: `ctrl+home` and `ctrl+end`

![20160808155737773][]

打开README预览

--------------------

在markdown文件中使用：

Mac: `shift+cmd+v`

Windows / Linux: `ctrl+shift+v`

![20160808155814390][]

分割（Side by Side）Markdown编辑和预览

--------------------

在markdown文件中使用：

Linux: `ctrl+k v`

### 6.智能感应 ###

试用`ctrl+space`来启动建议栏，这一条可以说是最有用的建议了。

![20160808155902577][]

可浏览可用的方法、参数以及简短文档等等。

### 预览（peek） ###

--------------------

选择一个符号，键入`alt+f12`，或者使用快捷菜单。

![20160808160001812][]

转到定义

--------------------

选择一个符号，键入`f12`，或者使用快捷菜单。

![20160808160058297][]

查找所有引用

--------------------

选择一个符号，键入`shift+f12`，或者使用快捷菜单。

![20160808160122653][]

符号重命名

--------------------

选择一个符号，键入`f2`，或者使用快捷菜单。

![20160808160203014][]

jsconfig.json

--------------------

在javascript源文件根上配置jsconfig.json，就可以使用ES6了。

{
        "compilerOptions": { "target": "ES6", "module": "commonjs" }, "exclude": [ "npm_modules" ] }

.eslintrc.json

安装[eslint extension][]。按照个人喜好配置。具体说明参考：[http://eslint.org/docs/user-guide/configuring][http_eslint.org_docs_user-guide_configuring]

以下是使用es6的配置。

package.json

参考package.json文件中的智能感应功能。

![20160808160333703][]

安装typings应用

安装[typings][]来引进.d.ts文件来激活javascript智能感应功能。

install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。

Emmet语法

[Emmet语法支持][Emmet]

![20160808160432813][]

### 7.代码片段 ###

创建自定义代码

File -> Preferences -> User Snippets，选择语言，创建代码片段。

更多内容请参考：[http://code.visualstudio.com/docs/customization/userdefinedsnippets][http_code.visualstudio.com_docs_customization_userdefinedsnippets]

### 8.Git集成 ###

Git工作流的流畅集成。

Diffs

点击Git图标，选择要diff的文件。

![20160808160521189][]

分割（Side by side）

默认的是分割diff。

![20160808160541486][]

内联视图

点击下图所示的“more”选项来启动内联视图。

![20160808160602909][]

![20160808160614722][]

分支

通过状态栏可轻松切换分支。

![20160808160658520][]

Staging

*  Stage所有文件

一次选择多个文件，再点击加号按钮。

![20160808160726206][]

*  Stage选择

Stage文件一部分的方法是：使用箭头选择该文件，然后点击“more”按钮来stage“selected lines”。

![20160808160744771][]

撤销最近一次命令

![20160808160808991][]

查看Git输出

有时难免需要了解工具的运行状况。有了VS Code，查看正在运行的命令更简单，这对于Git学习或是解决源代码管理问题尤为有帮助。

Mac: `shift+cmd+u`

Windows / Linux: `ctrl+shift+u`

运行toggleOutput要下拉选择Git。

边槽指示器

查看编辑器中的diff设置。更多内容请参考：[http://code.visualstudio.com/docs/editor/editingevolved][http_code.visualstudio.com_docs_editor_editingevolved]

![20160808160848882][]

消除合并冲突

在合并时点击git图标，在diff view里做更改。

将VS Code设置为默认合并工具

git config --global merge.tool code

### 9.调试 ###

配置调试器

![20160808160959973][]

断点和逐句通过

断点应在行数旁边。用调试插件向前浏览。

![20160808161053885][]

数据检查

检查变量在调试面板和控制台里。

![20160808161114214][]

### 10.任务运行 ###

自动检测任务

自动生成有时会出问题。参考上文的网址来了解正确操作方法。

在命令面板上运行任务

点击`f1`，运行命令“Run Task”，然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。

![20160808161158334][]

[20160805175327569]: /images/20220718/bd4854557b1f4dfb88c648fbcf1f2eee.png
[20160805175650117]: /images/20220718/65e7fd323f06441f8f59ff92c0f768d8.png
[20160805175659226]: /images/20220718/56d7fa23d9dd41d7b232889d4a43dd0a.png
[here]: http://code.visualstudio.com/docs/editor/setup#_linux
[here 1]: http://code.visualstudio.com/docs/editor/setup#_windows
[http_code.visualstudio.com_docs_setup_setup-overview]: http://code.visualstudio.com/docs/setup/setup-overview
[20160805175948839]: /images/20220718/19264201eed749d3b9b685da71ccd0f6.png
[20160805180230546]: /images/20220718/9108fda9a9cb4284908e8423100e157f.png
[20160805180300885]: /images/20220718/8a0b37ec7c064eab9674a9051c245d26.png
[20160805180449840]: /images/20220718/ae8bc0e53cd54916951b2a53cf73ede4.png
[http_code.visualstudio.com_docs_customization_overview]: http://code.visualstudio.com/docs/customization/overview
[http_code.visualstudio.com_docs_customization_userandworkspace]: http://code.visualstudio.com/docs/customization/userandworkspace
[20160808153606322]: /images/20220718/d8709aa397dd4811bc5356c1ad3c9e8c.png
[http_code.visualstudio.com_docs_languages_json]: http://code.visualstudio.com/docs/languages/json
[http_code.visualstudio.com_docs_extensionAPI_extension-points]: http://code.visualstudio.com/docs/extensionAPI/extension-points
[awesome-vscode]: https://github.com/viatsko/awesome-vscode
[20160808153841434]: /images/20220718/a9441f9970b348e7a3d53a8c6f9e3502.png
[20160808153925904]: /images/20220718/b382420ce3b04138a1b01d221e1eae3b.png
[20160808154004680]: /images/20220718/a68923e1b5a84b0eb2db24c9af77065e.png
[20160808154027499]: /images/20220718/8f1a2c58928546fb8dc62c6af0d71e2b.png
[20160808154208024]: /images/20220718/af0d621e304c4981bcf144453067350f.png
[20160808154307987]: /images/20220718/513a8fd5808d46d89204fc1dc50c0106.png
[20160808154343754]: /images/20220718/8ee7c6f3906948358625ccbc969b02ca.png
[20160808154510791]: /images/20220718/a8732190003b47b0a7b474715cce3348.png
[20160808154544947]: /images/20220718/21275393d02c4fc9b2f81c2f3c66609a.png
[http_code.visualstudio.com_docs_editor_editingevolved]: http://code.visualstudio.com/docs/editor/editingevolved
[20160808154654977]: /images/20220718/33ec0ae851e243c78e50307444b4d088.png
[20160808154745337]: /images/20220718/6af94cd01feb47e6ba864ec85ab30035.png
[20160808154757822]: /images/20220718/7dd6fe54a4cd4732854e6d5a0c2e8b84.png
[20160808154821464]: /images/20220718/3a45aa58343e4596a174df63c4b9b8fa.png
[Issue _5363]: https://github.com/Microsoft/vscode/issues/5363
[20160808154911214]: /images/20220718/4792524ea4684648828ed6c9b9d02ea6.png
[20160808154952902]: /images/20220718/e4bd156a712c4f33ad5ccb9db81f88c3.png
[20160808155031106]: /images/20220718/e8d3f0819c0a47e690608ef48982092e.png
[20160808155110231]: /images/20220718/5674e448e03d4b31902ef0fde37c3bb3.png
[20160808155136950]: /images/20220718/5a32f7f5935240e3a9acf6904e16e905.png
[20160808155209187]: /images/20220718/4d9d489b9a344e93a55908cbf24ce3b2.png
[20160808155438785]: /images/20220718/ee21dcf86f264c1989ea050d4aa2c2de.png
[20160808155518598]: /images/20220718/d8a75e1e5b964367b236dff33f5c76b4.png
[20160808155559701]: /images/20220718/6e787b83488b47cc85fb7674c3cc63f0.png
[20160808155626764]: /images/20220718/70bcda7bff2144ae823e8f8e13443a28.png
[20160808155737773]: /images/20220718/950aebf139894453a0eed0cd154e86da.png
[20160808155814390]: /images/20220718/0340a7001a02468bbf752dfe2b160224.png
[20160808155902577]: /images/20220718/762b568888a3437eb6a53d16b341499b.png
[20160808160001812]: /images/20220718/a8f718bc08f64b0abb62c77378587044.png
[20160808160058297]: /images/20220718/6c01bf556ae544fb93b635256d18b606.png
[20160808160122653]: /images/20220718/a7674612646c46f098b5fd66ae4b238d.png
[20160808160203014]: /images/20220718/8953d6bd45a9448ab8373b612ce1b6da.png
[eslint extension]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
[http_eslint.org_docs_user-guide_configuring]: http://eslint.org/docs/user-guide/configuring
[20160808160333703]: /images/20220718/596bc9eb142f4cba8794def6b982c9e7.png
[typings]: https://github.com/typings/typings
[Emmet]: http://code.visualstudio.com/docs/languages/html
[20160808160432813]: /images/20220718/6f1cd738165e49b8a206c72420612b15.png
[http_code.visualstudio.com_docs_customization_userdefinedsnippets]: http://code.visualstudio.com/docs/customization/userdefinedsnippets
[20160808160521189]: /images/20220718/cdd879beff4442bf806a0355cc7756de.png
[20160808160541486]: /images/20220718/924395f7530e4b8188446e33e7d54345.png
[20160808160602909]: /images/20220718/8741c6d03c3f4768b49a126331a745df.png
[20160808160614722]: /images/20220718/777d31f02cee48eeaecdfa940de901e9.png
[20160808160658520]: /images/20220718/e2a3d978e3144dc3a7814bacde24c436.png
[20160808160726206]: /images/20220718/30e966f654d14e908f8c9b91bfee8d6a.png
[20160808160744771]: /images/20220718/5ce516eed4f24e8aaf220b0ead01fb25.png
[20160808160808991]: /images/20220718/4b558f6d78c045c890451878eb990aae.png
[20160808160848882]: /images/20220718/ea71d2daba74491f8bcda7f6d3d90a0f.png
[http_code.visualstudio.com_docs_editor_debugging]: http://code.visualstudio.com/docs/editor/debugging
[20160808160959973]: /images/20220718/a6914235f42f419492cf8f2291e5e6ec.png
[20160808161053885]: /images/20220718/fda2e4184a664add80544b32beb09d3d.png
[20160808161114214]: /images/20220718/3b79716fa5d643a6a3a87d65f29216cd.png
[http_code.visualstudio.com_docs_editor_tasks]: http://code.visualstudio.com/docs/editor/tasks
[20160808161158334]: /images/20220718/f9e9c8c6fa714789986e22d9f2a89dce.png