npm create vite@latest starter-vite-react-typescript-airbnb -- --template react-ts

cd starter-vite-react-typescript-airbnb

npm install

.vscode/*
!.vscode/extensions.json

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

"engines": {
  "node": "18.12.0",
  "npm": "8.19.2"
}

engine-strict=true

node -v > .node-version

node -v > .nvmrc

npm i

npm i -D eslint

npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:react/recommended',
    'plugin:jsx-a11y/strict',
    'plugin:react-hooks/recommended',
    'plugin:storybook/recommended',
    'standard-with-typescript',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint', 'testing-library', 'jest-dom', 'import'],
  rules: {
    '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
    'react/require-default-props': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/no-unknown-property': [
      'error',
      {
        ignore: ['css'],
      },
    ],
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function',
        // 'function-declaration' | 'function-expression' | 'arrow-function'
        unnamedComponents: 'arrow-function', // 'function-declaration' | 'function-expression' | 'arrow-function'
      },
    ],
    'import/no-extraneous-dependencies': 'off',
    // importの自動整列
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type'],
        pathGroups: [
          {
            pattern: '{react,react-dom/**,react-router-dom}',
            group: 'builtin',
            position: 'before',
          },
          {
            pattern: '@src/**',
            group: 'parent',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
        alphabetize: {
          order: 'asc',
        },
        'newlines-between': 'always',
      },
    ],
  },
  overrides: [
    {
      files: ['**/tests/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
      extends: ['plugin:jest-dom/recommended', 'plugin:testing-library/react'],
    },
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
}

{
  "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" }]
}

{
 "scripts": {
・・・中略・・・
   "lint:eslint": "eslint --ignore-path .gitignore .  --ext .js,.jsx,.ts,.tsx,cjs",
   "lintfix:eslint": "npm run lint:eslint -- --fix",
 },
}

npm run lintfix:eslint

npm i -D prettier eslint-config-prettier

{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "all"
}

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

extends: [
・・・中略・・・
  "prettier"
],

"format:check": "prettier --check --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,cjs,json,css}'",
"format:fix": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,cjs,json,css}'"

npm i @emotion/react

"compilerOptions": {
    ・・・中略・・・
    "jsxImportSource": "@emotion/react",

plugins: [
  react({
    jsxImportSource: '@emotion/react',
  }),
]

'react/no-unknown-property': ['error', { ignore: ['css'] }]

import { css } from '@emotion/react'

const globalStyle = css`
  :root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }

  a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit;
  }
  a:hover {
    color: #535bf2;
  }

  body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
  }

  h1 {
    font-size: 3.2em;
    line-height: 1.1;
  }

  button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
  }
  button:hover {
    border-color: #646cff;
  }
  button:focus,
  button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
  }

  @media (prefers-color-scheme: light) {
    :root {
      color: #213547;
      background-color: #ffffff;
    }
    a:hover {
      color: #747bff;
    }
    button {
      background-color: #f9f9f9;
    }
  }
`

export default globalStyle

import React from 'react'
import { Global } from '@emotion/react'
import ReactDOM from 'react-dom/client'
import App from './App'

import globalStyle from './styles/globalStyle'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Global styles={globalStyle} />
    <App />
  </React.StrictMode>
)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import { css } from '@emotion/react'

const styleApp = css`
  & {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
  }

  @keyframes logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
      animation: logo-spin infinite 20s linear;
    }
  }

  .card {
    padding: 2em;
  }
  .read-the-docs {
    color: #888;
  }
`

const App = (): JSX.Element => {
  const [count, setCount] = useState(0)

  return (
    <div className="App" css={styleApp}>
      <div>
        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank" rel="noreferrer">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
    </div>
  )
}

export default App

npm i -D stylelint stylelint-config-recess-order stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js stylelint-config-prettier

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-prettier"
  ],
  "rules": {},
  "overrides": [
    {
      "files": [
        "**/*.jsx",
        "**/*.tsx"
      ],
      "rules": {
      },
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

"lint:stylelint": "stylelint ./src/**/*.{css,jsx,tsx}",
"lintfix:stylelint": "stylelint --fix ./src/**/*.{css,jsx,tsx}",

npx sb@next init --builder=vite

extends: [
・・・中略
+  'plugin:storybook/recommended',
  'prettier'
],

import type { Meta, StoryObj } from '@storybook/react'

import App from '../App'

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof App> = {
  title: 'App',
  component: App,
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
  tags: ['docsPage'],
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {}
}

export default meta
type Story = StoryObj<typeof App>

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Default: Story = {
  // More on args: https://storybook.js.org/docs/react/writing-stories/args
  args: {}
}

npm i -D stylelint-config-prettier

{
  "extends": [
    // other configs ...
    "stylelint-config-prettier"
  ]
}

npm install -D vitest

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

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);

/* eslint-disable @typescript-eslint/triple-slash-reference */
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react'
    })
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTest.ts']
  }
})

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

test('should first', async () => {
  // 描画
  render(<App />)

  let button = screen.getByRole('button', { name: /count is/i }) 
  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')
})

npm run test

npm run coverage

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

plugins: ['react', 'react-hooks', '@typescript-eslint', 'testing-library', 'jest-dom'],

  overrides: [
    {
      files: ['**/tests/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
      extends: ['plugin:jest-dom/recommended', 'plugin:testing-library/react']
    }
  ],

npm i -D vite-tsconfig-paths

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react'
    }),
+    tsconfigPaths()
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTest.ts']
  }
})

    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }

  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
  "path-autocomplete.extensionOnImport": true

npm run build

npm run preview

npm run build-storybook

npx http-server ./storybook-static

npm i -D  @types/node

npx npm-check-updates

npx npm-check-updates -u

npm i

import { css } from '@emotion/react';
+ // https://github.com/csstools/sanitize.css#install
+ import 'sanitize.css';
+ import 'sanitize.css/forms.css';

const GlobalStyle = css`
///省略
`;
export default GlobalStyle;

import { css } from '@emotion/react';

// reset css
// https://github.com/csstools/sanitize.css#install
import 'sanitize.css';
import 'sanitize.css/forms.css';

const globalStyle = css`
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Roboto:wght@400;700&display=swap');

  :root {
    --font-color-base: #090a0a;
    --font-family-base: Inter, Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --font-weight-base: 400;
    --line-height-base: 1.5;
    --bg-color-base: #fcfcfc;
  }

  [lang='ja'] {
    --font-family-base: 'Roboto', 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-base);
    color: var(--font-color-base);
    background-color: var(--bg-color-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
`;

export default globalStyle;

  "rules": {
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
  },