Xin chào, mở màn cho năm mới 2020 mình sẽ viết về một vấn đề liên quan đến source version control mà cụ thể đó là git. Trong quá trình làm việc theo một team, thì việc có một sự thống nhất về coding convention là một điều rất cần thiết. Đó là lý do ra đời của các linter. Tuy nhiên, không điều gì đảm bảo cho việc developer sẽ kiểm trả code của mình trước khi tích hợp nó vào. Vậy nên git đã cho ra đời một công cụ giúp xử lý việc đó chính là pre-commit
Bài viết hôm nay, chúng ta sẽ tìm hiểu cơ chế hoạt động của git pre commit thông qua một ví dụ cụ thể.
Chúng ta sẽ đi qua một số mục sau của bài viết

Pre commit là gì?
Áp dụng pre commit vào ví dụ cụ thể.

1. Pre commit là gì?

Để hiểu khái niệm pre commit là gì thì trước tiên ta sẽ tìm hiểu khái niệm git hooks là gì?

What are git hooks?

Git hooks là một tính năng built-in của git. Bản chất của nó là những đoạn script sẽ được thực thi trước hoặc sau một sự kiện của git được diễn ra như commit, push …
Ví dụ:

pre-push: script này sẽ được thực hiện trước khi event push được thực hiện
post-push: script này sẽ được thực hiện sau khi event push được thực hiện

Và còn nhiều hooks khác được định nghĩa, các bạn có thểm tham khảo thêm tại đây.

Pre commit

Như đã nói ở trên, pre commit là cũng là 1 hook của git, nó có tác dụng thực hiện đoạn script được gán cho nó trước khi event commit được thực thi.
Cụ thể hơn, khi bạn gõ git commit -m "test commit" và enter. Thì ngay trước khi lệnh này được chạy thì đoạn script được gán cho pre-commit hook sẽ được thực thi.

2. Áp dụng pre commit vào ví dụ thực tế.

Trong phần trước chúng ta đã tìm hiểu khái niệm về pre commit, ở phần này mình sẽ thực hiện một ví dụ để các bạn hiểu hơn pre commit hoạt động trong thực tế cụ thể thế nào.
Lấy ngữ cảnh là bạn đang làm 1 project cùng với nhiều team member khác và đang sử dụng eslint làm linter cho project của mình. Và để đảm bảo mỗi lần code được commit lên đều theo đúng chuẩn thì chúng ta cần chạy linter cho tất cả các file chúng ta commit. Đây chính là thời điểm pre commit vào cuộc.

Đầu tiên mình sẽ khởi tạo một project bằng npm

# create new folder for our demo project $ mkdir pre-commit-demo && cd pre-commit-demo # init by npm project $ npm init -y # init git for this project $ git init

Mình sử dụng eslint với config của airbnb để làm linter, vì vậy mình cần cài đặt các package liên quan như sau

# install related packages $ npm install --save-dev eslint babel-eslint eslint-config-prettier eslint-config-airbnb-base eslint-plugin-prettier eslint-plugin-import

Tạo file .eslintrc và config cho ESlint

# create .eslintrc $ touch .eslintrc

{ "env": { "es6": true, }, "extends": [ "airbnb-base" ], "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "ecmaFeatures": { } } }

Viết các đoạn script cần thiết trong package.json

{ ... "script": { "start": "node index.js", "lint": "eslint *.js" } }

Tạo 1 file index.js để chạy thử eslint

// index.js const add = (a, b) => { console.log('A:', a) console.log('B:', b) return a + b; }

Sau đó chạy npm run lint và ta được kết quả như sau

Như vậy linter của chúng ta đã hoạt động tốt

Bước tiếp theo chúng ta sẽ cài đặt husky. Husky là một package cho phép chúng ta sử dụng các git hook, và cụ thể ở đây sẽ là pre commit hook

$ npm install husky --save-dev

Sau đó setup trong package.json cho husky như sau:

... "husky": { "hooks": { "pre-commit": "npm run lint", } }

Bây giờ chúng ta tiến hành commit code.

$ git add . $ git commit -m "first commit"

Và chờ xem kết quả:

Các bạn có thể thấy, khi chúng ta commit, husky sẽ trigger script của pre commit là thực hiện lệnh npm run lint để kiểm tra toàn bộ các file js của chúng ta và phát hiện nó chưa đúng chuẩn airbnb nên đã báo lỗi và không cho thực hiện commit đó.

Để có thể commit được, chúng ta sửa code ở index.js như sau để thoả mãn chuẩn của eslint

const add = (a, b) => { console.log('A:', a); console.log('B:', b); return a + b; }; add();

Bây giờ chúng ta tiến hành commit code một lần nữa

$ git add .$ git commit -m "first commit"

Và được kết quả:

Việc commit đã thành công và đảm bảo rằng file của chúng ta thoả mãn coding convention của team.

Kết

Như vậy chúng ta đã vừa hoàn thành xong 1 ví dụ sử dụng pre commit để cải thiện chất lượng của commit. Các bạn có thể cải thiện thêm bằng cách config để eslint tự sửa một số lỗi đơn giản hoặc chạy unit test ở local trước mỗi commit để code của bạn “chuẩn” nhất trước khi commit.