美文网首页
第6章 进阶应用

第6章 进阶应用

作者: FelixDai | 来源:发表于2022-12-24 23:32 被阅读0次

6.1 命令行

6.2 IntelliSense

6.2.4 自定义IntelliSense

// 控制是否在键入代码时自动显示建议
"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": false
},

// 控制除Tab键外，Enter是否可以同样来接受建议
// on / off / smart (仅当建议中包含文本改动时才可使用 Enter 接受建议)
"editor.acceptSuggestionOnEnter": "on",

"editor.quickSuggestionsDelay": "10",
"editor.suggestOnTriggerCharacters": true,

// 启用Tab补全
// on / off / onlySnippets (在前缀匹配时进行Tab补全，"quickSuggestions")
"editor.tabCompletion": "on",

// 控制排序时是否提高靠近光标的词语的优先级
"editor.suggest.localityBonus": true,

// 控制在建议列表中如何预选建议
// first / recentlyUsed (选择最近的建议除非进一步键入其他项) / recentlyUsedByPrefix (根据之前补全过的建议的前缀来进行选择)
"editor.suggestSelection": "recentlyUsed",

// 是否根据文档中的文字提供建议列表
"editor.wordBasedSuggestions": true,

// 是否在输入时显示含有参数文档和类型信息的小面板
"editor.parameterHints.enabled": true,

6.3 代码导航

6.3.1 文件快速导航

6.3.2 面包屑（Breadcrumbs）导航

"breadcrumbs.enabled": true,

// 控制是否及如何在导航路径视图中显示文件路径
// on / off / last (在导航路径视图中仅显示文件路径的最后一个元素)
"breadcrumbs.filePath": "on",

"breadcrumbs.icons": true,
"breadcrumbs.showArrays": true,
"breadcrumbs.showBooleams": true,
"breadcrumbs.showClasses": true,
"breadcrumbs.showConstants": true,
"breadcrumbs.showConstructors": true,
"breadcrumbs.showEnumMembers": true,
"breadcrumbs.showEnums": true,
"breadcrumbs.showEvents": true,
"breadcrumbs.showFields": true,
"breadcrumbs.showFiles": true,
"breadcrumbs.showFunctions": true,
"breadcrumbs.showInterfaces": true,
"breadcrumbs.showKeys": true,
"breadcrumbs.showMethods": true,
"breadcrumbs.showModules": true,
"breadcrumbs.showNamespaces": true,
"breadcrumbs.showNull": true,
"breadcrumbs.showNumbers": true,
"breadcrumbs.showObjects": true,
"breadcrumbs.showOperators": true,
"breadcrumbs.showPackages": true,
"breadcrumbs.showProperties": true,
"breadcrumbs.showStrings": true,
"breadcrumbs.showStructs": true,
"breadcrumbs.showTypeParameters": true,
"breadcrumbs.showVariables": true,

// 控制如何在导航路径视图中显示符号
// on / off / last (在导航路径视图中仅显示当前符号)
"breadcrumbs.symbolPath": "on",

// 控制导航路径大纲视图中符号的排序方式
// position / name / type
"breadcrumbs.symbolSortOrder": "position",

6.3.3 代码导航右键菜单

6.3.4 跳转到定义

  • F12 或右键菜单中 Go to Definition
  • 按下Ctrl并悬停鼠标在一个符号上，会出现相应的声明预览
  • Ctrl 按住并单击符号，可以跳转到定义
  • Ctrl+Alt 按住并单击，可以把包含定义的文件在另一侧打开000

6.3.5 跳转到类型定义

6.3.6 查找所有引用

6.3.7 通过内联编辑器查看定义和引用

6.3.8 引用信息

6.3.9 跳转到实现

Ctrl+F12，跳转到一个符号的相应实现
如果该符号是一个接口，则会显示接口的所有实现
如果该符号是一个抽象函数，则会显示这个函数的所有具体实现

6.3.10 跳转到文件中的符号

6.3.11 跳转到工作区中的符号

Ctrl+T

6.3.12 括号匹配

Ctrl+Shift+\

6.3.13 错误与警告

如果当前工作区中的文件有错误或警告：

  • 左下角状态栏会显示错误和警告的概况信息
  • 单击状态栏的概况或通过使用 Ctrl+Shift+M，可以调出 PROBLEMS 面板，显示所有的错误和警告
  • 当前文件中，会在有错误或警告的文本下方显示红色的波浪线
  • F8 或 Shift+F8，可以在当前文件的错误和警告之间循环跳转，并查看错误详情

6.4 玩转Git

6.5 打造自己的主题

6.6 快速创建可复用的代码片段

6.6.2 使用代码片段

  • 打开命令面板，输入并执行 Insert Snippet
  • 通过智能提示使用 Enter 或 Tab 选择语句片段

