【Typescript / React 備忘録】create-react-app で TSLint + prettier + VSCode で快適にコードを書く

TL;DL 🗒

• create-react-app でコードフォーマットをファイル保存時に自動で行うようにするための環境構築

手順

環境

• node v8.10.0
• yarn v1.7.0
• Typescript v2.9.2
• TSLint 5.10.0

手順

プロジェクトの作成

$ npx create-react-app --scripts-version=react-scripts-ts app
$ cd app

tslint.json の編集

フォーマットルールには tslint:recommended ではなく airbnb を利用してみる 必要な package は 以下の通り

{
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ],
  "extends": [
    "tslint-config-airbnb",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "rules": {
    "prettier": [
      true,
      {
        "singleQuote": true,
        "semi": true
      }
    ]
  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  }
}

• prettier
• tslint
• tslint-config-airbnb
• tslint-config-prettier
• tslint-plugin-prettier
• tslint-react

まとめてインストール

yarn add prettier tslint tslint-config-airbnb tslint-config-prettier tslint-plugin-prettier tslint-react

Visual Studio Code の 設定

setting.json に以下の設定を追加

{
    "editor.formatOnSave": true,
    "tslint.autoFixOnSave": true,
}

以上、おしまい