React 開発日記。開発からデプロイまで。#7

Day#7 ~React x TypeScript~

わんばんこ。みくのすけでおま。

前回まででReactにTailwindCSSを組み込むことができました。今回はReactにTypeScriptを組み込んでいきます。

今回はReact x TypeScript with eslint , prretierを新規に環境構築します。

ゴール

React x TypeScript with eslint , prretierを新規に環境構築

このブログを読むとわかること

• React x TypeScript with eslint , prretierを新規に環境構築できる

React x TypeScript アプリの作成

いきなりですが下記コマンドを実行しまｓ。

yarn create-react-app sample-app --template typescript

以上です。これでTypeScript込みの環境が出来上がりました。

とても簡単ですね。

eslintを組み込む

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

下記コマンドを実行します。

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.js ファイル作成

.eslintrc.js ファイル作成をつくります。ドットがついているので隠しファイルですね。

vscode を使っているなら下記でファイル作れます。または touch .eslint.js でもOK。

code .eslintrc.js

eslintrc.js に以下を記述。

ネットに出ている古い記事だとextendsの部分に”plugin:@typescript-eslint/recommended”,を書いているものもある。しかし、これは不要なので書かないで。

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react"],
  "root": true,
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Prettierを組み込む

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

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc ファイル作成

.prettierrc.json ファイルがなければ以下で作成。

code .prettierrc

自分は以下の様に設定しました。

{
  "printWidth": 120,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

まとめ

苦手な環境設定でしたが意外にサクッとできてしまいました。以前React x eslint , prettier やっていたのが大きいです。

流れとしては

アプリ作成コマンド > eslintインストール > eslintrc.jsonファイル作成 > 設定記述

> prettierインストール > 設定記述 となります。

github

ここまでをgithubにあげておきます。

https://github.com/iwkt/react-typescript

次回はmantineを組み込むです。

Follow me!

@miku_nosuke