Vite@React project pre-install

[config] .editorconfig

root = true

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

[config] .eslintrc.json

{
  "env": {
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

[config] .prettierrc.json

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "ignore",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyIe": false,
  "embeddedLanguageFormatting": "off"
}

[Config] babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env ',
    ['@babel/preset-react ', {runtime: ' automatic '}],
  ],
}

[install] Eslint and Prettier

yarn add eslint @babel/eslint-parser prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-storybook -D

[install] Jest install

yarn add jest @types/jest @babel/preset-env @babel/preset-react Babel-jest babel-loader jest-styled-components jest-enviroment-jsdom @testing-library/react @testing-library/jest-dom -D

[install] Styled Components

yarn add styled-components && yarn add @types/styled-components -D