深入讲解VsCode各场景高级调试与如何使用技巧 代码编写效率提升2倍

• 调试TS项目前，先创建一个TS项目
• 先初始化一个ts程序，生成默认的tsconfig.json文件

# 终端运行
tsc --init
复制代码

• 打开tsconfig.json文件，开启sourceMap选项和指定编译后输出的路径

• 和Debugger for Chrome基本一样，区别在于安装Debugger for Firfox插件，并在launch.json配置中，增加调试Firefox的配置即可，配置如下

{
  "version": "0.2.0",
  "configurations": [
    // 省略Chrome的配置...
    // 下面添加的Firefox的配置
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "jpgack:///src/", "path": "${webRoot}/" }]
    }
  ]
}
复制代码

• 调试时选择对应的调试命令即可

{
  "自动补全console.log": {
    "scope": "javascript,typescript",
      "prefix": "log",
      "body": [
        "console.log('$1');",
        "$2"
      ],
    "description": "输出console.log('')"
  }
}
复制代码

TS中还可以提取接口等等

补充：VsCode扩展插件开发

VsCode扩展插件可以做什么事情？

• 定制主题、文件图标
• 扩展工作台功能
• 创建webView
• 自定义新的语言提示
• 支持调试特定的runtime

基于Yeoman快速开发VsCode插件，步骤如下:

安装Yeoman和用于生成模板的插件VS Code Extension Generator

# 终端运行，主要node版本需要12及以上，node10会安装报错
npm i -g yo generator-code
复制代码

运行yo code创建命令，选择要生成的项目模板。这里演示New extension

根据提示依次选择

生成的内容如下

按F5生成编译项目，此时会自动打开一个新窗口在新窗口按Ctrl+Shfit+P,输入Hello World命令

此时会弹出一个弹窗的效果

至此，一个最简单的插件就完成了

上一页 4 5 6 7 8下一页阅读全文