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.
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.
Để cài đặt Prettier, làm theo các bước sau:
Mở terminal và chạy lệnh sau trong thư mục dự án của bạn:
npm install --save-dev prettier
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).Để định dạng mã một cách thủ công, bạn có thể chạy lệnh sau:
npx prettier --write .
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.
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);
Để 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.
Settings (Cài đặt) và tìm Format On Save.Preferences (Tùy chọn) -> Languages & Frameworks -> JavaScript -> Prettier.On code reformat và On save.Để đả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).
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ữ.
husky và lint-staged:npm install --save-dev husky lint-staged
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.
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
}
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.
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
Tạo tệp .eslintrc.json với nội dung như sau:
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": "error"
}
}
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>
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;
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.
