きっかけ

最近よく名前を聞くViteです。

個人的に現在はNext.jsでCreate-next-appを使っていますが、一度試してみようと思ったので備忘録メモです。

構築環境

とりあえず大掛かりなものを作る予定ないので、下記の構成ではじめてみます。

React 18.2.0
typeScript 4.9.3
vite 4.1.0
eslint 8.34.0
prettier 2.8.4
tailwindcss 3.2.6

Viteのインストール

いつもnpmを使っているから気分を変えてyarnをインストールしてみる。

npm install yarn

viteのセットアップコマンド

yarn create vite

successしたら、プロジェクト名と利用Frameworkと言語が対話形式で聞かれるので答えてく。

dev viewを立ち上げてみる

プロジェクトファイルに移動して

yarn

yarn dev

localhostのポートはデフォルトで5173のようです。
ここまで2、3分です。とても速い。

package.json

{
  "name": "sample-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

ESlintとPrettierの設定

これに関してはeslintの設定コマンドが変わっていました。

yarn add eslint --save-dev

~~npx eslint --init~~

npm init @eslint/config　 //上でも行けましたが、今はこっちに変わったそう

yarn add prettier --save-dev

yarn add eslint-config-prettier --save-dev

対話形式で初期設定の内容はほぼ変わっていなかったので下記の記事を参照

create-react-app（typescript）のプロジェクトでESlintの設定 | 田舎でのんびり書くテックブログ

.eslintrc.json

中身はこんな感じです。ほぼデフォルト。必要なものは適宜追加です。

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard-with-typescript",
    "plugin:react-hooks/recommended",
    "prettier" //追加←最後に追加しないと機能しないので注意
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest", //デフォルトがlatestになってる
    "sourceType": "module",
    "project": "./tsconfig.json" //追加
  },
  "plugins": [
    "react",
    "react-hooks"//追加
  ],
  "rules": {
    "react/react-in-jsx-scope": "off" //追加
  }
}

react/react-in-jsx-scope

現在React17以降はReactのインポートが不要になっていますが、この設定が有効だとJSXではReactインポートしろと怒られるのでoffにしています

flat config

現在はCLIからデフォルトの利用はできませんが、flat configという概念が持ち込まれたようで、その場合は、設定はすべてeslint.cofig.jsで書くことができるようになる。

ignoreファイルも中に一緒になって、プラグインもインポートで利用するので自分で名前を付けられるようになる。結果メンテコストが下がるようになるそうです。

今回はViteが使いたい趣旨なのと、まだ安定版でないことからあまり深く踏み入らないことにしました。。。詳しい記事をいくつか読みましたがふわっとした理解しか出来なかった😢

ESLintのconfigがどのように変わり得るか（flat configとは何か）

Flat Config導入完了！　新しいESLintの設定フォーマットを使ってみた

どちらも記事内で公式ブログにも飛べます

そもそもESlintの設定も満足に理解できてないのにどんどん変わってくなぁ

Prettier

コード整形は人気のこちらに任せます。

.prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": true,
  "semi": true,
  "singleQuote": false,
  "overrides": [{ "files": "*.js", "options": { "singleQuote": true } }],
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "trailingComma": "none",
  "embeddedLanguageFormatting": "off",
  "plugins": ["prettier-plugin-tailwindcss"],　//tailwindcss設定時に追加
  "pluginSearchDirs": false
}

.eslintignoreと.prettierignore

それぞれ同じ内容です。

node_modules
yarn.lock
public

.setting.json

{
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"editor.formatOnPaste": true,
	"editor.formatOnSave": true,
	"editor.minimap.enabled": false,
	"indentRainbow.colorOnWhiteSpaceOnly": true,
	"editor.quickSuggestions": {
		"comments": false,
		"strings": true,
		"other": true
	},
	"editor.guides.indentation": false,
	"editor.renderLineHighlight": "none",
	"editor.tabSize": 2,
	"editor.cursorBlinking": "expand",
	"files.associations": {
		"*.css": "tailwindcss"
	}
}

TailwindCSSの設定

人気があるのは知っていましたが、もっぱらChakraUIを利用していたのでこちらも試してみようと設定することにしました。公式にWith Viteのやり方があったのでそれで。

Install Tailwind CSS with Vite - Tailwind CSS

yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

生成されたtailwind.config.cjsファイルを下記のように追記します

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    //この中の2行を追加
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.cssを書き換えます

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

app.tsxも書き換えて試しにスタイルを当ててみます

app.tsx

const App :()=>JSX.Element= () =>{
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

export default App;

yarn devしてみると、ちゃんとスタイルが当たっているようです。

VScodeを使っている方は拡張機能を追加するとよい

Editor Setup - Tailwind CSS

拡張機能をインストール後VScodeの設定を書くsetting.jsonに下記を追加

.vscode/setting.json

{
//...
"editor.quickSuggestions": {
  "strings": true
},
"files.associations": {
		"*.css": "tailwindcss"
	}
// ...
}

このようにホバーするとCSSを見れたり、utilityclassの補完が効きます。便利！

Prettierの公式プラグインも設定

こちらはclass属性を自動的にソートしてくれます。

順番がバラバラになりがちですが、自動で並び替えてくれるので可読性もアップ。

複数人で開発するときは、ルール決めなくても揃うので便利ですね。

yarn add -D prettier prettier-plugin-tailwindcss

こちらをインストールして設定に下記を追加

setting.json

{
 // ...
 "plugins": ["prettier-plugin-tailwindcss"],　//tailwindcss設定時に追加
  "pluginSearchDirs": false
 // ...
}

Prettierが動くと並び変わりました！

おわりに

次々に変わっていく技術に追いついていかないですが、Viteの設定は爆速ですし、ESlintやPrettierのルールも徐々に決めていくものなので、十数分もあれば「さぁ開発してこう」ってところまでできます。

ちょっとずつでも、足を止めずに新しい技術に触れる時間を作っていこうと思います。

React＋TailwindCSSプロジェクト with Vite

きっかけ

構築環境

Viteのインストール

dev viewを立ち上げてみる

package.json

ESlintとPrettierの設定

.eslintrc.json

react/react-in-jsx-scope

flat config

Prettier

.prettierrc

.eslintignoreと.prettierignore

.setting.json

TailwindCSSの設定

VScodeを使っている方は拡張機能を追加するとよい

Prettierの公式プラグインも設定

おわりに