VSCode使用技巧

前端Debug

VUE + webpack项目debug配置

• 开启webpack的souce map配置

module.exports = {
  publicPath:'/'
  // 在configWebpack中添加devtool属性。
  configureWebpack: {
      name: name,
      devtool: process.env.NODE_ENV === 'development' ? 'source-map' : null,
      ....
  }

  // chainWebpack 方法中配置
  chainWebpack(config) {
      config.devtool('source-map'),
      config.plugins.delete('preload'),
      ....
  }
}

• 配置vscode launch.json文件

在vscode左侧工具栏点击debug按钮，在顶部设置按钮前下拉选择创建config文件。默认配置需要添加额外配置，参考如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch AiStore",
      // 这里的url要和vue.config.js中的devServer配置一致
      "url": "http://localhost:80",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/src/*",
        // 注意：如果js在src下上面上一行配置不起作用，需要用下面一行。放开下面注释后上一行代码不起作用。
        // "webpack:///*": "${webRoot}/*",
      }
    }
  ]
}

VUE + VITE 项目debug配置

vite项目debug相对简单，通过vscode创建后无需修改即可使用。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch admin",
      "url": "http://localhost:80",
      "webRoot": "${workspaceFolder}/src/"，
      // 下面这种配置为多模块项目，如lerna+pnpm-workspace架构
      // "webRoot": "${workspaceFolder}/packages/kplus-admin/src/"
    },
    // 可以配置多个launch,为每个模块配置一个
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch kplus",
      "url": "http://localhost:80",
      "webRoot": "${workspaceFolder}/packages/kplus-web/src/"
    }
  ]
}

Python项目debug配置

python项目debug配置，需要安装debugpy插件，并配置launch.json文件。以下示例为单文件python文件运行并传递参数。注意args一定在数组中。否则会有问题。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "csrc_new_spider",
            "type": "debugpy",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "args": ["spider"],
            "cwd": "${workspaceFolder}", 
            "justMyCode": true,
        }
    ]
}