2022年秋版　最新React/Typescript開発環境の作成

npm create vite@latest

// プロジェクト名を入力しエンターキー
? Project name: › vite-project

// 使用するフレームワークを矢印キーで選択しエンターキー
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte

// JavaScript/TypeScriptの選択
? Select a variant: › - Use arrow-keys. Return to submit.
JavaScript
❯   TypeScript

// 以上でプロジェクト完了
Done. Now run:

// プロジェクトフォルダへ移動
cd vite-project
// 必要なパッケージをインストール
npm install
// デバッグ開始
npm run dev

VITE v3.1.6  ready in 439 ms

➜  Local:   [http://127.0.0.1:5173/](http://127.0.0.1:5173/)
➜  Network: use --host to expose

 npm install -D eslint

 npx eslint --init

// ESlintをどのように使いますか？
You can also run this command directly using 'npm init @eslint/config'.
? 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

// どのフレームワークを使いますか？
? Which framework does your project use? …
> React
Vue.js
None of these

// プロジェクトでTypeScriptを使いますか？
Does your project use TypeScript? › No / Yes

// どの環境で動作させますか？
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

// どのフォーマットで設定ファイルを保存しますか？
? What format do you want your config file to be in? …
JSON
> JavaScript
YAML

// 以下のパッケージをインストールしますか？
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? › No / >Yes

// パッケージマネージャーを選択してください。
? Which package manager do you want to use? …
> npm
yarn
pnpm

npx eslint --print-config .eslintrc.cjs > 出力ファイル名.txt

npx install-peerdeps --dev eslint-config-airbnb

npm install -D eslint-config-airbnb-typescript

extends: [
  'airbnb',
  'airbnb-typescript',
  'airbnb/hooks'
  'plugin:react/recommended',
  'plugin:@typescript-eslint/recommended'
],
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: './tsconfig.json'
}

 "include": ["src", ".eslintrc.cjs"],

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

{
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

npm install -D vitest

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },

npm install --D @testing-library/react jsdom @testing-library/user-event @testing-library/jest-dom 

import matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

npm install -D eslint-plugin-testing-library eslint-plugin-jest-dom

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:testing-library/react',
    'plugin:jest-dom/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint', 'prettier', 'testing-library', 'jest-dom'],
  rules: {
   'react/react-in-jsx-scope': 'off',
　　'react/function-component-definition':[2, {"namedComponents": "arrow-function" }],
 },
};

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", ".eslintrc.cjs", "vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

test('should first', async () => {
  // Appコンポーネントを描画
  render(<App />);

　// テキスト「count is」を持っているボタンを検索
  let button = screen.getByRole('button', { name: /count is/i });
　// 検索したボタンのテキストが「count is 0」を確認
  expect(button).toHaveTextContent('count is 0');

　// イベントを発火するユーザをセット
  const user = userEvent.setup();
  // 上記の検索したボタンをクリック
  await user.click(button);
　
　// 再描画されたボタンを取得 取得には正規表現も使えます。
  button = await screen.findByRole('button', { name: /count is \d/ });
　// 取得したボタンのテキストを確認
  expect(button).toHaveTextContent('count is 1');
});