Create React app with Vite and other setting
===


---

###### tags: `vite`, `eslint`, `prettier`

## Commands for creating React App without template

- `npm create vite@latest` and typing `Y`

- Entering your project name

- Select a framework

- Select a variant

- Done! Then run `npm install` and after installing, run `npm run dev`.

## Commands for creating React App with template

- `npm create vite@latest [project name] -- --template react-ts`

- Done! Then run `npm install` and after installing, run `npm run dev`.

## Eslint setup
- npm version 6
- `npm init @eslint/config --config semistandard`
- npm version 7+
- `npm init @eslint/config -- --config semistandard`
- General use (Will be using this)
- `npm init @eslint/config`
- How would you like to use ESLint? (**To check syntax, find problems, and enforce code style**)
- What type of modules does your project use?(**JavaScript modules (import/export)**)
- Which framework does your project use? (Depends on your project)
- Does your project use TypeScript? (**Yes**)
- Where does your code run? (**Browser**)
- How would you like to define a style for your project? (**Answer questions about your style**)
- And answer based on
- Would you like to install them now? (**Yes**)
- `npm i -D eslint-plugin react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest`

- Which pacjage manager do you want to use? (**Depends on you**)

- Install jsx-a11y `npm i eslint-plugin-jsx-a11y --save-dev`
- Install react/hooks `npm i eslint-plugin-react-hooks --save-dev`

- Install airbnb `npm install eslint-config-airbnb-typescript --save-dev`

- Install ESLint TypeScript related dependencies.
- `npm i -D @typescript-eslint/parser eslint-import-resolver-typescript`

- Create `.eslintrc.json`, and setup config

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/no-empty-function": 0,
    "@typescript-eslint/no-unused-vars": 1
  },
  "plugins": ["react", "import", "jsx-a11y", "@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  }
}

## Setup Prettier
- `npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev`

- Creat `.prettierrc` and setup config

{
	"tabWidth": 2,
	"semi": true,
	"singleQuote": false,
	"trailingComma": "all",
	"printWidth": 80,
	"useTabs": false,
	"endOfLine": "auto"
}

## Pre-commit Hook

Here we are going to use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.

- `npx mrm@2 lint-staged`

- `.husky` folder and relevant files would be created automatically.

- This command will be added in `package.json` automatically, but need to amend like below to include all the formats.

- Test, let's change some files and run `git add` and `git commit -m ""`, you should see something like this.
-
- You can only push it after checking is all done, if there's an error, you won't be able to push.