Hello 5 chăm ae 🤣. Bài viết này mình viết ra để lâu lâu tạo dự án thì vào copy cho nhanh á mà hehe. Một phần có gì ae tham khảo cách setup 1 dự án React Typescript như thế nào nhé

1️⃣ Đầu tiên đương nhiên mình phải create react app rồi

yarn create react-app name_project --template typescript

2️⃣ Tiếp theo mình cài Prettier để format code và Eslint để quản lý tiêu chuẩn code cũng như giúp các member trong team thống nhất quy chuẩn lúc dev luôn.  yarn add -D prettier eslint-plugin-prettier eslint-config-prettier. À đừng quên setup editor vscode của mình Default Formatter => Chọn Prettier và Format On Save => true để tiện lúc code nhé

3️⃣ Thêm scripts vào package.json để check và sửa lỗi của eslint và prettier

{
  "lint": "eslint --ext js,jsx,ts,tsx src/",
  "lint:fix": "eslint --fix --ext js,jsx,ts,tsx src/",
  "prettier": "prettier --check \"src/ ** /(*.jsx|*.js|*.tsx|*ts|*.css|*.scss)\"",
  "prettier:fix": "prettier --write \"src/ ** /(*.jsx|*.js|*.tsx|*ts|*.css|*.scss)\""
}

Lúc này bạn chỉ cần chạy – yarn lint để kiểm tra lỗi eslint – yarn lint:fix để fix lỗi liên quan eslint (đôi lúc có những lỗi ae phải tự fix bằng tay nha) – yarn prettier để kiểm tra lỗi prettier format – yarn prettier:fix để tự fix lỗi prettier format

4️⃣ Tạo file .prettierrc để chia sẻ setting prettier giữa các editor. Các bạn có thể tạo ở trang prettier này cũng được nhé

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 80,
  "jsxSingleQuote": true
}

5️⃣ Tạo file .eslintrc để setting eslint

{
  "extends": ["react-app", "prettier"],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "warn",
      {
        "arrowParens": "always",
        "semi": false,
        "trailingComma": "none",
        "tabWidth": 2,
        "endOfLine": "auto",
        "useTabs": false,
        "singleQuote": true,
        "printWidth": 80,
        "jsxSingleQuote": true
      }
    ]
  }
}

6️⃣ Tạo file .editorconfig để chia sẻ một số setting giữa các editor với nhau cho đồng bộ

[*]
indent_style = space
indent_size = 2

7️⃣ À hiện tại Tailwindcss cũng khá trend và dự án hiện tại trên công ty mình cũng dùng nữa nên mình viết sẵn lệnh cài luôn đỡ mất công qua doc 😁

yarn add -D tailwindcss postcss autoprefixer

- Tiếp theo mình chạy npx tailwindcss init để tạo ra file tailwind config 
và edit content trong file lại thành: ["./src/ ** /*.{js, jsx, ts,tsx}"] 
có thể thêm hoặc xóa các option cho phù hợp dự án ae nhé

- Và đừng quên import tailwind vào file css của mình nhé
@tailwind base;
@tailwind components;
@tailwind utilities;

- Nếu ae muốn sort các class của tailwindcss cho dễ nhìn thì
yarn add -D prettier-plugin-tailwindcss