【问题标题】:Setup TSLint in Visual Studio 2015在 Visual Studio 2015 中设置 TSLint
【发布时间】:2016-01-15 17:40:59
【问题描述】:

我在 Visual Studio 2013 中使用 Typescript 进行开发,并且总是在底部打开我的错误列表。 TSLint 在我编写代码时会告诉我代码是否混乱/不正确。除了安装 Web Essentials 插件之外,我认为我不需要做任何事情。

我最近安装了 Visual Studio 2015,但终生无法让 TSLint 像在 Visual Studio 2013 中那样工作。我是否遗漏了一些明显的东西?

【问题讨论】:

    标签: visual-studio-2015 tslint


    【解决方案1】:

    您现在必须使用 gulp 任务来实现这一点。如果你问我,这有点痛苦,但它确实有效!我们就是这样做的:

    1. 安装节点:https://nodejs.org
    2. 安装 Gulp:http://gulpjs.com
    3. 将 gulp 包安装到项目根目录:
      • 在命令行cd C:\\path\to\project
      • npm install gulp-tslint --save-dev
      • npm install gulp-plumber --save-dev

    可选:

    • npm install gulp-newer --save-dev
    • npm install gulp-watch --save-dev

    现在一切都安装好了!打开 Visual Studio 并将新的gulpfile.js 添加到您的项目根目录,内容如下:

    /// <binding AfterBuild='TSLint:All' ProjectOpened='TSLint:Watch' />
    //Node packages
    var gulp    = require("gulp");
    var plumber = require("gulp-plumber");
    var tslint  = require("gulp-tslint");
    
    //Only include these 2 packages if you've installed them
    var newer   = require("gulp-newer");
    var watch   = require("gulp-watch");
    
    
    //Paths to include/exclude
    var TYPE_SCRIPT_FILES = ["app/**/*.ts", "!app/core/Events.ts"];
    
    //Our TSLint settings
    var TYPE_SCRIPT_REPORT = tslint.report("prose", {
        emitError: false,
        reportLimit: 50
    });
    
    //The actual task to run
    gulp.task("TSLint:All", function () {
        return gulp.src(TYPE_SCRIPT_FILES)
            .pipe(plumber())
            .pipe(tslint())
            .pipe(TYPE_SCRIPT_REPORT);
    });
    
    
    //===== ONly include the below code if needed
    // File locations
    var BIN = "bin";
    
    // Listens for new (updated) typescript files and runs through TSlint
    gulp.task("TSLint:Newer", [], function (done) {
        return gulp.src(TYPE_SCRIPT_FILES)
            .pipe(plumber())
            .pipe(newer(BIN))
            .pipe(tslint())
            .pipe(TYPE_SCRIPT_REPORT)
            .pipe(gulp.dest(BIN));
    });
    
    //This task runs when the project opens. When any file changes, it will be run through TSLint
    gulp.task('TSLint:Watch', function () {
        return gulp.src(TYPE_SCRIPT_FILES)
            .pipe(watch(TYPE_SCRIPT_FILES))
            .pipe(plumber())
            .pipe(tslint())
            .pipe(TYPE_SCRIPT_REPORT)
            .pipe(gulp.dest(BIN));
    });
    

    好的,现在一切都可以使用了!现在在 Visual Studio 中打开 Task Runner Explorer。任务应该出现在这里。

    并不是说您可以告诉每个任务何时运行。您可以通过右键单击每个任务来设置它,它只是添加到gulpfile.js的第一行


    • TSLint:All 任务将对所有指定文件运行 TSLint。
    • TSLint:Newer 任务将对自上次检查以来已更改的所有文件运行 TSLint。
    • TSLint:Watch 任务将继续运行,并在文件保存时自动检查它们!

    【讨论】:

    • 如果您希望警告在构建后显示在 Visual Studio 错误列表中,请使用“msbuild”而不是“散文”并将其称为 MSBuild 预/后构建任务。
    • 嗨,你能用最新的变化更新解决方案吗github.com/panuhorsmalahti/gulp-tslint/blob/master/CHANGELOG.md
    • @shyam_ 没有任何改变足以改变这个答案。它仍然以相同的方式设置。
    【解决方案2】:

    现在看起来最简单的方法是从 Visual Studio Gallery 下载 Mads Kristensen 的 Web Analyzer,它包括 TSLint 支持

    https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d

    (免费)

    【讨论】:

    【解决方案3】:

    看起来有一个 nuget 包可以在这里为您提供帮助。如果您右键单击该项目并选择“管理 NuGet 包”并搜索 tslint,您将找到一个名为“NCapsulateExtensions.TsLint”的包,它应该适合您。

    不过,我无法亲自验证这一点,因为该软件包需要 System.Web.Helpers.dll,而我的机器上没有这个(我也无法在任何地方找到它)。所以,我查看了 git repo 并发现 nuget 包实际上并没有使用这个 dll 并提交了一个拉取请求以将其删除。同时,我的叉子可以在这里找到:

    https://github.com/mbraude/NCapsulateExtensions.TsLint

    希望您或其他人知道 System.Web.Helpers 在哪里,以便您可以安装并尝试一下,或者作者接受拉取请求并发布新版本。

    如果这最终不起作用,您将需要在您的项目中执行类似的操作 - 从自定义 msbuild 任务调用 tslint。您也可以克隆此解决方案并在不使用 nuget 的情况下手动设置它 - 只是需要做更多的工作。

    【讨论】:

    • 谢谢,我会测试一下。我很确定该软件包适用于 MVC 框架,您可能需要也可能不需要,具体取决于您正在处理的 Typescript 项目类型。
    • 您正在寻找的 palantir 的 tslint 包也可以通过 NuGet 包管理器获得。
    猜你喜欢
    • 2017-09-05
    • 2016-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-01
    • 1970-01-01
    • 2017-06-15
    • 1970-01-01
    相关资源
    最近更新 更多