npm init vite@latest

cd starter-vite-react

npm install

  npm run dev

# 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

npm i -D eslint

npx eslint --init

    "extends": [
-       "plugin:react/recommended",
        "airbnb"
    ],

    "extends": [
        "airbnb",
+      "airbnb/hooks"
    ],

npx eslint . --ext .js,.jsx,.ts,.tsx

npx eslint --fix . --ext .js,.jsx,.ts,.tsx 

  overrides: [
    {
      files: ['**/vite.config.js'],
      rules: {
        'import/no-extraneous-dependencies': 'off',
      },
    },
  ],

  "rules": {
+    "react/react-in-jsx-scope": "off"
  }

  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": "arrow-function" //"function-declaration" | "function-expression" | "arrow-function"
      }
    ]
  }

const App = function () {
↓
const App = () => {

<button type="button" onClick={() => setCount((count) => count + 1)}>
↓
<button type="button" onClick={() => setCount((count + 1)}>

npm i -D eslint-plugin-unused-imports

  "plugins": [
    "react",
+  "unused-imports"
  ],

  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function', // "function-declaration" | "function-expression" | "arrow-function"
      },
    ],
    'no-unused-vars': 'off', // or "@typescript-eslint/no-unused-vars": "off",
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'warn',
      {
        vars: 'all',
        varsIgnorePattern: '^_',
        args: 'after-used',
        argsIgnorePattern: '^_',
      },
    ],
  },

    "lint:eslint": "eslint --ignore-path .gitignore . --ext .js,.jsx",
    "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.jsx"

npm i @emotion/react

npm i -D @emotion/babel-plugin

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
});

{
  "emmet.includeLanguages": {
    "typescriptreact": "css",
    "javascriptreact": "css"
  }
}

npm i -D prettier eslint-config-prettier

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

extends: [
///省略
    'prettier',
  ],

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
///省略
}

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

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}",
    "fix:stylelint": "stylelint --fix ./src/**/*.{css,jsx}"

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "javascriptreact", "typescriptreact"]
}

npx sb init

npm i -D eslint-plugin-storybook

npx sb@next automigrate

extends: [
・・・
  'plugin:storybook/recommended',
],

overrides: [
///省略
    {
      files: ['**/*.stories.*'],
      rules: {
        'react/jsx-props-no-spreading': 'off',
      },
    },
  ],

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-react',
                { runtime: 'automatic', importSource: '@emotion/react' },
              ],
            ],
            plugins: ['@emotion/babel-plugin'],
          },
        },
      ],
    });
    return config;
  },
};

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  babel: async (options) => ({
    ...options,
    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
  }),
};