ESlint là gì ?

ESLint là một tiện ích linting JavaScript mã nguồn mở ban đầu được tạo bởi Nicholas C. Zakas vào tháng 6 năm 2013. Căn cứ vào những quy chuẩn về cách viết code đã thống nhất từ trước trong công ty hoặc dự án sẽ đặt ra quy chuẩn viết code. Hầu hết các ngôn ngữ lâp trình đều có code linter riêng và đôi khi các linter được kết hợp vào trình biên dịch (complier).
Javascript là ngôn ngữ thuộc dạng loosely-typed, hay bị lỗi trong quá trình viết code. Và do không có quá trình biên dịch mã nên javascript sẽ được chạy theo thứ tự để tìm ra lỗi cú pháp. Công cụ như Eslint cho phép tìm ra lỗi ngay cả khi chúng chưa được chạy.
Lợi ích của ESlint:

• Giúp tự động phát hiện, cảnh báo bug trong quá trình viết code.
• Tiết kiệm thời gian sửa lỗi.
• Giúp code chuẩn hơn, dễ nhìn hơn.

Prettier là gì ?

• Một công cụ format code.
• Hỗ trợ nhiều định dạng.
• Được tích hợp trong hầu hết các IDE, Editor.
  

Husky là gì ?

Husky là một library cho phép chúng ta sử dụng các git hooks còn Lint-staged cho phép ta chạy lint đối với những file đã được staged. Đây là một bộ đôi hoàn hảo giúp chúng ta có thể setup pre-commit check .

Pre-commit check là quá trình kiểm tra sau khi staging changes những đoạn code thay đổi để sẵn sàng cho việc tạo một commit mới. Nếu quá trình này thành công một commit mới sẽ được tạo ra, ngược lại nếu pre-commit check thất bại commit sẽ không được tạo và hiển thị thông báo lỗi cho lập trình viên. Pre-commit check thường được sử dụng cho việc kiểm tra coding styles, coding conventions một cách tự động trước khi các thay đổi code được tích hợp.

Sứ mệnh

Giúp cho đầu ra commit code của tất cả mọi người có code style giống nhau.
Bạn có code theo style riêng nào thì sau khi commit cũng bị format thành style chung

Những gì đã thay đổi ?

a. Các dependencies được thêm

eslint: Upgarde lên version mới nhất (7.29.0)
eslint-loader: Fix bug: Cannot find module 'eslint/lib/formatters/stylish' của eslint.
eslint-plugin-prettier: Chạy prettier dưới các quy tắc của Eslint.
eslint-plugin-react: Các quy tắc cho project React.
eslint-plugin-react-hooks: Thực thi các quy tắc của React Hooks.
prettier: Cài đặt version mới nhất. (2.3.1)
husky: Cài đặt version mới nhất. (6.0.0)
lint-staged: Cài đặt version mới nhất. (11.0.0)

b. Script được thêm

npm run eslint : Kiểm tra code standard cho file js trên toàn bộ project.
npm run eslint:fix : Tự động fix một số issue đơn giản trên toàn bộ project.
npm run prettier : Format code trên toàn bộ project.

c. Pre-commit check

lint-staged sẽ tìm những file .js trong commit rồi lần lượt chạy qua các lệnh:

• eslint để check code standard.
• prettier format lại code theo rule đã đặt.

2 .eslintrc

• Add plugin cho prettier và react-hooks
• Remove react-app khỏi extends vì đã có plugin eslint-plugin-react thay thế

{
    "parser": "babel-eslint",
    "plugins": ["react", "react-hooks", "prettier"],
    "rules": {
        "react/prop-types": [2]
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "settings": {
        "react": {
            "version": "detect" // React version. "detect" automatically picks the version you have installed.
        }
    },
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Khai báo các rule cho Prettier (đề xuất), tham khảo rule tại: https://prettier.io/docs/en/options.html

module.exports = {
    bracketSpacing: true,
    jsxBracketSameLine: true,
    singleQuote: true,
    trailingComma: 'all',
    tabWidth: 4,
    semi: false,
    printWidth: 120,
    arrowParens: "avoid"
}

4. Config cho husky

Trên lý thuyết thì husky setup như trên là đã có thể chạy, tuy nhiên project POS của chúng ta đang để folder React bên trong Source/client/pos nên khi cài husky sẽ không tìm được folder .git.
Mình có tham khảo được 1 solution cho vấn đề này:

Scott Sauber – 1 Jun 21

Using Husky Git Hooks and Lint-Staged With Nested Folders

What is husky? Husky is a JavaScript package that allows you to run some code during various parts of your git workflow. Husky leverages git hooks to allow you to hook into various git events such …

Theo như bài viết trên thì ta cần tạo 1 folder .husky ngang hàng với thư mục .git

File pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
cd ./client/pos/ && npx lint-staged
cd ../clickandcollect/ && npx lint-staged

File .lintstagedrc

{
  "*.{js,jsx}": ["eslint", "prettier --write"]
}

Kết quả