web-dev-qa-db-ja.com

Visual Studio2015でTSLintをセットアップする

Visual Studio 2013でTypeScriptを使用して開発し、常にエラーリストを下部に開いています。 TSLintは、コードを書いているときにコードが乱雑/正しくない場合に通知します。 WebEssentialsプラグインをインストールする以外に何もする必要はなかったと思います。

最近VisualStudio 2015をインストールしましたが、私の人生の間、TSLintをVisual Studio 2013のように機能させることができません。明らかな何かが欠けていますか？

visual-studio-2015tslint
16
TrentVB

今最も簡単な方法は、Visual StudioGalleryからMadsKristensenによるWebアナライザーをダウンロードすることです。これにはTSLintサポートが含まれています

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

（それは無料です）

15
Craig Hughes

これを実現するには、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を開きます。タスクがここに表示されます。

Visual Studio 2015 Task Runner Explorer

それではありません。各タスクにいつ実行するかを指示できます。これは、各タスクを右クリックして設定でき、gulpfile.jsの最初の行に追加されるだけです。

Visual Studio 2015 Task Runner Explorer Bindings

  • TSLint:Allタスクは、指定されたすべてのファイルに対してTSLintを実行します。
  • TSLint:Newerタスクは、最後のチェック以降に変更されたすべてのファイルに対してTSLintを実行します。
  • TSLint:Watchタスクは実行されたままになり、ファイルが保存されると自動的にチェックされます。
10
CBarr

ここで役立つnugetパッケージがあるようです。プロジェクトを右クリックして[NuGetパッケージの管理]を選択し、tslintを検索すると、「NCapsulateExtensions.TsLint」というパッケージが見つかります。

ただし、パッケージにはSystem.Web.Helpers.dllが必要であり、マシンにこれがないため（また、どこにも見つからなかったため）、これを個人的に確認することはできませんでした。そこで、gitリポジトリを調べたところ、nugetパッケージが実際にはこのdllを使用していないことがわかり、プルリクエストを送信して削除してもらいました。それまでの間、私のフォークはここにあります：

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

うまくいけば、あなたや他の誰かがSystem.Web.Helpersがどこにあるかを知っているので、これをインストールして試してみるか、作成者がプルリクエストを受け取って新しいバージョンを公開します。

これが機能しない場合は、プロジェクトで同様のことを行う必要があります。カスタムmsbuildタスクからtslintを呼び出します。このソリューションのクローンを作成し、nugetを使用せずに手動でセットアップすることもできます。

2
Michael Braude