获取 WebStorm 中依赖 TypeScript 文件的编译错误答案

【问题标题】：Get compile errors for dependent TypeScript files in WebStorm获取 WebStorm 中依赖 TypeScript 文件的编译错误
【发布时间】：2014-01-30 17:57:43
【问题描述】：

我想知道是否有办法让 WebStorm 在编辑后显示相关 TypeScript 文件中的编译错误。例如，假设我有Class1.ts 如下：

class Class1 {
    foo(n: number): number { return 3; }
}

export = Class1;

还有Class2.ts:

import Class1 = require('./Class1');

class Class2 extends Class1 {

    foo(n: number): number { return 4; }
}

现在，假设我编辑Class1.ts 并更改foo 的参数类型：

class Class1 {
    foo(n: string): number { return 3; }
}

export = Class1;

当我执行编辑和保存时，我没有看到任何新的错误出现。如果我将焦点切换到Class2.ts 选项卡，则会出现“不兼容的覆盖”消息。但理想情况下，我希望通过某种方式在进行编辑后查看我在整个项目中引入的所有错误。我可以启用一些视图来完成此操作吗？

【问题讨论】：

我不确定是否有办法在保存时自动执行此操作，但构建项目似乎会为我产生错误。
@user1308743 谢谢！不过，我仍然希望 WebStorm 可以跟踪依赖关系并自动重新编译保存所需的内容，就像 Eclipse JDT 为 Java 所做的那样。
WebStorm 会在每次更改时重新索引文件，并根据代码分析更新编辑器中显示的错误/警告。要在单独的窗口中查看所有这些错误，请运行代码/检查代码。但请注意，与编辑器中的错误标记不同，此窗口不会在文件更改时自动更新。所以每次你想更新它时都需要显式调用它。您可以为此操作分配一些快捷方式并点击它，就像您在 Eclipse 中按 Ctrl+S 以更新问题视图一样：)
@user1308743 你说构建项目为你做这个你选择在Webstorm哪里构建项目？

标签： compilation compiler-errors typescript webstorm

【解决方案1】：

您是否可以选择使用外部文件监视程序？

我发现typescript 的 webstorm filewatcher 有点问题。结果，我禁用了文件监视程序并简单地使用grunt-contrib-watch 代替它。它工作得很好，并且在您需要时提供了更多的灵活性。

你可以在你的gruntfile.js中做这样的事情：

module.exports = function (grunt) {
    var files = [
            'app/**/*.ts'
        ];

    grunt.initConfig({      
        tslint: {
            options: {
                configuration: grunt.file.readJSON("tslint.json")
            },
            files: {
                src: files
            }
        },
        typescript: {
            base: {
                src: files,
                options: {
                    module: 'commonjs',
                    target: 'es5'
                }
            },
            build: {
                src: ['./app.ts'],
                options: {
                    module: 'commonjs',
                    target: 'es5'
                }
            }
        },
        watch: {
            ts: {
                files: ['app/**/*.ts', 'shared/**/*.ts'],
                tasks: ['typescript']
            }
        }
    });

    // Load Tasks
    grunt.loadNpmTasks('grunt-tslint');
    grunt.loadNpmTasks('grunt-typescript');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Register Tasks
    grunt.registerTask('default', ['watch']);   
};

然后只需运行grunt 将执行watch 命令，您可以消除webstorm typescript filewatcher。这将为您提供您在保存时寻找的构建错误。

*注意：我在 gruntfile 中留下了tslint，因为定期在文件上运行tslint 是个好主意，但这当然不是必需的。如果您对此有任何疑问，请告诉我。

【讨论】：

酷！使用这种方法仍然可以在 WebStorm 中导航编译错误吗？
当然。您仍将获得您期望的所有 WebStorm 功能 - 错误突出显示、悬停错误消息等。 grunt watcher 还将映射回项目中的 .ts 文件，因此您将能够看到行号和错误的文件名。
好的，所以我试了一下，它确实在我保存文件时运行“grunt”的终端窗口中显示了所有编译错误。但是，我没有看到 WebStorm 中出现任何错误。我是否错误地运行了“咕噜”？还是我错过了什么？
@ManuSridharan 我想我误解了你之前的评论。当您使用内置文件观察器时，WebStorm 中的错误不一定会像在 WebStorm 底部窗口中那样“弹出”。当您在终端中遇到错误时，它将带有文件名和行。然后，您可以导航到该文件（在 Mac 上为 ⌘ + O），您将看到默认情况下以红色突出显示的错误。所以是的，当您在 WebStorm 中的文件上时，您可以轻松识别错误。不过，您不一定会有“当面”警报，除非您面前有终端。
啊，我明白了。这是一个很好的改进，但不完全是我想要的。一种选择是在文件监视程序之外运行它，这样，您仍然会在 WebStorm 中弹出当前文件时立即收到错误（但需要小心获取损坏的构建输出）。无论如何，非常感谢您的帮助！

【解决方案2】：

仍然是一个手动过程，但最好是猜测您需要打开哪些文件。

选择一个项目根文件夹，按 Ctrl+Shift+A -> Ctrl+Shift+A 启用非菜单操作 -> 键入“运行文件” -> 选择运行文件观察器...。这是另一个问题的答案的一部分。(https://stackoverflow.com/a/26779818/1757491)

【讨论】：

【解决方案3】：

WebStorm 现在支持tsconfig。您需要设置 tsconfig.json 文件，然后转到 File/Settings/Languages & Frameworks/TypeScript 并检查“使用 tsconfig.json”。一旦我这样做了，我就能够（最终）在 TypeScript Compiler 窗口中看到类型错误。这些错误不会像在 Visual Studio 中那样立即出现。但对我来说，它们会在 15 到 30 秒内出现。此外，另一种快速的“ndirty”方法是在操作系统或 WebStorm 中打开一个终端窗口并输入“tsc --watch”。这告诉 TypeScript 编译器立即编译所有内容并向您显示任何错误。 “--watch”表示 tsc（TypeScript 编译器）将继续监视所有 .ts 文件并在终端窗口中显示任何错误。

【讨论】：