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:

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.

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

  1. Cài đặt tiện ích mở rộng Prettier từ Marketplace.
  2. Vào Settings (Cài đặt) và tìm Format On Save.
  3. Bật tùy chọn này để tự động định dạng mã khi lưu tệp.

WebStorm

  1. Vào Preferences (Tùy chọn) -> Languages & Frameworks -> JavaScript -> Prettier.
  2. Bật tùy chọn On code reformatOn 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ữ.

  1. Cài đặt huskylint-staged:
npm install --save-dev husky lint-staged
  1. 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.