[React][TypeScript]create-react-app + tslint + prettier

概要

• create-react-appでtypescript版の雛形を作ってlinter/fomatterの環境を整えるまでの手順メモ

手順

雛形生成

• create-react-appでtypescriptのオプションを付けるとtypescriptで生成できる

npm i -g create-react-app
create-react-app react-ts-sample --typescript
cd react-ts-sample

• 動作確認

npm start
# open http://localhost:3000/

tslintとprettierの追加

• ライブラリをインストール

npm i -D tslint tslint-react tslint-config-prettier tslint-plugin-prettier

• tslint.jsonを作成

tslint.json

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ],
  "rules": {
    "prettier": true,
    "interface-name": false
  }
}

• .prettierrcを作成
  • 好みに合わせて変更して下さい

.prettierrc

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "es5"
}

VSCodeの設定

• VSCodeのformatOnSaveと組み合わせるとより快適になります
• Prettierの拡張機能を追加する

• TSLintの拡張機能を追加する

• 保存時にprettierがかかるように設定を追加する

• 以下の2つの設定を追加

settings.json

{
  "prettier.tslintIntegration": true,
  "tslint.autoFixOnSave": true
}

まとめ

• これらが完了するとVSCode上でのlintエラーの可視化とprettierによる自動フォーマットが可能になります