TypeScript Webpack Problem Matchers for VS Code：优化您的开发流程

TypeScript Webpack Problem Matchers for VS Code 是一款专为使用Webpack的TypeScript项目设计的工具，旨在提升开发者的工作效率。无论您使用的是ts-loader、fork-ts-checker-webpack-plugin v5.0或更高版本，结合ESLint或tslint-loader，本工具都能为您提供全面的问题匹配功能。

主要功能：

• $ts-webpack：捕捉ts-loader报告的错误和警告。
• $ts-webpack-watch：在监视模式下捕捉ts-loader报告的错误和警告。
• $ts-checker-webpack：捕捉fork-ts-checker-webpack-plugin报告的错误和警告。
• $ts-checker-webpack-watch：在监视模式下捕捉fork-ts-checker-webpack-plugin报告的错误和警告。
• $ts-checker-eslint-webpack：捕捉fork-ts-checker-webpack-plugin报告的ESLint错误和警告。
• $ts-checker-eslint-webpack-watch：在监视模式下捕捉fork-ts-checker-webpack-plugin报告的ESLint错误和警告。
• $tslint-webpack：捕捉tslint-loader报告的lint警告。
• $tslint-webpack-watch：在监视模式下捕捉tslint-loader报告的lint警告。

使用方法：

以下示例展示了如何将问题匹配器添加到您的项目中：

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": ["$ts-webpack", "$tslint-webpack"]
        },
        {
            "type": "npm",
            "script": "watch",
            "group": "build",
            "isBackground": true,
            "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
        }
    ]
}

Webpack v5 (webpack-cli@4) 用户注意：

如果您使用的是Webpack v5或更高版本，为了确保watch匹配器正常工作，请在您的webpack监视命令中添加--info-verbosity verbose，例如：webpack --watch --info-verbosity verbose。这将指示webpack为每次重新编译输出生命周期事件消息。

Webpack v4 (webpack-cli@3) 用户注意：

为了确保watch匹配器正常工作，您必须在webpack.config.js中添加infrastructureLogging: { level: "log" }，这将指示webpack为每次重新编译输出生命周期事件消息。

例如：

// webpack.config.js
module.exports = {
    // ...webpack配置
    infrastructureLogging: {
        level: 'log',
    },
};

此外，在使用 $ts-checker-webpack、 $ts-checker-webpack-watch、 $ts-checker-eslint-webpack 和 $ts-checker-eslint-webpack-watch 匹配器时，您还必须在fork-ts-checker-webpack-plugin选项中设置formatter: 'basic'。

自定义使用：

您也可以将任何问题匹配器作为基础匹配器，根据您的需求进行自定义：

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": ["$ts-webpack", "$tslint-webpack"]
        },
        {
            "type": "npm",
            "script": "watch",
            "group": "build",
            "isBackground": true,
            "problemMatcher": [
                {
                    "base": "$ts-webpack",
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": {
                            "regexp": "<您的自定义开始正则表达式>"
                        },
                        "endsPattern": {
                            "regexp": "<您的自定义结束正则表达式>"
                        }
                    }
                },
                {
                    "base": "$tslint-webpack",
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": {
                            "regexp": "<您的自定义开始正则表达式>"
                        },
                        "endsPattern": {
                            "regexp": "<您的自定义结束正则表达式>"
                        }
                    }
                }
            ]
        }
    ]
}

总结：

TypeScript Webpack Problem Matchers for VS Code 为TypeScript开发者提供了一套强大且灵活的问题匹配工具，帮助您在使用Webpack进行开发时更高效地识别和解决问题。无论您是使用ts-loader、fork-ts-checker-webpack-plugin还是ESLint和tslint-loader，本工具都能满足您的需求，提升您的开发体验。