Thiết lập ESLint và Prettier để buộc thực hành tốt nhất và code style
Bây giờ rằng React app của chúng ta đã được thiết lập, chúng ta sẽ thiết lập ESLint để buộc thực hành coding tốt
nhất với Javascript và React. Chúng ta cũng sẽ thiết lập Prettier để buộc một code style và tự động định dạng
code.
Cài đặt các dependencies cần thiết
Trước tiên, chúng ta sẽ cài đặt tất cả dependencies cần thiết
1. Trong terminal, click lên biểu tượng Split Terminal tại đỉnh phải của Terminal pane để tạo một Terminal pane
mới. Cái này sẽ giữ app của chúng ta đang chạy trong khi chúng ta chạy các lệnh khác.
2. Click lên pane được mở mới này để tập trung vào nó. Sau đó, nhập lệnh sau để cài đặt ESLint, Prettier và các
plugins phù hợp.
$ npm install –save-dev prettier@3.1.0 \
eslint@8.54.0 \
eslint-plugin-react@7.33.2 \
eslint-config-prettier@9.0.0 \
eslint-plugin-jsx-a11y@6.8.0
Các gói được cài đặt là những cái sau:
+ prettier: Định dạng code của chúng ta tự động theo code style được định nghĩa
+ eslint: Phân tích code của chúng ta và buộc các thực hành tốt nhât.
+ eslint-config-react: Làm hoạt động các quy tắc trong ESLint phù hợp với các dự án React
+ eslint-config-prettier: Làm cho không hoạt động các quy tắc liên quan đến code style trong ESLint để rằng Prettier
có thể xử lí chúng thay vào.
+ eslint-plugin-jsx-a11y: Cho phép ESLint kiểm tra vấn đề truy cập (ally) trong JSX code của chúng ta.
Chú ý
Cờ –save-dev trong npm lưu các dependencies đó như dev dependencies, cái có nghĩa rằng chúng sẽ chỉ được cài đặt
cho phát triển. Chúng sẽ không được cài đặt và bao gồm trong một ứng dụng triển khai. Cái này là quan trọng để giữ
kích cỡ của các cái chứa của chúng ta nhỏ như có thể sau này.