create React TS project with Vite - kordobby/leetrue-ui-library GitHub Wiki

create project

yarn create vite

• check the options that you have to select.
  • Project name : ex) project-sth
  • framework : ext) React
  • variant : ext) Typescript + SWC

install base packages

yarn

eslint & prettier

yarn eslint --init

• check the options that you have to select.

  • how would you like to use ESLint? : ex) problems
  • What type of modules does your project use? : ex) esm
  • Which framework does your project use? : ex) react
  • Does your project use TypeScript? : ex) yes
  • Where does your code run? : ex) browser
  • What format do you want your config file to be in? : ex) javascript
  • Would you like to install them now? : ex) yes
  • Which package manager do you want to use? : ex) yarn

• if you select all options, .eslintrc.json file will be created automatically at root folder.

install packages for typescript

yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

edit package.json

• "lint" : check all files follow the rules
• "lint:fix" : check and fix with rules

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
  },

install prettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

create .prettierrc at root

{
  "printWidth": 120,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "arrowParens": "always"
}

edit package.json

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
    "format": "prettier --write --cache .”
  },

edit eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks",
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "prettier/prettier": [
            "error",
                {
                "endOfLine": "auto"
            } 
        ]
    }
}