Prettier là gì

Trong bài viết Định dạng code Javascript với Prettier lần trước, tất cả chúng ta thấy được sơ qua sự hữu dụng và ích lợi của việc dùng công cụ Prettier. Hôm nay bài viết này sẽ hướng dẫn những bạn tích hợp công cụ ESLint với Prettier trên code editor Visual Studio Code để giải quyết và xử lý mã nguồn Javascript .Nội dung chính

  • 1. Khởi tạo project:
  • 2. Cấu hình ESLint
  • 3. Cấu hình Prettier
  • 4. Trải nghiệm
  • Video liên quan

TÓM TẮT

1. Khởi tạo project:

  • Máy bạn cần có Visual Studio Code, bạn nào chưa cài thì có thể tải về qua liên kết trên.
  • Bạn khởi tạo thư mục rỗng, nơi sẽ chứa dữ liệu project của bạn.

  • Bây giờ bạn quay trở lại Visual Studio Code chọn Open Folder và trỏ đến thư mục ES6 ở Desktop mới được tạo xong (bạn có thể thay đổi theo ý mình)

Bạn đang đọc: Prettier là gì

  • Sau khi vào được thư mục bạn định chứa dữ liệu của project, chúng ta gọi Terminal/CMD dùng tổ hợp phím ctrl + ` để chạy lệnh khởi tạo file package.jsonđể quản lý các gói thư viện cần dùng:

// đối với yarn
yarn init
// đối với npm
npm init

  • Quá trình khởi tạo file package.jsonđã hoàn thành, giờ ta truy cập phần Extensions và tìm kiếm từ khoá eslint và chọn install (làm tương tự với prettier).

  • Sau đó vào lại Terminal/CMD bạn chạy lệnh cài đặt gói eslintprettier như sau:

// Với yarn
yarn global add eslint
yarn global add prettier
// Với npm
npm i -g eslint
npm i -g prettier

2. Cấu hình ESLint

  • Để cấu hình eslint ta mở Terminal/CMD trên Visual Studio Code để chạy lệnh khởi tạo JavaScript Style Guide:

eslint –init

  • Lúc này eslint sẽ cho chúng ta lựa chọn, bạn sẽ chọn Use a popular style guide.

  • Tiếp đến eslint sẽ hỏi bạn chọn JavaScript Style Guide nào? Trong trường hợp này cá nhân mình chọn Airbnb thay vì Google hay Standard.

  • Sau khi chọn JavaScript Style Guide,
    eslint sẽ hỏi tiếp bạn có sử dụng React không? Trong trường hợp này mình không sử dụng React nên sẽ chọn là không.

  • eslint hỏi bạn chọn file cấu hình ở dạng nào? Cá nhân mình thì mình sẽ chọn Javascript.

  • Cấu hình xong, eslint sẽ tải về gói eslint-config-airbnb-base giúp bạn kiểm tra và gợi ý các trường hợp viết mã sao cho tinh gọn nhất, dễ nhìn nhất theo cấu hình của airbnb. Trong trường hợp cần sửa đổi cấu hình cho eslint ta truy cập file .eslintrc.js.

  • Để cấu hình eslint
    extension chúng ta cài vào Visual Studio Code lúc trước, ta sẽ phải truy cập setting để sửa một vài option.

Windows/Linux: File > Preferences > Settings
MacOS: chọn Code > Preferences > Settings

  • Trong khung USER SETTINGS bạn thêm vào các option sau:

“files.autoSave”: “onFocusChange”, // tự động save file
“eslint.autoFixOnSave”: true, // tự động sửa cho mã tuân theo style
“eslint.packageManager”: “yarn”, // bạn nào không dùng yarn thì để mặc định

  • Cấu hình task tự động kiểm tra và hiển thị lỗi thông báo về từ eslint, trên màn hình Visual Studio Code ta nhấn tổ hợp phím:

Windows/Linux: Ctrl + Shift + P
MacOS: Command + Shift + P

  • Bạn gõ Task và tìm chọn mục Task: Configure Task, một file tasks.json sẽ được sinh ra nằm trong thư mục .vscode. Đến đây bạn cấu hình như sau:

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
“version”: “2.0.0”,
“tasks”: [
{
“type”: “npm”,
“script”: “eslint .”,
“problemMatcher”: [
“$eslint-stylish”
] }
] }

Đến đây là kết thúc phần cài đặt và cấu hình cho eslint. Xin lưu ý là bạn cần để phần tự động save file ở option là onForcusChange hoặc onWindowChange thì eslint mới tự động sửa lại file bạn viết sai rule của airbnb thành đúng.

3. Cấu hình Prettier

  • Tương tự với việc cấu hình eslint trong USER SETTINGS, chúng ta sẽ thêm vào các option sau cho prettier:

“prettier.trailingComma”: “es5”, // tự động thêm dấu phẩy
“prettier.eslintIntegration”: true, // tích hợp với eslint
“prettier.semi”: true, // tự động thêm dấu chấm phẩy

  • Save lại cấu hình trong USER SETTINGS, và trải nghiệm việc mã của bạn được tự động format theo rule của airbnb.

4. Trải nghiệm

  • Ảnh phía trên là rule của airbnb trong việc triển khai Object Method. Vậy thì sau khi cấu hình chúng ta sẽ thấy mã nguồn bad sẽ tự động được sửa lại giống với good mà chúng ta không cần nhớ hay quan tâm việc sửa lại mã một cách thủ công để pass qua style guide của airbnb.

Cuối cùng thì cũng đã hoàn tất toàn bộ cấu hình cho việc format code theo airbnb style guide giúp việc viết mã của bạn trở nên tinh gọn, tiện lợi và rõ ràng hơn bao giờ hết. Và tương tự với việc áp dụng cấu hình này cho môi trường phát triển React thì ở phần cài đặt cấu hình choeslint bạn chỉ cần chỉnh từ No qua Yes là ok. Chúc bạn code với đam mê và sớm thành công với nghiệp code dạo.

Hiện tại bên mình đang cố gắng đạt lượng Like trên Facebook để sắp tới bọn mình muốn chạy một số khoá học online trên Youtube thế nên mong các bạn hãy ủng hộ và tiếp sức cho nhóm mình nhé. Xin cảm ơn các bạn!!!!

ĐÁNH GIÁ post
Bài viết liên quan

Tư vấn miễn phí (24/7) 094 179 2255