在Visual Studio 2015中设置TSLint

Question

我使用 Visual Studio 2013 开发 Typescript，并且总是在底部打开错误列表。TSLint可以在编写代码时告诉我代码是否凌乱/不正确。我认为我除了安装Web Essentials插件之外没有做任何其他事情。

我最近安装了Visual Studio 2015，但是无论如何都无法像在Visual Studio 2013中那样使用TSLint。我是否遗漏了一些显而易见的东西？

- TrentVB

Answer 1

现在最简单的方法似乎是从Visual Studio Gallery下载Mads Kristensen的Web Analyzer插件，它包括TSLint支持。

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

(它是免费的)

- Craig Hughes

---

如果您正在使用VS 2017，则官方TSLint存储库中的README链接到此扩展程序：https://marketplace.visualstudio.com/items?itemName=RichNewman.TypeScriptAnalyzer - mark.monteiro

Answer 2

现在您需要使用gulp任务来实现这一点。如果您问我，这有点麻烦，但它确实有效！ 这就是我们的做法：

1. 安装Node：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 任务将保持运行状态，并在保存文件时自动检查文件！

- FiniteLooper

---

如果你想在构建后在Visual Studio的错误列表中显示警告信息，则应使用“msbuild”而不是“prose”，并将其作为一个MSBuild预/后构建任务来调用。 - Alex Wiese

你好，请更新解决方案，使其与最新更改保持一致 https://github.com/panuhorsmalahti/gulp-tslint/blob/master/CHANGELOG.md - shyam_

@shyam_ 没有任何变化足以改变这个答案。它仍然以相同的方式设置。 - FiniteLooper

Answer 3

看起来有一个 NuGet 包可以帮助你。如果你右键单击项目并选择“管理 NuGet 包”，然后搜索 tslint，你会找到一个名为“NCapsulateExtensions.TsLint”的包，它应该适合你。

不过，我个人无法验证这一点，因为该包需要 System.Web.Helpers.dll，而我的机器上没有这个文件（我也找不到它的任何地方）。因此，我查看了 git 存储库，并发现该 nuget 包实际上没有使用这个 dll，并提交了一个 pull 请求以将其删除。同时，我的 fork 可在此处找到：

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

希望您或其他人知道System.Web.Helpers在哪里，这样您就可以安装它并尝试使用，或者作者接受拉取请求并发布新版本。

如果这最终无法正常工作，您需要在项目中执行类似的操作 - 从自定义msbuild任务调用tslint。您还可以克隆此解决方案并手动设置，而不使用nuget - 这只是更多的工作。

- Michael Braude

---

谢谢，我会测试一下。我很确定那个包是为MVC框架设计的，具体是否需要取决于你正在处理什么类型的TypeScript项目。 - TrentVB

您正在寻找的 Palantir 的 tslint 包也可以通过 NuGet 包管理器获得。 - Alex Fainshtein