Reactプロジェクトセットアップ
RerrahVite
Viteのガイドに従う．
yarn create vite
以下のプロジェクト設定を対話的に設定する．
- project name: 任意
- framework: React
- variant: TypeScript + SWC
選択後，プロジェクトのディレクトリが作成される．そのディレクトリに入りパッケージをインストールする．
yarn
ESLint
Linting用にESLintを使う．
ESLintはViteのテンプレートで既に用意されている．ただそのままだとPrettierを使う際に規則の競合が起きる．ESLint側で競合する設定を無効にするためeslint-config-prettierをインストールする．
yarn install -D eslint-config-prettier
そのあと，.eslintrc.cjsのextendsの最後に'prettier'を追加する．
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
+ 'prettier'
],
参考:
RerrahPrettier
コードフォーマッターにPrettierを使う．ただし日本語の扱いに難があるため，Markdownなどはフォーマット対象外とする．
フォーマット対象外のファイルは.prettierignoreでリストアップする．
dist/
temp/
*.md
フォーマット設定はガイドを参考に.prettierrc.yamlで定義する．今回は好みでYAMLにした．
tabWidth: 2
trailingComma: "es5"
semi: true
singleQuote: true
EditorConfig
Prettierでは設定できない文字コード設定や，PrettierでオフにしたMarkdownなどのファイルのフォーマットのためにEditorConfigを使う．
.editorconfigに設定を記述する．
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
Git
Gitでコード管理したいときは.gitignoreや.gitattributesを用意しておく．これらは以下のサイトからテンプレートを作成し，適宜修正していく．
RerrahVolta
node.jsやyarnのバージョンも管理したい場合はVoltaなどを使う．
Voltaではpinコマンドでpackage.jsonにバージョン設定が追加される．
volta pin node yarn
package.json:
+ },
+ "volta": {
+ "node": "20.13.1",
+ "yarn": "4.2.2"
}
Biomeが気になる．後で試してみる．
Rerrah上の記事の設定で動作した．こちらの方がモジュールを一つインストールするだけで済むので良さそう．
npx @biomejs/biome initした後にカスタマイズした．
biome.json:
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": false,
"ignore": [
".devcontainer",
".vscode",
"public",
"*.md",
"node_modules"
]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"style": {
"noDefaultExport": "off"
}
}
},
"javascript": {
"formatter": {
"quoteStyle": "double",
"trailingCommas": "es5"
}
}
}
yarnでViteのテンプレートからインストールするとReactの型定義ファイルがうまく認識されない？
npmで行うと問題なく動くので，npmを使ったほうが良さそう...
npm create vite@latest
# cd
npm install
これがその問題．yarn v2からnode_modulesではなくyarn pnpの機能でインストールしているため，通常のリンティングで動作しなくなる．
yarnの設定でpnpではなくnode_modulesにパッケージをインストールするようにすればよい.yarnrc.ymlに以下の設定を記載して解決する．
nodeLinker: node-modules
Editor SDKsを使う方法はbiomeの拡張機能をサポートしていないようなのでやめておく．
RerrahVSCode
ESLintやPrettierの拡張機能をインストールしておく．
dbaeumer.vscode-eslint:
esbenp.prettier-vscode:
.vscode/settings.json:
{
"[typescript][typescriptreact][javascript][html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
Vitest & testing-library
単体テストにはJestではなくVitestを使用する．またtesting-libraryも使う．
npm install -D \
vitest \
happy-dom \
@testing-library/jest-dom \
@testing-library/react \
@testing-library/user-event
tsconfig.json
"compilerOptions"tscのコンパイルオプションを定義する．
paths
パスのエイリアスを設定する．よくsrcディレクトリを"@"として定義する．
"paths": {
"@/*": ["./src/]]
},
なお，Viteを使っている場合はvite.config.tsでエイリアスの設定を行う必要がある．その際にnode:pathのpathを使用するため，@types/nodeをインストールしておく．
diff --git a/vite.config.ts b/vite.config.ts
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
/// <reference types="vitest" />
+import path from "node:path";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
@@ -10,4 +11,9 @@ export default defineConfig({
environment: "happy-dom",
setupFiles: "./vitest.setup.ts",
},
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "src"),
+ },
+ },
});
Proto
Voltaと同じくツールチェーンのバージョン管理ができるツール．
node, npm, yarnだけでなくdenoやbunも管理できる．何ならJS/TSじゃないGoやRustもできる．
サードパーティー製ツールを使えばさらに多くのツールを管理できる．