Reacter

The special template for React

Feature

• Tailwind x React
• React Router

Prettier

Link

• Install

npm install --save-dev --save-exact prettier

• Create file

# .prettierrc.json
echo {}> .prettierrc.json
# .prettierignore
build
coverage
REDME.md

• Formating

npx prettier --write .
# check special file
prettier --write app/<your_directory>

• Check everyone run

npx prettier --check .

• Watch for change

#package.json
{
  "scripts": {
    "prettier-watch": "onchange \"**/*\" -- prettier --write --ignore-unknown {{changed}}"
  }
}

ESlint

• ESlint + prettier. (Link)

npm install --save-dev eslint-config-prettier

• Create file

npm init @eslint/config

Run

npx eslint <yourfile.js>

• Auto fix on save

# settings.json
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]

• ESlint + React. (Link)

Editorconfig

# .editorconfig
[*]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 4
max_line_length = 80

Husky + Lint-staged

Link

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"
# package.json
"lint-staged": {
        "**/*": "prettier --write --ignore-unknown"
    },
"husky": {
    "hooks": {
        "applypatch-msg": "echo \"[Husky] applypatch-msg\"",
        "pre-applypatch": "echo \"[Husky] pre-applypatch\"",
        "post-applypatch": "echo \"[Husky] post-applypatch\"",
        "pre-commit": "prettier --write . && git add -A ."
    }
}
"script":{
    "pre-commit": "lint-staged",
}

Store with Zustand

Link

PWA with Vite

Link