Vite +TypeScript + React + Eslint(airbnb) + Prettier + Stylelint + Emotion + Storybook の開発環境構築

npm init vite@latest

# 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

npx eslint --init
✔ 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? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.27.1 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-react@^7.27.1, @typescript-eslint/eslint-plugin@latest, eslint-config-airbnb@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.3, eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-react-hooks@^4.3.0, @typescript-eslint/parser@latest

npm i -D eslint-config-airbnb-typescript

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb',
+   'airbnb-typescript',
+   'airbnb/hooks',
+   'plugin:@typescript-eslint/recommended',
+   'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: 'module',
    project: './tsconfig.json'
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
  },
};

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

  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

 0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: vite.config.ts.
The file must be included in at least one of the projects provided

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

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

21:31  error  Missing trailing comma  @typescript-eslint/comma-dangle

  1:1   error  'vite' should be listed in the project's dependencies, not devDependencies                  import/no-extraneous-dependencies
  1:36  error  Missing semicolon                                                                           @typescript-eslint/semi
  2:1   error  '@vitejs/plugin-react' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies
  2:41  error  Missing semicolon                                                                           @typescript-eslint/semi
  6:21  error  Missing trailing comma                                                                      @typescript-eslint/comma-dangle
  7:3   error  Missing semicolon                                                                           @typescript-eslint/semi

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
+   "lint:eslint": "eslint --ignore-path .gitignore .  --ext .js,.jsx,.ts,.tsx",
+   "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.jsx,.ts,.tsx"
  },
}

import React from "react";

  rules: {
    'react/react-in-jsx-scope': 'off',
  },

  rules: {
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function', // 'function-declaration' | 'function-expression' | 'arrow-function'
      },
    ],
  },

1:1   error  'vite' should be listed in the project's dependencies, not devDependencies                  import/no-extraneous-dependencies

2:1   error  '@vitejs/plugin-react' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies

+ overrides: [
+   {
+     files: ['**/vite.config.ts'],
+     rules: {
+       'import/no-extraneous-dependencies': 'off',
・・・省略
+     },
+   },
+ ],

npm run fix:eslint

14:58  error  'count' is already declared in the upper scope  @typescript-eslint/no-shadow

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

  plugins: [
    'react',
    '@typescript-eslint',
+   'import',
  ],

  overrides: [
    {
      files: ['**/vite.config.js'],
      rules: {
        'import/no-extraneous-dependencies': 'off',
      },
    },
+   {
+     // import/order rules setting
+     files: ['src/**/*.{js,jsx,ts,tsx}'],
+     rules: {
+       'import/order': [
+         'error',
+         {
+           groups: [
+             'builtin',
+             'external',
+             'parent',
+             'sibling',
+             'index',
+             'object',
+             'type',
+           ],
+           alphabetize: {
+             order: 'asc',
+           },
+           'newlines-between': 'always',
+         },
+       ],
+     },
+   },
  ],

npm i -D eslint-plugin-unused-imports

  plugins: [
    'react',
    '@typescript-eslint',
    'import',
+  'unused-imports',
  ],

rules: {
  'react/react-in-jsx-scope': 'off',
  'react/function-component-definition': [
    'error',
    {
      namedComponents: 'arrow-function', // 'function-declaration' | 'function-expression' | 'arrow-function'
    },
  ],
+ '@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: '^_',
+   },
+ ],
},

npm i @emotion/react

npm i -D @emotion/babel-plugin

- plugins: [react()],
+ plugins: [
+   react({
+     jsxImportSource: '@emotion/react',
+     babel: {
+       plugins: ['@emotion/babel-plugin'],
+     },
+   }),
+ ],

{
  "compilerOptions": {
・・・省略
    "jsxImportSource": "@emotion/react"
  }
}

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

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

fix:stylelint

npm i -D prettier eslint-config-prettier stylelint-config-prettier

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

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

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

  "extends": [
・・・省略
    "stylelint-config-prettier"
  ],

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

{
  "recommendations": [
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint",
    "jpoissonnier.vscode-styled-components"
  ]
}

npx sb init

npx sb@next automigrate

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

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

  babel: async (options) => ({
    ...options,
    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
  }),

npm run dev

npm run build

s an 'any' type.
  Try `npm i --save-dev @types/babel__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@babel/core';`

1 import type { ParserOptions } from '@babel/core';

s an 'any' type.
  Try `npm i --save-dev @types/babel__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@babel/core';`

3 import type { TransformOptions } from '@babel/core';

npm i --save-dev @types/babel__core

npm run serve