【VSCode】TSLintを使用してコードを自動フォーマットする

概要

Visual Studio Code の TSLint拡張機能と tslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。
各種設定や使用ライブラリ等を記載します。

marketplace.visualstudio.com

github.com

実行環境

Node.js - 10.x
Yarn - 1.13.x
Visual Studio Code - 1.31.x
- TSLint - 1.0.0 （TSLintはMS提供の方を使用します。）

使用ライブラリ

TypeScript - 3.2.x
TSLint - 5.11.x
prettier - 1.16.x
tslint-plugin-prettier - 2.0.x
tslint-config-prettier - 1.18.x

設定

ライブラリのインストール

以下のライブラリをインストールする。

yarn add -D tslint
yarn add -D prettier 
yarn add -D tslint-plugin-prettier
yarn add -D tslint-config-prettier

settings.json の設定

以下の設定を ./.vscode/settings.json に記述する。

{
  "tslint.configFile": "tslint.json",
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
  }
}

tslint.json の設定

以下の設定を ./tslint.json に記述する。

{
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ],
  "extends": [
    "tslint:latest",
    "tslint-config-prettier"
  ],
  "rules": {
    "prettier": [
      true, {
        "printWidth": 140,
        "tabWidth": 2,
        "useTabs": false,
        "semi": true,
        "singleQuote": true,
        "trailingComma": "all",
        "bracketSpacing": true,
        "arrowParens": "always"
      }
    ]
  }
}