Cài đặt môi trường để code là điều mà nhiều anh em mới code hay bỏ qua vì nó khá là rườm rà. Nhưng tin mình đi, cài xong rồi thì anh em sẽ code rất là sướng. Sở dĩ mình chọn Visual Studio Code làm editor vì nó miễn phí 😳 , đầy đủ chức năng và được nhiều anh em từ newbie đến pro tin dùng. Thôi lan man thế đủ rồi, đi vào cái chính thôi.

1. Tinh chỉnh Visual Studio Code

Các Extension cần thiết cho Visual Studio Code khi code React

Sau đây là các extension mà mình dùng.

  • Atom One Dark Theme: Theme Atom cho VS Code, đẹp hơn theme mặc định nhiều. Tạo cảm hứng code
  • Auto Close Tag: Tự động đóng tag khi code HTML, JSX
  • Auto Rename Tag: Tự động đổi tên tag khi code HTML, JSX. Kết hợp với Auto Close Tag sẽ thành bộ đôi tuyệt vời
  • Bookmarks: Đánh dấu dòng code để tìm kiếm dễ dàng. Khi code bạn dài ngoằn, việc phải scroll lên, scroll xuống để tìm và code khá mệt mỏi. Lúc này chỉ cần đánh dấu vị trí, sau đó bạn chỉ cần trỏ đến vị trí đó là editor sẽ mở ngay tại vị trí bookmark luôn.
  • Bracket Pair Colorizer: Giúp phân biệt các dấu {()} khi nó trở nên quá nhiều
  • Code Spelling Checker: Kiểm tra lỗi chính tả khi code (tiếng Anh thôi nhé)
  • EditorConfig: Để chạy được file .editorconfig, rất tiện, mình sẽ nói về file này phía dưới
  • ES7 React/Redux/React-Native/JS snippets: Snippet cho React, Redux
  • ESLint: ESLint cho editor
  • GitLens: Quản lý code tốt hơn với git, hiện thông tin người thay đổi file, commit,…
  • html to JSX: Chuyển HTML thành JSX
  • Live Server: Tạo server auto reload khi code html tĩnh
  • Material Icon Theme: Thêm bộ theme icon cho các file, folder giúp bạn nhận biết file nhanh chóng
  • Prettier: Format code đẹp, xịn
  • SVG Viewer: Xem ảnh svg trên editor
  • vscode-styled-components: Highlight và auto-complete cho styled-component như khi code trên file css vậy

Cài đặt Workspace

Cho bạn nào chưa biết thì VS Code có 2 dạng setting, một là cho user, hai là cho workspace. Nếu bạn không set workspace thì mặc định VS Code sẽ lấy setting ở user. Trong bài này thì ta chỉ setting cho workspace thôi nhé.

Và setting cũng có 2 cách setting, 1 là setting bằng file JSON, 2 là bằng UI. Ở đây mình setting bằng file JSON để dễ nhìn hơn nhé. Tạo file ./vscode/settings.json ở thư mục chính

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Giải thích chút nè:

  • Chúng ta chọn Default FormatterPrettier.
  • "editor.formatOnSave": true để khi lưu thì sẽ tự động format (bằng ESLint hay bằng Prettier thì như ta đã định nghĩa phía trên)
  • "eslint.format.enable": true để bật tính năng format code của ESLint
  • "source.fixAll.eslint": true để khi lưu thì ESLint sẽ tự động format và fix lỗi ESLint cho chúng ta luôn.

Bổ sung thêm recommended extension vào workspace, để khi ai mở source code lên thì VS Code sẽ khuyên cài thêm các extension này. Anh em thêm file extensions.json trong folder .vscode nhé. Đây là các extension mà mình vừa liệt kê phía trên, anh em chỉ cần copy file này bỏ vào source thì editor sẽ hiện lên các recommended extension, khỏi cần tìm kiếm từng cái.

