技術ブログ KtBlog

はじめに

Vite, React, MUI, Biomeの環境構築した際の手順を備忘録として記述しました。
それぞれの詳細については、言及していませんのであらかじめご了承ください。

Vite: 高速なフロントエンド開発ツール。従来のビルドツール(Vue CLI等)に比べて、高速で動作する。
React: ユーザインターフェース構築用のjsライブラリ
Biome: 高速なLinter/Formatterツール。EslintやPrettierを設定しなくて済む。
MUI: React向けのUIコンポーネントライブラリ

開発環境

node: 20.7.0
vite: ^5.1.4
react: ^18.2
mui: "^5.15.11
biome: ^1.5.3

環境構築

reactの導入

viteによるreactアプリ作成

// react-sample-appの部分はプロジェクト名を入力
mkdir react-sample-app
cd react-sample-app

npm create vite@latest . -- --template react-ts

MUIの導入

MUIのインストール

npm install @mui/material @emotion/react @emotion/styled

※material iconを使いたい場合は、@mui/icons-materialを追記

MUI動作確認

src配下の`App.tsx`を以下コードに修正

CssBaseline：MUIが用意しているリセットCSS

import { Button, CssBaseline } from "@mui/material";

function App() {
    return (
    <>
        <CssBaseline />
        <Button variant="contained">Hello world</Button>
    </>
    );
}

export default App;

npm run devを実行し、ブラウザで「HELLO WORLD」のボタンが表示されれば完了！

おまけ

Button内の文字が全て大文字に変更されるのが気になる場合は以下のようにApp.tsxを修正すれば改善します

import { styled } from "@mui/material/styles";  // 追記
import { Button, CssBaseline } from "@mui/material";

// 追記
const StyledButton = styled(Button)({
    textTransform: "none",
});

function App() {
    return (
    <>
        <CssBaseline />
        <StyledButton variant="contained">Hello world</StyledButton>
    </>
    );
}

export default App;

Biomeの導入

biomeのインストール

npm install --save-dev --save-exact @biomejs/biome

biomeの設定ファイル作成

下記コマンドを実行し、biome(biome.json)の設定ファイルが作成されます。

npx biome init

設定ファイルの追記

filesと、formatterプロパティを追加してください。

今回は、推奨ルールのまま進めていきます。カスタマイズしたい方はこちらを参照してください

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  // 追記
  "files": {
    "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx"]
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  // 追記
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "lineWidth": 80,
    "indentWidth": 2
  }
}

package.jsonにlint/formatコマンド追記

npmコマンドでlint/formatを走らせるよう、package.jsonに以下プロパティを追加します。

...
"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "lint:check": "biome lint ./",  // 追記(lintチェック)
  "format:check": "biome format ./",  // 追記(formatチェック)
  "lint:fix": "biome format --write ./ && biome lint --apply ./"  // 追記(format&lint fix実行)
},
...

vscodeの設定変更　※vscodeを使っていない方は飛ばしてください

リアルタイムに自動lint&formatが実行されるようvscodeの設定を変更していきます。

拡張機能の追加

以下拡張機能を追加します。

biomeは、現状cssファイルに対応していないので、 pritteirも併用します。

biome拡張機能："biomejs.biome",
prettier拡張機能："esbenp.prettier-vscode"

settings.jsonの作成

プロジェクトフォルダ直下に、.vscode/settings.jsonを作成し、以下内容を記述してください。

ts,js,tsx,jsx以外のファイルは、prettierに任せます。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

{"quickfix.biome": "explicit"}：ファイル保存時にコードの問題を自動修正する設定
{"source.organizeImports.biome": "explicit"}：ファイル保存時にimport文の自動整理設定

動作確認

vscodeを再起動し、App.tsxのsave時に、以下import文が入れ替わったらok

import { styled } from "@mui/material/styles";
import { Button } from "@mui/material";

↓　save後自動フォーマット

import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";

path aliasの設定　※おまけ

個人的に、絶対パスでコンポーネント等のファイルをimportした方が好きなので、最後にその設定方法を紹介します。

@から始まるパスとしてimportできるように設定します。

// 相対パスによるimport
import Button from '../../components/Button'

// 絶対パスによるimport
import Button from '@/components/Button'

tsconfig.jsonの修正

プロジェクトフォルダ直下にあるtsconfig.jsonのcompileOptionsに、baseUrlとpathsを設定します。

{
  "compilerOptions": {
    ...
    /* ailias設定 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  ...
}

vite.config.tsの修正

プロジェクトフォルダ直下にあるtsconfig.jsonのresolve.aliasを設定します。

export default defineConfig({
  plugins: [react()],
  // 追記
  resolve: {
    alias: [{ find: '@', replacement: '/src' }]
  },
})

これで@/* でimportできるようになります。

【React , Vite , MUI , Biome】環境構築