美文网首页pandoc+markdown+vscode
VS Code用户指南与使用技巧

VS Code用户指南与使用技巧

作者: faner | 来源:发表于2020-02-28 16:27 被阅读0次

    User Guide(用户指南)

    更改显示语言

    通过安装插件 Chinese (Simplified) Language Pack for Visual Studio Code 来启用中文(需要重启)

    默认情况下,Visual Studio Code附带英语作为显示语言,而其他语言则依赖于Marketplace提供的语言包扩展。

    VS Code检测到操作系统的UI语言,并会提示您安装适当的语言包(如果在Marketplace上可用)。

    保存/自动保存

    默认情况下,VS代码需要一个明确的行动,将更改保存到磁盘,按Ctrl + S

    您也可以使用 文件 > 自动保存 从顶级菜单切换 自动保存

    要进一步控制自动保存,请打开配置文件,然后找到相关的设置:

    "files.autoSave": "off"
    

    它可以具有以下值:

    • off -禁用自动保存。
    • afterDelay - 在配置的延迟(默认1000毫秒)后保存文件。
    • onFocusChange - 当焦点移出脏文件的编辑器时保存文件。
    • onWindowChange - 当焦点移出VS Code窗口时保存文件。
    • files.autoSaveDelay:当files.autoSave配置为时,配置延迟(以毫秒为单位)afterDelay。默认值为1000毫秒。

    打开用户设置 settings.json 文件的方法,你可以通过在(命令面板,打开命令面板的快捷键为 F1 )输入命令:Open Settings (JSON) 来打开此文件。

    预览模式

    在 VS Code 中打开工作区内的文件的方式:

    • 单击文件,进入预览模式,此时标签页中的名字显示为 斜体

    • 双击文件,直接进入编辑模式,此时标签页中的名字正常显示

    在资源管理器中单击或选择一个文件时,该文件将以 预览模式 显示并重用现有选项卡。 如果您正在快速浏览文件,并且不希望每个访问的文件都有其自己的标签页,则这非常有用。 当您开始编辑文件或使用双击从资源管理器中打开文件时,会有一个新的标签页专用于该文件。

    预览模式在标签页标题中以 斜体 表示

    image

    如果在预览标签页中编辑文件,或者双击该预览标签页,则该标签页自动变为编辑模式。

    如果您不想使用预览模式而希望总是创建一个新的标签页,则可以使用以下设置来控制:

    • workbench.editor.enablePreview :全局启用或禁用(false)预览编辑器

    • workbench.editor.enablePreviewFromQuickOpen :启用或禁用预览编辑器,当从“快速打开(Ctrl + P)” 中打开文件时。

    首发于:thisfaner.com/p/vs-code-tips/

    代码补全

    手动代码补全

    手动代码补全:默认 快捷键为 Ctrl + 空格键 ,但是在 Windows 中它被系统输
    入法非法占用(当按下此快捷键时出现中英切换提示,它被用于中/英模式切换);解决方法:

    • 方法一:修改 vscode 中的快捷键;
    • 方法二:设置自动补全(无需按快捷键)
    • 方法三:等待微软的补丁包(几十年了都没见到)
    • 方法四:抛弃Windows系统。

    自动代码补全

    全局配置:用于所有语言,在 settings.json 文件中添加

      // 在编辑时是否自动提示补全
      "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
      },
    

    用于特定语言:

    比如为 markdown 文件开启 自动补全,在 settings.json 文件中添加如下配置:

      "[markdown]": {
        // 快速补全
        "editor.quickSuggestions": {
          "other": true,
          "comments": true,
          "strings": true
        },
        // 显示空格
        "editor.renderWhitespace": "all",
        // snippet 提示优先(看个人喜欢)
        "editor.snippetSuggestions": "top",
        "editor.tabCompletion": "on",
        // 使用enter 接受提示
        // "editor.acceptSuggestionOnEnter": "on",
      },
    

    开启之后,可以自动提示 markdown 的 snippet;比如:

    • 输入 code 就会弹出行内代码和代码块两种补全提示
    • 输入 ulli 就会弹出列表补全提示
    • 类似的还有 boldimageitaliclinkquote 等。

    格式化

    VS Code对源代码格式有很好的支持

    • 格式化文档(Shift + Alt + F)-格式化整个活动文件。
    • 格式选择(Ctrl + K Ctrl + F)-格式化所选文本。

    如果您自行安装了格式化扩展程序,并可以提供相同语言的格式设置,可以选择禁用默认语言格式程序:

    "html.format.enable": false
    

    除了手动调用代码格式外,您还可以根据用户手势(例如键入,保存或粘贴)来触发格式。这些默认情况下处于关闭状态,但是您可以通过以下设置启用这些行为:

    • editor.formatOnType - 输入后进行 行格式。
    • editor.formatOnSave - 保存时格式化文件。
    • editor.formatOnPaste - 格式化粘贴的内容。

    注意:并非所有格式化程序都支持粘贴时格式化,前提是它们必须支持格式化所选内容或文本范围。

    缩进

    默认情况下,VS Code 将每个Tab键替换为4个空格。如果您想更改默认设置,则可以修改editor.insertSpaceseditor.tabSize

    //是否使用空格替换制表符
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    

    自动侦测:

    VS Code会分析打开的文件并确定文档中使用的缩进。自动检测到的缩进将覆盖您的默认缩进设置。检测到的设置显示在状态栏的右侧:

    indentation-detection.png

    可以单击“状态栏”缩进 显示(上图中的Tab Size:4),来更改缩进方式。

    查找和替换

    VS Code允许您快速查找文本并替换为当前打开的文件。按Ctrl + F在编辑器中打开 “查找小部件” (Find Widget),搜索结果将在编辑器,概述标尺和小地图中突出显示。

    如果当前打开的文件中有多个匹配结果,则可以在查找输入框处于焦点状态时按EnterShift + Enter导航到下一个或上一个结果。

    “查找小部件” (Find Widget)还可以调整大小:

    resize-find-widget.gif

    在选中的文本中查找:

    默认情况下,查找操作在编辑器中的整个文件上运行。它也可以在选定的文本上运行。您可以通过单击“查找”小部件上的三明治图标来启用此功能。

    find-in-selection.gif

    搜索多行文本:

    您可以通过将文本粘贴到“查找”输入框和“替换”输入框中来搜索多行文本。按下Ctrl+Enter将在输入框中插入新行。

    multiple-line-support.gif

    搜索文件:

    Ctrl + Shift + F并输入搜索词

    常见问题

    是否可以进行全局搜索和替换?

    可以;展开搜索视图文本框以包含替换文本字段。您可以搜索和替换工作空间中的所有文件。

    如何打开自动换行?

    可以通过 editor.wordWrap 设置控制自动换行

    也可以使用Alt + Z切换VS Code会话的自动换行。

    技巧和窍门

    官方文档:Visual Studio代码提示和技巧

    命令面板

    根据您的当前上下文访问所有可用命令。

    键盘快捷键:Ctrl + Shift + PF1 弹出的对话框叫“命令面板”

    OpenCommandPalatte.gif
    • ctrl + shift + pF1:打开命令面板时会带有 >
    • ctrl + p: 打开命令面板时没有 > ,此时它的作用是 快速打开 某个文件

    由于快捷键冲突而导致无法触发相应插件,解决方法之一是直接在命令面板中操作。

    快速开启

    快速打开文件。

    如果一个文件夹中包含的文件较多,使用命令面板寻找并打开文件是不错的选择。

    键盘快捷键:Ctrl + P

    QuickOpen.gif

    提示:打开对话框后输入不同的内容可以进行不同的操作:

    直接输入文件名,快速打开文件
    > 显示并执行命令
    ? 获取帮助
    : 跳转到行数,也可以Ctrl+G直接进入(Mac 是 CMD+G)
    @ 跳转到symbol(搜索变量或者函数),也可以Ctrl+Shift+O直接进入
    @ 根据分类跳转symbol,查找属性或函数,也可以Ctrl+Shift+O后输入:进入
    # 根据名字查找symbol,也可以Ctrl+T
    

    在最近打开的文件之间导航: 重复快速打开键盘快捷键,以在最近打开的文件之间快速循环。

    从快速打开中打开多个文件: 按鼠标中键,在后台打开文件。

    状态栏

    一、错误和警告:

    键盘快捷键:Ctrl + Shift + M

    作用:快速跳转到项目中的错误和警告。

    也可以通过点击状态栏中的按钮来打开: TIM截图20200227225432.png

    通过F8或Shift + F8循环检查错误

    Errors_Warnings.gif

    您可以按类型(“错误”,“警告”)或文本匹配来过滤问题。

    调整设置⭐

    打开用户设置 settings.json 文件,你可以通过(命令面板)输入命令:Open Settings (JSON) 来打开此文件。

    粘贴格式

    "editor.formatOnPaste": true
    

    更改各种UI元素的字体大小

    // Main editor
    "editor.fontSize": 18,
    // Terminal panel
    "terminal.integrated.fontSize": 14,
    // Output panel
    "[Log]": {
        "editor.fontSize": 15
    }
    

    更改缩放等级

    "window.zoomLevel": 5
    

    使用连体字

    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true
    

    提示:您将需要安装支持字体连字的字体。FiraCode是VS Code团队中流行的字体。微软新开发的编程字体Cascadia Code也支持。

    连体字效果:


    font-ligatures-annotated.png

    自动保存(另见上文)

    "files.autoSave": "afterDelay"
    

    您也可以使用文件 > 自动保存从顶级菜单切换自动保存

    保存时格式化

    "editor.formatOnSave": true
    

    更改制表符的大小

    "editor.tabSize": 4
    

    是否使用空格替换制表符

    "editor.insertSpaces": true
    

    渲染空白

    "editor.renderWhitespace": "all"
    

    忽略文件/文件夹

    从编辑器窗口中排除这些文件/文件夹。

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

    从搜索结果中排除这些文件/文件夹。

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

    专用于特定编程语言的设置:

    对于只需要特定语言的设置,您可以按语言标识符确定设置的范围。您可以在“ 语言标识符”参考中找到常用语言ID的列表。

    "[languageid]": {
    
    }
    

    你可以通过在命令面板中输入命令:Configure Language Specific Settings 来进行设置。

    文件和文件夹⭐

    使用快捷键 Ctrl + ` 打开终端

    通过 菜单👉 文件 👉 自动保存 来切换自动保存。

    切换边栏:Ctrl + B

    禅模式

    禅模式: 进入无干扰的禅模式 Ctrl + KZ ;按两次 Esc 退出。

    zen_mode.gif

    并排编辑

    快捷键:Ctrl + \

    您还可以拖放编辑器以创建新的编辑器组,并在组之间移动编辑器。

    split_editor.gif

    在编辑之间切换

    键盘快捷键:Ctrl + 1,Ctrl + 2,Ctrl + 3

    navigate_editors.gif

    创建或打开文件

    键盘快捷键:Ctrl +单击

    您可以通过将光标移动到文件链接并使用Ctrl + click来快速打开文件或图像或创建新文件。

    create_open_file.gif

    导航历史

    浏览整个历史记录:Ctrl + Tab

    向后导航:Alt +向左

    向前导航:Alt +向右

    navigate_history.gif

    文件关联

    为未正确检测到的文件创建语言关联。例如,许多带有自定义文件扩展名的配置文件实际上是JSON

    "files.associations": {
        ".database": "json"
    }
    

    编辑技巧 ⭐

    多光标选择

    使用 Ctrl+Alt+DownCtrl+Alt+Up 在当前光标的下方或上方再插入一个光标。

    官方文档是:使用 Shift+Alt+DownShift+Alt+Up 在当前光标的下方或上方再插入一个光标。

    multicursor.gif

    Ctrl+D : 选中下一个与当前光标下相同的单词 (Add selection to next Find match)

    multicursor-word.gif

    另外还可使用 Ctrl + Shift + L :Select all occurrences of current selection;选中文件中所有相同的字符串

    当然这些操作都可以通过 菜单 👉 选择 来进行操作

    多光标修饰符

    多光标修饰符是用来设置我们如果配合鼠标单击来添加多个光标。比如,当我们可以通过 Ctrl + 单击 添加多个光标时,Ctrl 键就是 多光标修饰符

    多光标修饰符可以二选一,通过配置 editor.multiCursorModifier 来进行设置, 可以设置为:

    • ctrlCmd- 它在Windows 上映射为Ctrl,在macOS 上映射为Cmd。
    • alt- 即 Alt。

    可以通过" 选择"菜单 👉 " 切换为 Ctrl/Alt +单击 进行多光标功能 " 来快速切换此设置。

    多光标修饰符的其他影响:

    " 转到定义 " 和" 打开链接" 的手势也将遵守此设置并自动进行调整,以使其不会冲突。例如,

    • 当设置为ctrlCmd时,可以使用Ctrl/Cmd + 单击添加多个光标,而需要使用Alt + 单击进行打开链接或转到定义
    • 当设置为 Alt 时, 可以使用 Alt + 单击 添加多个光标,而需要使用Ctrl/Cmd + 单击进行打开链接或转到定义

    缩小/扩大 选择

    扩大选中区域: Shift + Alt + Right

    缩小当前选择:使用 Shift + Alt + Left

    expandselection.gif

    列(框)选

    通过 Shift+Alt+鼠标拖动

    将光标放在一个角上,然后在按住Shift + Alt的同时拖动到对角:

    在code >= 1.43的版本中,也可以通过 菜单 👉 选择 👉 列选模式;来直接进入列选模式,进入列选模式后会在状态栏显示Column Selection(列选),单击此图标可以退出列选模式。

    column-select.gif

    注意:当使用 Ctrl 作为多光标修改器时,这将更改为 Shift + Ctrl

    移动多个光标

    同时移动多个光标,方法:多光标插入 配合Ctrl + 方向键

    多光标插入:可以是上文介绍的任意一种方式。

    撤消光标位置

    键盘快捷键:Ctrl + U

    在进行多光标插入时如果某个光标位置错误还可以使用 Ctrl + U 进行撤销上次插入。

    快速滚动

    快速滚动: 按Alt键可在编辑器和资源管理器中(5倍)快速滚动。

    上下复制行

    键盘快捷键:Shift + Alt +向上键Shift + Alt +向下键

    copy_line_down.gif

    上下移动行

    键盘快捷键:Alt + UpAlt + Down

    move_line.gif

    选择当前行

    键盘快捷键:Ctrl + L

    官方文档为:快捷键:Ctrl + i

    转到文件中的 Symbol

    在当前文件中查找符号

    键盘快捷键:Ctrl + Shift + O

    find_by_symbol.gif

    您可以通过添加冒号来按种类对符号进行分组@:

    group_symbols_by_kind.png

    转到工作区中的 Symbol

    在当前工作区中查找符号

    键盘快捷键:Ctrl + T

    go_to_symbol_in_workspace.png

    导航到特定行

    键盘快捷键:Ctrl + G

    修剪尾随空格

    键盘快捷键:Ctrl + K Ctrl + X

    trim_whitespace.gif

    括号匹配

    • Mac: cmd+shift+\
    • Windows / Linux: ctrl+shift+\

    代码格式化

    当前选择的源代码:Ctrl + K Ctrl + F

    整个文档格式:Shift + Alt + F

    image

    代码折叠

    键盘快捷键:Ctrl + Shift + [Ctrl + Shift +]

    [图片上传失败...(image-594937-1582878051244)]

    导航到文件的开头和结尾

    键盘快捷键:Ctrl + Home和Ctrl + End

    打开Markdown预览

    在Markdown文件中使用

    键盘快捷键:Ctrl + Shift + V

    并排Markdown编辑和预览:Ctrl + KV

    智能感知

    我们将始终提供单词补全功能。我们也提供了真正的IntelliSense体验。如果语言服务知道可能的补全,则在您键入时会弹出IntelliSense建议。

    Ctrl + Space触发“建议”小部件。

    intellisense.gif

    默认情况下,Tab 或 Enter 表示接受当前选项

    您可以查看可用的方法,参数提示,简短文档等。

    查看定义(peek视图)

    选择一个符号,然后按Alt + F12。或者,使用上下文菜单,选择 快速查看 👉 查看定义。

    peek.gif

    转到定义

    选择一个符号,然后按 F12 或者 按 Ctrl + 单击,或者使用上下文菜单。

    转到定义

    您可以使用Go > Back命令或Alt + Left返回到先前的位置。

    查看引用

    选择一个符号,然后按 Shift + F12。或者,使用上下文菜单 👉 快速查看 👉 查看引用。

    find_all_references.gif

    查找所有引用

    查找所有文件中的引用,Find All References view

    选择一个符号,然后按Shift + Alt + F12打开 “引用”视图,在侧边栏视图中显示文件的所有符号。

    重命名符号⭐

    重构重命名:选择一个符号,然后按 F2 。或者,使用上下文菜单(右键菜单)👉 重命名。

    rename_symbol.gif

    Emmet语法

    支持Emmet语法

    Emmet语法

    Snippets(代码片段)

    Snippets in Visual Studio Code

    触发提示 时(Ctrl + Space) :会显示 Snippet(代码片段) 。

    可以从 Marketplace 安装扩展从而来提供 snippets。

    • vscode-sinppet :适用于多种语言。才知道还有这么个作弊网站 cheat.sh
    • snippet-creator :简化 snippet的创建。 Select the code you want to create snippet from and use command Create Snippet from the command palette

    创建自定义Snippets

    文件👉首选项👉用户代码片段👉选择该snippet用于哪种类型的文件或选择Global Snippets文件

    "create component": {
        "prefix": "component",
        "body": [
            "class $1 extends React.Component {",
            "",
            "\trender() {",
            "\t\treturn ($2);",
            "\t}",
            "",
            "}"
        ]
    },
    

    创建自己的代码段中查看更多详细信息。

    Git集成

    键盘快捷键:Ctrl + Shift + G

    Git集成随VS Code一起提供。您可以从扩展市场中安装其他SCM提供程序。本节描述了Git集成,但是其他UI和手势由其他SCM提供程序共享。

    Diffs 差异比较

    在“ 源代码管理”视图中,选择要比较的文件。

    source-control-icon.png

    并排显示:

    默认为并排比较差异。

    git_side_by_side.png

    内联视图:

    通过单击右上角的“ 更多操作(...)”按钮并选择“ 切换到内联视图”切换内联视图

    git_inline.png

    如果您喜欢嵌入式视图,可以设置"diffEditor.renderSideBySide": false

    审查窗格

    使用 F7 和 Shift + F7 浏览差异。这将以统一的补丁格式显示它们。可以使用箭头键浏览行,然后按 Enter 键将在差异编辑器和所选行中跳回。

    diff_review_pane.png

    编辑待定更改

    您可以直接在diff视图的未决更改中进行编辑

    Branches 分支

    通过状态栏轻松在Git分支之间切换。

    switch_branches.gif

    Staging 暂存

    暂存所有:

    git_stage_all.gif

    暂存文件中的部分内容:

    通过选择文件(使用箭头),然后从“ 命令面板”中选择“ 暂存选定范围”暂存文件的一部分

    撤销上一次提交

    undo_last_commit.gif

    查看Git输出

    VS Code使得查看实际运行的Git命令变得容易。当学习Git或调试困难的源代码控制问题时,这很有用。

    使用切换输出命令(Ctrl + Shift + U),然后在下拉菜单中选择Git

    Gutter 指示符

    边槽指示器

    Gutter 指示器

    如果打开的文件夹是Git存储库并开始进行更改,则VS Code将在装订线和概览标尺中添加有用的注释。

    • 红色三角形表示已删除行的位置
    • 绿色条表示新添加的行
    • 蓝色条表示已修改的行

    解决合并冲突

    在合并期间,转到“ 源代码控制”视图(Ctrl + Shift + G),然后在 diff 视图中进行更改。

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

    git config --global merge.tool code
    

    调试

    配置调试器

    打开 命令面板Ctrl + Shift + P)并输入命令 Debug: Open launch.json ,它将提示您选择与项目(Node.js,Python,C ++等)匹配的环境,这将生成一个launch.json文件。Node.js支持是内置的,其他环境要求安装适当的语言扩展。

    configure_debug.gif

    和其它调试IDE一样,你可以查看变量、堆栈追踪,甚至对变量内容进行更改

    断点和逐步

    断点和逐句通过

    在行号旁边放置断点。使用“调试”小部件向前导航。

    node_debug.gif

    Data inspection(数据检查)

    debug_data_inspection.gif

    内联值

    您可以设置"debug.inlineValues": true为在调试器中内联查看变量值。此功能可能很昂贵,并且可能减慢步进速度,因此默认情况下禁用此功能。

    任务执行器 Task runner

    另可参考下文的 Task 任务

    自动检测任务

    从顶层菜单中选择终端,运行命令 Configure Tasks,然后选择您要运行的任务类型。这将生成一个tasks.json内容如下的文件。有关更多详细信息,请参见任务文档。

    自动生成有时会出现问题。请查阅文档以确保一切正常。

    从终端菜单运行任务

    从顶层菜单中选择Terminal(终端),运行命令Run Task,然后选择要运行的任务。通过运行命令Terminate Task 终止正在运行的任务

    task_runner.gif

    定义任务的键盘快捷键

    您可以为任何任务定义键盘快捷键。在命令面板(Ctrl + Shift + P)中,选择Preferences: Open Keyboard Shortcuts File,将所需的快捷方式绑定到workbench.action.tasks.runTask命令,然后将任务定义为args

    例如,要将Ctrl + H绑定到Run tests任务,请添加以下内容:

    {
      "key": "ctrl+h",
      "command": "workbench.action.tasks.runTask",
      "args": "Run tests"
    }
    

    将npm脚本作为资源管理器中的任务运行

    使用该设置npm.enableScriptExplorer,您可以启用一个浏览器,该浏览器显示在工作空间中定义的脚本。

    script_explorer.png

    在资源管理器中,您可以在编辑器中打开脚本,将其作为任务运行,然后使用节点调试器启动脚本(当脚本定义了诸如的调试选项时--inspect-brk)。单击时的默认操作是打开脚本。要单击运行脚本,请设置npm.scriptExplorerAction为“运行”。使用该设置npm.exclude可以排除package.json特定文件夹中包含的文件中的脚本。

    通过设置npm.enableRunFromFolder,您可以启用从文件资源管理器的上下文菜单中为文件夹运行npm脚本的功能。选择文件夹后,该设置将启用命令Run NPM Script in Folder...。该命令显示此文件夹中包含的npm脚本的快速选择列表,您可以选择要作为任务执行的脚本。

    VS Code的设置

    VS Code提供了两种不同的设置范围:

    • 用户设置 -全局应用于您打开的任何VS Code实例的设置。
    • 工作区设置 -存储在工作区中的设置,仅在打开工作区时适用。

    工作区设置将覆盖用户设置。工作区设置特定于项目,并且可以在项目的开发人员之间共享。

    工作区设置以及调试任务配置存储在.vscode文件夹的根目录中。通过称为“ 多根工作区”的功能,VS Code工作区中还可以具有多个根文件夹。

    工作区文件夹在 .vscode 中 的tasks.json用于任务运行,launch.json用于调试器。

    默认情况下,VS Code显示“设置”编辑器,但是您仍然可以settings.json通过使用Open Settings (JSON)命令 或 通过使用设置更改默认设置编辑器来编辑基础文件workbench.settings.editor

    打开用户设置 settings.json 文件,你可以通过(命令面板)输入命令:Open Settings (JSON) 来打开此文件。

    配置特定于语言的设置

    要按(编程)语言自定义编辑器,请从命令面板(Ctrl + Shift + P)中运行全局命令 Configure Language Specific Settings ,这将打开语言选择器。选择所需的语言,打开带有语言条目的“设置”编辑器,您可以在其中添加适用的设置。

    (还可以是特定文件类型的配置)如果您打开了一个文件,并且想要为此文件类型自定义编辑器,请在“ VS代码”窗口右下方的状态栏中单击“语言模式”。这将打开“语言模式”选择器,并带有一个选项“ 配置基于语言的语言的设置”。选择此项将打开带有语言条目的“设置”编辑器,您可以在其中添加适用的设置。

    以下示例自定义语言模式typescript和的编辑器设置markdown

    {
      "[typescript]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true
      },
      "[markdown]": {
        "editor.formatOnSave": true,
        "editor.wordWrap": "on",
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off"
      }
    }
    

    Task 任务

    Visual Studio Code中的任务

    看起来就像是为了更方便的让我们执行需要在终端运行的命令,你看它位于 菜单 👉终端下

    许多插件可以自动执行诸如整理,构建,打包,测试或部署软件系统之类的任务 ,但安装这些插件后,在对应的工程中,它们会提供一些默认的任务。(对于maven的任务现在正在开发中)。我们可以通过快捷键Ctrl + Shift + B或终端菜单来列出这些任务。

    任务有全局的也有仅用于当前工作空间的(它在项目的.vscode目录下)

    当然你可以自定义任务(为该工程手动创建一个任务):

    菜单 👉 终端 👉 配置任务 👉 选择创建task.json文件 👉 它会提供几个模板,如果模板中没有则选择 Others。

    {
      // See https://go.microsoft.com/fwlink/?LinkId=733558
      // for the documentation about the tasks.json format
      "version": "2.0.0",
      "tasks": [
        {
          "label": "Run tests",  //任务名称
          "type": "shell",      //任务类型:shell(命令)或process
          "command": "./scripts/test.sh",   //实际要执行的命令
          "windows": {  //如果在win中则优先使用下面的内容
            "command": ".\\scripts\\test.cmd"
          },
          "group": "test", //任务所属的 组
          "presentation": { //定义如何在用户界面中处理输出
             //下面表示每次执行任务都让其创建一个新的终端
            "reveal": "always",
            "panel": "new"
          }
            "options":
            "runOptions":
        },
        {
            "label": "Client Build",
            "type":"shell",
            "command": "gulp",
            "args": ["build"], //参数
            "options": { //覆盖 cwd(当前工作目录)、env(环境变量)、shell(默认shell)的值
            "cwd": "${workspaceRoot}/client"
          }
        }
      ]
    }
    

    另外还有:(使用ctrl+space触发提示)

    • options:覆盖 cwd(当前工作目录)、env(环境变量)、shell(默认shell)的值
    • runOptions: 定义何时以及如何运行任务
    • args:命令的参数 示例 ”args”:["folder"]

    对于包含空格或其他特殊字符的命令和参数,Shell命令需要特殊对待

    • 如果提供单个命令,那么任务系统会将命令原样传递给底层shell。如果命令需要加引号或转义才能正常运行,则该命令需要包含正确的引号或转义字符。例如,要列出包含空格的名称中的文件夹的目录,命令在bash执行应该是这样的:ls 'folder with spaces'

      {
        "label": "dir",
        "type": "shell",
        "command": "dir 'folder with spaces'"
      }
      
    • 如果提供了命令和参数,则如果命令或参数包含空格,则任务系统将使用单引号。对于cmd.exe,使用双引号。如下所示的shell命令将在PowerShell中以方式执行dir 'folder with spaces'

    {
      "label": "dir",
      "type": "shell",
      "command": "dir",
      "args": ["folder with spaces"]
    }
    
    • 如果要控制如何对参数加引号,则参数可以是指定值和引用样式的文字。下面的示例使用转义而不是使用空格引号。
    {
      "label": "dir",
      "type": "shell",
      "command": "dir",
      "args": [
        {
          "value": "folder with spaces",
          "quoting": "escape"
        }
      ]
    }
    

    可更改默认终端为 cmd 、bash等

    控制输出行为:

    同设置 presentation 的属性来控制终端行为,有如下属性:

    • reveal :控制是否将集成终端面板置于前面。有效值为:
    • always - 面板总是放在最前面。这是默认值。
    • never - 用户必须使用“ 视图” >“ 终端”命令(Ctrl +`)将终端面板显式显示在最前面 。
    • silent - 仅在不扫描输出中是否有错误和警告的情况下,才将终端面板置于前面。
    • focus:控制终端是否获取输入焦点。默认值为false
    • echo:控制是否在终端中回显执行的命令。默认值为true
    • showReuseMessage:控制是否显示“终端将被任务重用,请按任意键将其关闭”消息。
    • panel:控制是否在任务运行之间共享终端实例。可能的值为:
      • shared共享终端,并将其他任务运行的输出添加到同一终端。
      • dedicated:终端专用于特定任务。如果再次执行该任务,则将重新使用终端。但是,不同任务的输出将显示在不同终端中。
      • new:该任务的每次执行都使用新的干净终端。
    • clear:控制在运行此任务之前是否清除终端。默认值为false
    • group:控制是否使用拆分窗格在特定的终端组中执行任务。同一组中的任务(由字符串值指定)将使用拆分终端显示,而不是新的终端面板。

    下一步

    继续阅读以了解以下内容:

    • 代码导航 -窥视和转到定义等。
    • 集成终端 -了解用于在VS Code中快速执行命令行任务的集成终端。
    • IntelliSense -VS Code带来了智能代码补全功能。
    • 调试 -这是VS Code真正发挥作用的地方

    官方教程

    Documentation for Visual Studio Code

    To get the most out of Visual Studio Code, start by reviewing a few introductory topics:

    Languages - Learn about VS Code's support for your favorite programming languages.

    Node.js - This tutorial gets you quickly running and debugging a Node.js web app.

    Tips and Tricks - Jump right in with Tips and Tricks to become a VS Code power user.

    Writing Java with Visual Studio CodeCode为Java等各种语言提供了详细的文档

    学习文档

    VScode中文文档

    VS Code Tips and Tricks

    Visual Studio Code 配置指南

    Key Bindings for Visual Studio Code

    查看VS Code的自带帮助,来学习它。比如: 帮助 --> 欢迎使用

    Visual Studio Code User and Workspace Settings

    Microsoft/vscode-tips-and-tricks: Collection of helpful tips and tricks for VS Code.

    相关文章

      网友评论

        本文标题:VS Code用户指南与使用技巧

        本文链接:https://www.haomeiwen.com/subject/feplhhtx.html