Cài đặt create-react-app

create-react-app (hay thường được viết tắt là CRA) là tool mà facebook viết để tự động hóa các công việc nhàm chán khi dựng một dự án react từ đầu.

Để cài đặt, bạn có thể sử dụng npm hoặc yarn đều được. Vì yarn cũng là của facebook như React, nên tôi hay sử dụng yarn nhiều hơn.

npm i -g create-react-app

hoặc

yarn glocal add create-react-app

Tạo app với typescript

npx create-react-app app --typescript	

hoặc

yarn create-react-app app --typescript

chú ý Tính năng tạo app với typescript chỉ có từ version 2.1.x của CRA, nên tốt nhất là bạn hãy cài phiên bản mới nhất cho chắc.

Setup tslint để hỗ trợ quá trình code

tslint sẽ hỗ trợ kiểm tra syntax code trong quá trình code. Prettier sẽ hỗ trợ tự động format code. Đây gần như là những công cụ không thể thiếu.

yarn add --dev tslint
yarn add --dev prettier
yarn add --dev tslint-config-prettier
yarn add --dev tslint-plugin-prettier
yarn add --dev tslint-react
	

Cấu hình tslint

Tạo file tslint.json với nội dung

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true,
    "interface-name": false,
    "ordered-imports": false,
    "member-access": false,
    "object-literal-sort-keys": false,
    "no-console": false
  }
}

Trong file này, phần quan trọng là mục rules. Ở đây chúng ta liệt kê các rule validate của tslint cần tùy biến tắt bật. Ví dụ, ở đây tôi để no-consolefalse. Vì mặc định nó là true thì trong code sẽ báo lỗi khi sử dụng console.log.

Tiếp đến, ta bổ sung thêm 1 command vào trong package.json để thực hiện validate typescript cho toàn bộ source code.

"scripts": {
	...,
    "lint-ts": "tslint -c tslint.json 'src/**/*.{ts,tsx}'"
  },

để chạy, bạn gõ lệnh yarn lint-ts. Bạn có thể tích hợp lệnh này vào hooks của git/svn để bắt buộc validate typescript trước khi commit code cũng được. Cá nhân tôi thấy thì làm thế hơi khó chịu. Lúc commit code phải đợi hơi lâu một chút.

Ngoài ra, khi enable tslint thì sẽ bị báo lỗi ở file serviceWorker.ts. Bạn có thể đơn giản tắt đi bằng cách disable tslint với toàn bộ nội dung của file đó. Thêm 1 dòng comment với nội dung /* tslint:disable */ vào đầu file để disable tslint.

chú ý Đôi khi phải khởi động lại vscode để nhận được thiết lập của tslint

Cấu hình Prettier

Tạo file .prettierrc với nội dung

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "es5"
}