6.6.3 创建自定义的代码片段

  • Preference菜单下使用 User Snippets
  • 命令面板使用 Preferences: Configure User Snippets
    代码片段文件 ***.code-snippets，JSON格式的，并且支持C语言风格的注释。
    下面是 JavaScript 的 for 循环语句的代码片段的一个例子：
// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {  // 代码片段名字
    "prefix": ["for", "for-const"],  // IntelliSense 中触发的单词，字符串的子串也可以作为出发条件，如 "fc" 也会匹配上 for-const
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],  // 定义了要被插入的代码片段，这里一共有3个占位符
    "description": "A for loop."  // 可选项，定义了在 IntelliSense 中显示的描述性文本
  }
}

6.6.4 代码片段的生效范围

  • 语言维度
  • 项目维度

6.6.5 代码片段的语法

  1. Tabstops
    可以使用 $1、$2、$3 等代码片段中的字符来指定光标的位置
    比较特殊的是 $0，它是光标抵达的最后一个位置
  2. 占位符
    包含默认值的 tabstops，如 ${1:foo}
    占位符可以嵌套使用，如 ${1:another ${2:placeholder}}
  3. 选择
    占位符可以把多个值作为文本内容，多个值以逗号分隔，并用管道字符包围。
    如 ${1|one,two,three|}，当代码片段被插入时，会跳转到相应的占位符，然后出现 one, two, three 下拉列表
  4. 变量
    通过 $name 或 ${name:default}可以插入变量的值。
    当变量为空时，会插入默认值或空字符串。

可以使用的变量如下所示：

  • TM_SELECTED_TEXT: 当前被选中的文本
  • TM_CURRENT_LINE: 当前光标所在行的文本
  • TM_CURRENT_WORD: 当前光标所在的单词
  • TM_LINE_INDEX: 从0开始计数的行号
  • TM_LINE_NUMBER: 从1开始计数的行号
  • TM_FILENAME: 当前文件的文件名
  • TM_FILENAME_BASE: 当前文件的文件名，不包含扩展名
  • TM_DIRECTORY: 当前文件的目录名
  • TM_FILEPATH: 当前文件的完整路径
  • CLIPBOARD: 当前剪贴板的文本
  • WORKSPACE_NAME: 当前工作区的目录名

下面的变量可以用来插入日期和时间：

  • CURRENT_YEAR: 当前的年份
  • CURRENT_YEAR_SHORT: 当前年份和后两位数字
  • CURRENT_MONTH: 当前月份的两位数字
  • CURRENT_MONTH_NAME: 当前月份的全称
  • CURRENT_MONTH_NAME_SHORT: 当前月份的简称
  • CURRENT_DATE: 当前月份的某一天
  • CURRENT_DAY_NAME: 当前是星期几
  • CURRENT_DAY_NAME_SHORT: 当前星期几的简称
  • CURRENT_HOUR: 当前的小时数
  • CURRENT_MINUTE: 当前的分钟数
  • CURRENT_SECOND: 当前的秒数
  • CURRENT_SECONDS_UNIX: Unix时间

下面的变量可以用来插入注释，并且会根据不同的语言插入相应的注释：

  • BLOCK_COMMENT_START: 块注释的开始字符
  • BLOCK_COMMENT_END: 块注释的结束字符
  • LINE_COMMENT: 行注释

6.6.6 为代码片段添加快捷键

在命令面板执行 Preference: Open Keyboard Shortcuts (JSON)，打开定义快捷键的 keybindings.json 文件

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    // 引用已有的代码片段
    "langId": "csharp",
    "name": "myFavSnippet",

    // 直接定义代码片段
    "snippet": "console.log($1) $0",
  }
}

6.7 Task, 把重复的工作自动化

可以使用任务自动化的工具：

  • 编译：Typescript 编译器、Java编译器等
  • 静态检查：ESLint、TSLint等
  • 代码构建：Make、Ant、Gulp、Jake、Rake、MSBuild等

Task只能配置在有文件夹打开的项目中

6.7.2 配置一个更复杂的 Task

{
  "version": "2.0.0",
  "tasks": [ 
    {
      "label": "Run tasks",
      "type": "shell",  // or "process" 作为一个进程运行
      "command": "./scripts/test.sh",
      "windows": {  // windows下的配置，相应配置会在windows下覆盖默认定义
        "command": "scripts\\test.bat"
      },
      "args": [ // 当参数包含空格时非常有用
        "arg1",
        "arg2"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      }
    }
  ]
}

6.7.5 问题匹配器

在 tasks.json 文件中使用 problemMatcher 属性来定义相应的问题匹配器

