如何配置VSCode调试器适配Nuxt 2+TypeScript+ESLint？

1. 修正Nuxt配置文件（nuxt.config.js） #

确保TypeScript的source map正确生成，同时调整webpack的devtool设置适配TypeScript源码：

export default {
  server: {
    port: 8080
  },
  sourceMaps: true,
  // 配置TypeScript模块的source map
  typescript: {
    typeCheck: true,
    sourceMap: true
  },
  build: {
    sourceMap: true,
    extend(config, ctx) {
      if (ctx.isDev) {
        // 针对客户端和服务端使用适配TypeScript的devtool
        config.devtool = ctx.isClient 
          ? 'eval-cheap-module-source-map'
          : 'source-map';
        // 强制开启ts-loader的source map
        if (ctx.isClient) {
          const tsLoader = config.module.rules.find(rule => rule.loader === 'ts-loader');
          if (tsLoader) {
            tsLoader.options = { ...tsLoader.options, sourceMap: true };
          }
        }
      }
    },
  },
  modules: [
    '@nuxtjs/eslint-module',
  ],
  // 避免ESLint自动修改源码导致行号错位
  eslint: {
    fix: false,
    emitWarning: true
  }
}

2. 调整VSCode调试配置（.vscode/launch.json） #

添加source map路径映射，确保VSCode关联编译后文件与原始源码：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack://_nuxt/*": "${webRoot}/.nuxt/*",
        "webpack:///*": "${webRoot}/*"
      },
      "skipFiles": [
        "node_modules/**/*.js",
        ".nuxt/dist/client/**/*.js"
      ]
    },
    {
      "type": "node",
      "request": "launch",
      "args": ["dev"],
      "name": "server: nuxt",
      "sourceMaps": true,
      "console": "integratedTerminal",
      "program": "${workspaceFolder}/node_modules/.bin/nuxt",
      "sourceMapPathOverrides": {
        "webpack://_nuxt/*": "${webRoot}/.nuxt/*",
        "webpack:///*": "${webRoot}/*"
      },
      "skipFiles": [
        "node_modules/**/*.js",
        ".nuxt/dist/server/**/*.js"
      ]
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

3. 检查TypeScript配置文件（tsconfig.json） #

确保开启source map且路径配置正确：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@nuxt/types", "@nuxtjs/eslint-module"]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

4. 调试前准备 #

• 删除.nuxt和node_modules/.cache文件夹清理缓存
• 重启VSCode确保配置生效
• 启动fullstack: nuxt复合调试会话，或先启动服务端再启动客户端调试
• 在Vue文件的<script lang="ts">标签或独立.ts文件中设置断点测试

关键说明 #

• eval-cheap-module-source-map是客户端开发环境最优选项：兼顾编译速度与源码映射准确性
• sourceMapPathOverrides是核心：建立Nuxt编译文件与原始源码的路径关联
• 关闭ESLint自动修复：避免修改源码行号干扰断点映射

内容的提问来源于stack exchange，提问作者user21131278