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