6.7.7 输出行为

  • reveal：控制集成终端是否显示。always / never / silent (当输出不是错误和警告时，集成终端才会显示)
  • focus：集成终端显示时是否取得焦点。默认是 false
  • echo：被执行的命令是否在集成终端中输出。默认值是 true
  • showReuseMessage：是否显示 "Terminal will be reused by tasks, press any key to close it." 提示信息。默认 true
  • panel：控制不同的Task运行时是否共享同一个集成终端。shared (默认值) / dedicated / new
  • clear：每次 Task 运行前是否清除集成终端的输出。默认 false
  • group：控制Task是否在同一个集成终端运行。不同 Task 的 group 属性相同则会复用一个集成终端

6.7.8 运行行为

  • reevaluateOnRerun：执行 Rerun Last Task 时，控制是否重新计算变量。默认 true
  • runOn：指定何时运行 Task。default / folderOpen

6.7.9 变量替换

  1. 预定义的变量
  • ${workspaceFolder}：打开的文件夹的完整路径
  • ${workspaceFolderBasename}：打开的文件夹名
  • ${file}：当前打开的文件的完整路径
  • ${relativeFile}：当前打开的文件的相对 workspaceFolder 路径
  • ${relativeFileDirname}：当前打开的文件所在目录相对于 workspaceFolder 的路径
  • ${fileBasename}：当前打开的文件的文件名
  • ${fileBasenameNoExternsion}：当前打开的文件的文件名，不包含扩展名
  • ${fileDirname}：当前打开的文件所在目录的完整路径
  • ${fileExtname}：当前打开文件的扩展名
  • ${cwd}：Task 启动时的工作目录
  • ${lineNumber}：当前光标所在行号
  • ${selectedText}：当前打开的文件中选中的文本
  • ${execPath}：Visual Studio Code 可执行文件的完整路径
  • ${defaultBuildTask}：默认的 Build Task 的名字

  1. 环境变量
    ${env:NAME}可以引用环境变量，如${env:USERNAME}

  2. 配置变量
    ${config:NAME}可以引用 Visual Studio Code 的设置项。
    如${config:python.pythonPath}将会引用 Python插件的 pythonPath 设置值

  3. 输入变量
    ${input:variableID}，variableID 引用了 tasks.json 文件中的 inputs 部分的配置内容

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run tasks",
      "type": "shell",
      "command": "${input:id}"
    }
  ],
  "inputs": [
    {
      "id": "id",
      "type": "pickString",
      "description": "Select a task to run",
      "options": [
        "echo hello",
        "echo world"
      ]
    }
  ]
}

Visual Studio Code 支持以下3种类型的输入变量：

  • promptString：展示输入框，并获得用户输入的字符串。
    • "description"：在文本输入框中展示的描述信息
    • "default"：输入的默认值
  • pickString：展示一个下拉列表
    • "description"：在文本输入框中展示的描述信息
    • "options"：选项数组
    • "default"：输入的默认值，值必须是下拉列表选项中的一个
  • command：运行任意的命令
    • "command"：要运行的命令
    • "args"：运行命令的参数（可选）

6.8 Multi-root Workspaces

6.9 调试与运行

6.9.5 launch.json调试配置

{
  "version": "2.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",  // or "attach" 附加到一个正在运行的进程中调试
      "name": "Launch Program",

      // 可选属性
      "presentation": "order", // 用于控制调试视图的排列顺序
      "preLaunchTask": "npm: build", // 在调试之前运行的任务
      "postDebugTask": "npm: test", // 在调试之后运行的任务
      "internalConsoleOptions": "neverOpen", // 控制调试控制台的行为
      "serverReadyAction": { // 用于控制调试器何时开始调试
        "action": "openExternally", // 打开一个外部浏览器
        "pattern": "http://localhost:8080", // 用于匹配的正则表达式
        "uriFormat": "http://localhost:8080", // 用于打开的URL
        "matchIsRegex": true // 是否使用正则表达式
      },

      // 绝大多数调试器插件支持以下属性
      "program": "${workspaceFolder}/index.js",
      "args": ["--color"],
      "cwd": "${workspaceFolder}",  // 工作目录，默认为${workspaceFolder}
      "env": { "NODE_ENV": "development" },
      "port": 9229,
      "stopOnEntry": false,
      "console": "integratedTerminal", // 控制调试控制台的行为，可选值：integratedTerminal、externalTerminal、internalConsole、none
    }
  ]
}

6.9.7 变量替换

类似 6.7.9节

6.9.10 多目标调试

在 launch.json 文件中，可以通过 compound 属性配置多目标调试

{
  "version": "2.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server and Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}"
    }
  ]
}

相关文章

网友评论

      本文标题：第6章 进阶应用

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|第6章 进阶应用|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！