美文网首页
第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