Zenn
Open4

create-react-app×TypeScript の環境をつくる

React
TypeScript
mnyamnya

参考にさせていただく
https://qiita.com/sanogemaru/items/05c2e9381d6ba2d9fccf

$ npx create-react-app app --template typescript
# # HappyHuckingまで待機 # #

create-react-app に何が含まれているか？
https://qiita.com/naohikowatanabe/items/71a8bf477216ef56a5b7

入れたい設定

ESLint

・リンター。静的解析ツール。コード実行前に検証して、バグを発見する
・コーディング規約を定義できる
・有名なルールセット Google / airbnb / standard
・create-react-appに含まれているので、initで設定ファイルを作成する

Prettier

・コードフォーマッタ。自動整形する
・コードスタイルを統一する

＋

コミット時にコードを自動整形したいので、下記３つをインストールします。
husky
lint-staged
prettier

husky

Github: https://github.com/typicode/husky
Git hook を管理するライブラリ。?
https://zenn.dev/kindmaple/articles/44c3ee41bbfd91

📝 Git hook
・特定のコマンドを操作するときに、特定の処理を走らせるもの
・.git/hooksにインストールされるものなので、Gitで管理できない

📝 husky
・huskyは、Git hookを管理してくれるライブラリ
・huskyにLintやテスト実行の処理設定を記述する..？
・huskyでGit hookを有効にして、package.json に記述する。npm installの対象にする

lint-staged

https://github.com/okonet/lint-staged
ステージングした指定ファイルをLinterにかける。
すべてのコードを対象にするのではなく、コミットされるファイルだけをリンターにかけたい。

＝＝

ふむ..む.....

mnyamnya

husky

とりあえず一旦huskyの設定をおこなおう...適しているかどうかは追って考えてみる

{
	"scripts": {
		"prepare": "cd .. && husky install app/.husky"
		// .gitとpackage.jsonの階層が異なるので、
		// 階層をひとつ下げてinstallを実行する
	}
}

npm run prepare で .husky/ ができるので、pre-commitの設定をおこなう

$ npx husky add .husky/pre-commit "echo \"Hello husky\""

.husky配下にpre-commit ファイルができあがる。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "Hello husky"

これでcommit前にHello huskyが叫ばれるようになる。
echo "Hello husky" のかわりに npm run lint-staged を記述する..？

lint-staged

{
	"lint-staged": {
		// ステージングしたときに行いたい処理を記載する
		"*.{ts,tsx}": [
			"prettier --write"
		]
	}
	"scripts": {
		.....,
		// .husky から呼び出されるコマンド処理
		"lint-staged": "lint-staged"
	}
}

prettier

.prettierrc に設定する

{
	"tabWidth": 4,
	"semi": false,
	"useTabs": true,
	"singleQuote": true,
	"jsxBracketSameLine": true,
	"printWidth": 120,
	"bracketSpacing": true
}

tsconfig.json

baseUrl: "src" 追加しといた

mnyamnya

ESLint

$ npm init @eslint/config
# 設定ファイルを作成する

対話形式で設定する

Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)  # enter

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
# 構文チェック、問題発見、コードスタイルの修正

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
# ESModuleを使う

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? · No / Yes
# TypeScriptを適用する

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? … 
❯ Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript

? What format do you want your config file to be in? … 
  JavaScript
❯ YAML
  JSON
# いままでjsonだったけどyamlにしてみる

Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now? › No / Yes
# Yes インストールもする

? Which package manager do you want to use? … 
❯ npm
  yarn
  pnpm

## Installing...
.eslintrc.yaml
env:
    browser: true
    es2021: true
    node: true
extends:
    - plugin:react/recommended
    - standard-with-typescript
overrides: []
parserOptions:
    ecmaVersion: latest
    sourceType: module
plugins:
    - react
rules: {}

📝 yaml
・基本 key - value で構造化データを表現できるもの
・コメントが...できる...っ！
・タブは...つかえない..っ！

mnyamnya

huskyの動きをみる

コミットしてみる

$ git commit -m 'init'
npm ERR! enoent ENOENT: no such file or directory, open '/Users/.../dirname/package.json'

見つからないな...？

設定を修正する

pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd app # << package.jsonがあるところまで移動する
npm run lint-staged

再実行

> app@0.1.0 lint-staged
> lint-staged

✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 39748bb] init
 8 files changed, 296 insertions(+), 165 deletions(-)

動いた🍰