React × TypeScript × ESLint × Prettier 環境構築

公開日:2019-08-12
最終更新:2019-08-12

毎回環境構築のたびに引っかかってる気がするのでメモ。

React × TypeScript

とりあえずCreate React App
今回はTypeScriptなのでオプションを忘れないように。

$ mkdir sample_app  
$ cd sample_app  
$ yarn create  react-app . --typescript  

ESLint

ESLintのブログで、「これからはtypescript-eslint-parserの代わりに@typescript-eslint/parserを使ってね、細かいことはtypescript-eslintのリポジトリを見てね(雑訳)」と書いてあります。
が、@typescript-eslint/parser自体はCreate React Appが既にインストールしてくれています。おまけに自動で利用してくれるように設定してくれているようです。何もすることがねぇ。
せっかくなのでpackage.json中のeslint設定を.eslintrc.jsonに切り離しておきましょう。
ついでにyarn lintでeslintが動くようにすればOKですね。

// .eslintrc.json  
{  
  "extends": [  
    "react-app"  
  ]  
}  
// package.json  
{  
  {……},  
  "scripts": {  
    "start": "react-scripts start",  
    "build": "react-scripts build",  
    "test": "react-scripts test",  
-    "eject": "react-scripts eject"  
+    "eject": "react-scripts eject",  
+    "lint": "eslint src --ext .ts --ext .tsx"  
  },  
-  "eslintConfig": {  
-    "extends": "react-app"  
-  },  
  {……}  
}  

Prettier

Prettier、好きですか? 私は大好きです。
PrettierをESLintに適用する方法は公式に書いてあるので、見ながらやっていきましょう。
とりあえずESLintのルールは消さない方向でいきます。

まずはPrettier本体とESLint用のプラグインを導入します。

yarn add -D prettier eslint-plugin-prettier  

次にESLintの設定を修正してPrettierを利用するようにします。

// .eslintrc.json  
{  
  "extends": [  
    "react-app"  
-  ]  
+  ],  
+  "plugins": ["prettier"],  
+  "rules": {  
+    "prettier/prettier": "error"  
+  }  
}  

必要な人は.prettierrc.jsonも作成しましょう。ちなみに私はシングルクォート派です。

// .prettierrc.json  
{  
  "singleQuote": true  
}  

最後にlintコマンドにfixオプションを付ければ完了です!

// package.json  
{  
  {……},  
  "scripts": {  
    "start": "react-scripts start",  
    "build": "react-scripts build",  
    "test": "react-scripts test",  
    "eject": "react-scripts eject",  
-    "lint": "eslint src --ext .ts --ext .tsx"  
+    "lint": "eslint src --ext .ts --ext .tsx --fix"  
  },  
  {……}  
}  

一昔前はTSLintを入れてpluginを入れて設定して……と面倒だった気がしますが、少し勉強をサボっている間にまた進化しているようですね。
ちゃんと公式資料を見ていれば簡単に設定できました。

そろそろ周辺技術を齧って遊んでいないで、ちゃんと動くものを作りたいところです。

参考資料

Create React App Adding TypeScript
ESlint
Prettier
teppeis blog
create-react-app + tslint + prettier

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
だらだら更新していきたい技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする