Prettier là một công cụ định dạng mã nguồn mạnh mẽ, giúp các nhà phát triển tự động hóa quá trình định dạng mã theo các quy tắc nhất định. Với khả năng hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, TypeScript, HTML, và CSS, Prettier giúp đảm bảo sự nhất quán trong mã, dễ đọc và dễ bảo trì. Tích hợp dễ dàng với các môi trường phát triển như Visual Studio Code và WebStorm, Prettier không chỉ tiết kiệm thời gian mà còn giảm thiểu xung đột phong cách giữa các lập trình viên, nâng cao hiệu suất làm việc trong các dự án phát triển phần mềm.
1. Prettier là gì?
Prettier là một công cụ định dạng mã nguồn mạnh mẽ, giúp các nhà phát triển tự động hóa quá trình định dạng mã theo các quy tắc nhất định. Nó giúp duy trì sự nhất quán trong cách viết mã, giúp mã dễ đọc hơn và giảm thiểu xung đột về phong cách giữa các nhà phát triển trong một dự án.
2. Tính năng nổi bật của Prettier
- Định dạng tự động: Giúp định dạng mã mà không cần phải thủ công sửa đổi từng dòng.
- Hỗ trợ đa ngôn ngữ: Hỗ trợ các ngôn ngữ như JavaScript, TypeScript, HTML, CSS, Markdown, JSON, GraphQL, và nhiều ngôn ngữ khác.
- Tùy chỉnh linh hoạt: Có thể tùy chỉnh cấu hình theo nhu cầu của từng dự án.
- Tích hợp IDE: Dễ dàng tích hợp vào hầu hết các môi trường phát triển như Visual Studio Code, WebStorm, Atom, và Sublime Text.
3. Cài đặt Prettier
Để cài đặt Prettier, làm theo các bước sau:
Bước 1: Cài đặt Prettier qua npm
Mở terminal và chạy lệnh sau trong thư mục dự án của bạn:
npm install --save-dev prettier
Bước 2: Tạo tệp cấu hình
Tạo tệp .prettierrc
trong thư mục gốc của dự án để cấu hình các tùy chọn định dạng:
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false
}
Giải thích các tùy chọn:
semi
: Thêm dấu chấm phẩy vào cuối câu lệnh (true/false).
singleQuote
: Sử dụng dấu nháy đơn thay vì dấu nháy kép (true/false).
tabWidth
: Đặt số lượng ký tự cho tab (mặc định là 2).
trailingComma
: Thêm dấu phẩy ở cuối danh sách (có thể là “none”, “es5”, “all”).
bracketSpacing
: Thêm khoảng trắng giữa dấu ngoặc nhọn trong đối tượng (true/false).
jsxBracketSameLine
: Đặt dấu ngoặc JSX ở cùng dòng với nội dung (true/false).
4. Sử dụng Prettier
Định dạng mã thủ công
Để định dạng mã một cách thủ công, bạn có thể chạy lệnh sau:
Lệnh này sẽ tìm kiếm tất cả các tệp trong thư mục hiện tại và định dạng chúng.
Ví dụ định dạng
Giả sử bạn có một tệp JavaScript như sau:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const double = arr.map((num) => num * 2)
console.log(double)
Khi chạy lệnh npx prettier --write .
, mã sẽ được định dạng lại thành:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const double = arr.map((num) => num * 2);
console.log(double);
5. Định dạng tự động khi lưu
Để tự động định dạng mã khi lưu tệp, bạn có thể tích hợp Prettier với IDE của bạn.
Visual Studio Code
- Cài đặt tiện ích mở rộng Prettier từ Marketplace.
- Vào
Settings
(Cài đặt) và tìm Format On Save
.
- Bật tùy chọn này để tự động định dạng mã khi lưu tệp.
WebStorm
- Vào
Preferences
(Tùy chọn) -> Languages & Frameworks
-> JavaScript
-> Prettier
.
- Bật tùy chọn
On code reformat
và On save
.
6. Tích hợp với Git
Để đảm bảo mọi người trong nhóm phát triển đều sử dụng cùng một cấu hình Prettier, bạn có thể thêm tệp .prettierrc
vào hệ thống quản lý mã nguồn (như Git).
Sử dụng Prettier với Git Hooks
Bạn có thể sử dụng husky
để thêm hooks vào quá trình commit, đảm bảo mã được định dạng trước khi được gửi lên kho lưu trữ.
- Cài đặt
husky
và lint-staged
:
npm install --save-dev husky lint-staged
- Thêm cấu hình vào
package.json
:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "prettier --write"
}
Với cấu hình trên, mọi tệp .js
sẽ được định dạng tự động trước khi commit.
7. Cấu hình nâng cao
Tùy chỉnh với các tệp cấu hình khác
Ngoài tệp .prettierrc
, bạn có thể sử dụng các tệp cấu hình khác như:
prettier.config.js
: Cho phép bạn sử dụng JavaScript để cấu hình Prettier.
Ví dụ:
module.exports = {
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'all',
bracketSpacing: true,
};
package.json
: Bạn cũng có thể thêm cấu hình Prettier trực tiếp vào package.json
:
"prettier": {
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
8. Sử dụng Prettier với ESLint
Khi làm việc với JavaScript, bạn có thể tích hợp Prettier với ESLint để đảm bảo mã của bạn tuân thủ cả các quy tắc của ESLint và được định dạng đúng cách.
Bước 1: Cài đặt các gói cần thiết
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
Bước 2: Cấu hình ESLint
Tạo tệp .eslintrc.json
với nội dung như sau:
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": "error"
}
}
9. Ví dụ nâng cao
Định dạng HTML và CSS
Prettier không chỉ hỗ trợ JavaScript mà còn hỗ trợ định dạng HTML và CSS. Giả sử bạn có một tệp HTML không được định dạng như sau:
<!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello World</h1><p>This is a paragraph.</p></body></html>
Sau khi chạy Prettier, nó sẽ được định dạng thành:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
Định dạng JavaScript ES6+
Prettier hỗ trợ định dạng các tính năng mới của JavaScript như async/await, destructuring, và nhiều hơn nữa. Ví dụ:
const array = [1, 2, 3].map((num) => {
return num * 2
})
const { name, age } = person
Sau khi chạy Prettier, mã sẽ được định dạng như sau:
const array = [1, 2, 3].map((num) => {
return num * 2;
});
const { name, age } = person;
10. Kết luận
Prettier là một công cụ rất hữu ích trong quy trình phát triển phần mềm, giúp duy trì chất lượng mã và tiết kiệm thời gian cho các nhà phát triển. Việc tích hợp Prettier vào dự án không chỉ giúp mã trở nên nhất quán mà còn cải thiện quy trình làm việc chung của nhóm.
Bằng cách áp dụng các cấu hình và ví dụ đã trình bày ở trên, bạn có thể dễ dàng sử dụng Prettier để nâng cao chất lượng mã nguồn trong dự án của mình.