Chromebook（Crostini）に VSCode + React（Vite + TypeScript）環境を構築する手順

概要

Chromebook を使って開発環境の構築を少しずつ進めてきました。
これまでに Linux（Crostini）の有効化や VSCode のインストールまでを試しています。

環境構築まわりの詳細については、以下の記事にまとめています。

今回はその続きとして、React の開発環境を Chromebook 上に構築していきます。

React プロジェクト作成（Vite）

create-react-app を使わない理由

• 軽量で高速
• 現在の主流

プロジェクト作成

bash.

npm create vite@latest my-react-app -- --template react-ts

質問が出たら：

• Package name → そのまま
• Framework → React
• Variant → TypeScript
• use rolldown-vite(Experimental)? → 今は「No」を選んでOK

起動確認

bash.

cd my-react-app
npm install
npm run dev

ブラウザで http://localhost:5173 にアクセスできれば成功！

VSCode 初期設定（React向け）

入れておく拡張機能

• ESLint
• Prettier
• ES7+ React Snippets

settings.json の例

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.eol": "\n",
  "editor.wordWrap": "on"
}

ESLint 設定（Vite + React + TypeScript）

bash.

npm install -D eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import

bash.

npx eslint --init

生成された設定ファイル：

bash.

eslint.config.mts

他にもおすすめの初期設定や拡張機能について以下でまとめてるので良かったら参考にしてください。

まとめ

• Chromebook でも React 開発環境は問題なく構築できる
• Vite + TypeScript + VSCode の組み合わせは快適