vscodeでtslintを使ったときのメモ

tslintの導入

必要なnpmパッケージのインストール

npm install -g --save-dev gulp typescript
npm install --save-dev tslint gulp gulp-tslint

tslint設定ファイルの用意

project
 - .vscode
   - tasks.json # vscodeからgulpを実行する設定
 - tslint.json  # チェックする項目のルール
 - gulpfile.js  # tslintを実行するタスク
 - package.json
 + node_modules

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "tslint",
            "args": [],
            "problemMatcher": {
                "owner": "tslint",
                "fileLocation": [
                    "relative",
                    "${workspaceRoot}"
                ],
                "severity": "warning",
                "pattern": {
                    "regexp": "^(\\S.*)\\[(\\d+), (\\d+)\\]:\\s+(.*)$",
                    "file": 1,
                    "line": 2,
                    "column": 3,
                    "message": 4
                }
            }
        }
    ]
}

gulpfile.js

'use strict';

const gulp = require('gulp');
const gulp_tslint = require('gulp-tslint');

gulp.task('default', ['tslint']);

gulp.task('tslint', () => {
    return gulp.src(['**/*.ts', '!**/*.d.ts', '!node_modules/**'])
      .pipe(gulp_tslint())
      .pipe(gulp_tslint.report());
});

tslint.json

{
    "rules": {
        "no-unused-expression": true,
        "no-duplicate-variable": true,
        "no-duplicate-key": true,
        "no-unused-variable": true,
        "curly": true,
        "class-name": true,
        "semicolon": ["always"],
        "triple-equals": true
    }
}

実行

[ctrl] + [shift] + [p] でコマンドパレットを開く。

run taskと入力して[enter] → tslintを選択して[enter]

参考

tslint
vscode-tslint
Visual Studio Codeの使い勝手をよくするツール (1/5)
qiita vscode moca
Visual Studio Code を使う上で良くわかっていなかった(基本的な)用語とか
tslint-json
tslint-cli