{
  "recommendations": [
    "mikael.angular-beastcode",
    "angular.ng-template",
    "coenraads.bracket-pair-colorizer",
    "mikestead.dotenv",
    "dsznajder.es7-react-js-snippets",
    "dbaeumer.vscode-eslint",
    "mkxml.vscode-filesize",
    "ritwickdey.liveserver",
    "davidanson.vscode-markdownlint",
    "pkief.material-icon-theme",
    "zhuangtongfa.material-theme",
    "esbenp.prettier-vscode",
    "syler.sass-indented",
    "octref.vetur",
    "ms-vscode.vscode-typescript-tslint-plugin",
    "visualstudioexptteam.vscodeintellicode",
    "formulahendry.code-runner"
  ]
}

Khi làm việc nhóm, để thống nhất các extension và setting giữa các member với nhau thì ta nên share cái folder .vscode (cứ để nguyên nó trong source, đừng bỏ vào .gitignore là được 😛 ).

Thêm file .editorconfig

Nếu các bạn chưa biết thì EditorConfig sinh ra để thống nhất các chuẩn giữa các editor khác nhau. Ví dụ người thì dùng indentspace, người thì dùng tab; người thì indent là 2, người thì là 4. EditorConfig giúp code chúng ta có tính thống nhất, dễ đọc và dễ bảo trì hơn.

Các bạn tạo file .editorconfig trong thư mục chính của project nhé. Vì đã có cài Editor Config extension phía trên rồi nên khi ta tạo file này, trình duyệt auto sẽ nhận các setting này.

[*]
end_of_line = lf
indent_style = space
indent_size = 2

Cài đặt ESLint và Prettier cho React

Ở đây mình dùng Create React App nên mặc định người ta đã cài bộ ESLint cơ bản rồi, mình chỉ cần cài thêm một vài thứ là project sẽ mượt ngay. Các bạn làm theo các bước sau nhé

Tạo file .env ở thư mục gốc và thêm giá trị này vào EXTEND_ESLINT=true. Mục đích là giúp chúng ta có thể thêm các linter khác vào React.

Cài đặt thêm các package sau npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Thêm scripts này vào trong package.json (mục scripts). Ở đây mình dùng Typescript và có thể là cả Javascript nên đặt là js,jsx,ts,tsx

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

Với những lệnh bên trên thì ta chỉ cần npm linteslint sẽ quét toàn bộ project để tìm lỗi, npm lint:fix thì nó sẽ tự động fix toàn bộ project. Tương tự với prettier

Tạo file .prettierrc . File này quy định các rule cho Prettier

{
  "arrowParens": "avoid",
  "semi": false,
  "trailingComma": "none",
  "endOfLine": "lf",
  "tabWidth": 2,
  "printWidth": 80,
  "useTabs": false
}

Tạo file .prettierignore. File này bảo Prettier là đừng có format tại những đường dẫn được quy định trong đây

.cache
package-lock.json

Tạo file .eslintrc. File này nhằm mục đích mở rộng cấu hình ESLint React giúp bắt lỗi trên terminal, nếu bạn đã cài extension ESLint thì nó sẽ dựa vào file này để bắt lỗi trực tiếp trên editor nữa.

{
  "extends": ["react-app", "prettier"],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "warn",
      {
        "arrowParens": "avoid",
        "semi": false,
        "trailingComma": "none",
        "endOfLine": "lf",
        "tabWidth": 2,
        "printWidth": 80,
        "useTabs": false
      }
    ],
    "no-console": "warn"
  }
}

Chúng ta có thêm một số rule Prettier như đã điền trong .prettierrc vào ESLint để ESLint bắt lỗi luôn phòng khi chúng ta quên format

Tạo file .eslintignore. File này định danh các đường dẫn mà không cần bắt lỗi với ESLint

/src/serviceWorker.js
/src/setupTests.js.js

Tổng kết

Xong rồi đó, trên là cấu hình mà mình dùng cho các dự án React hiện tại. Hy vọng giúp dự án của anh em clean và mượt hơn. Các bạn có thể thay đổi lại một số chỗ cho phù hợp với phong cách của riêng mình chứ không nhất thiết phải y hệt mình 😆

Bài sau mình sẽ đi vào phân tích cấu trúc thư mục best practice React nhé. Chúc các bạn cuối tuần vui vẻ 😛

Link Github: https://github.com/duthanhduoc/React-Folder-Structure