Prettier là gì? Và cách sử dụng Prettier trong dự án NodeJS

Prettier là gì?

Prettier là công cụ định dạng (format) code. Các ngôn ngữ mà Prettier hỗ trợ bao gồm:

Javascript
HTML
CSS, Less and SCSS
Typescript
Flow
Markdown
Json, YAML
GraphQL

Tại sao nên sử dụng Prettier?

Như đã nói ở trên thì Prettier sẽ hỗ trợ format code giúp cho code rõ ràng và dễ đọc hơn. Các dev sẽ không cần phải tốn thời gian tỉ mỉ trong từng dòng code, và trong các dự án có nhiều dev tham gia sẽ không gây ảnh hưởng đến việc review code chỉ vì thừa một khoảng trắng hay dư một dòng nào đó.
Cấu hình dễ dàng
Hầu hết các editor đều hỗ trợ: Vim, Atom, VSCode…
Tương thích với các các công cụ lint (ví dụ: Eslint, tslint hay stylelint)

Thêm Prettier vào dự án NodeJS

Thêm Prettier vào môi trường global của npm, hoặc thêm vào trong devDependencies đối với các dự án của NodeJs

Note
Nếu các bạn đang làm việc trong một dự án NodeJs thì khuyến khích nên cài vào devDependencies, để có thử sử dụng được bất cứ đâu.
```
# Thêm vào global
npm install -g prettier

# Thêm vào devDependencies
# npm
npm install --save-dev prettier
# hoặc yarn
yarn add --dev prettier
```
Tạo file cấu hình .prettierrc ở thư mục gốc của dực án.

Tip
File này sẽ được viết dưới định dạng Json hoặc YAML.

Truy cập Playground để lựa chọn các style phù hợp và copy vào file cấu hình vừa tạo bên trên. Ví dụ:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Tip	Đối với từng ngôn ngữ có thể sử dụng các cấu hình khác nhau trên cùng một file config bằng cách thêm vào trong overrides. Ví dụ:

{
  "semi": false,
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

Thêm script vào file package.json

{
  "scripts": {
    ...,
    "lint:fix": "prettier --write ."
  }
}

và chạy

npm run lint:fix

Thêm vào Editor (VSCode)

Note	Ở đây chỉ nói về cách sử dụng trong VSCode, các editor khác có thể làm tương tự hoặc tham khảo thêm ở google

Cài đặt extenssion

Tìm và cài đặt extension Prettier - Code formatter trên Martketplace hoặc nhấn tổ hợp phím Ctrl+P và dán đoạn command dưới để cài đặt extension
```
ext install esbenp.prettier-vscode
```

Chuyển bộ format của VSCode sang Prettier

Nhấn tổ hợp phím Ctrl+Shift+P tìm Open Settings (JSON) và thêm vào đoạn sau

{
  // Cho mọi ngôn ngữ
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Hoặc chỉ Javascript
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Cấu hình

Có thể tạo file file cấu hình như bước trên hoặc thêm vào trong settings của VSCode với các key có tiền tố (prefix) là prettier.*. Ví dụ:

prettier.arrowParens
prettier.bracketSpacing
prettier.endOfLine
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.jsxBracketSameLine
prettier.jsxSingleQuote
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma
prettier.semi
prettier.singleQuote
prettier.tabWidth
prettier.trailingComma
prettier.useTabs
prettier.vueIndentScriptAndStyle
prettier.embeddedLanguageFormatting

Note	Nếu trong project có file cấu hình .prettierrc thì các thông tin trong cài đặt của VSCode sẽ bị ghi đè.

Prettier là gì? Và cách sử dụng Prettier trong dự án NodeJS