Hướng dẫn phong cách Airbnb là một bộ hướng dẫn để viết mã rõ ràng và nhất quán. Nó được phát hành vào năm 2012 và kể từ đó đã trở thành một trong những hướng dẫn phong cách phổ biến nhất cho các dự án JavaScript.
Nó cung cấp một tập hợp các nguyên tắc để viết mã nhất quán, dễ bảo trì bằng cách thực thi nhiều quy tắc kiểu dáng về thụt lề, nhận xét, độ dài dòng tối đa, quy ước đặt tên biến, dấu ngoặc kép và định nghĩa hàm. Để thiết lập hướng dẫn kiểu Airbnb trong dự án JavaScript, bạn cần sử dụng một công cụ linting như ESLint.
Cài đặt ESLint
ESLint là một công cụ linting JavaScript mã nguồn mở giúp các nhà phát triển viết mã sạch bằng cách tìm và khắc phục sự cố. Nó có thể phát hiện các vấn đề trong mã của bạn như lỗi cú pháp, tham số không hợp lệ và biến không xác định. Khi bạn chạy ESLint với – -sửa chữa thẻ, nó sẽ tự động xác định và sửa bất kỳ vấn đề nào có thể sửa được trong mã, do đó giúp bạn tiết kiệm thời gian.
Bạn có thể sử dụng ESLint để thực thi các hướng dẫn về phong cách như hướng dẫn về phong cách của Airbnb.
Để bắt đầu, hãy chạy lệnh sau trong thiết bị đầu cuối để cài đặt ESLint dưới dạng phần phụ thuộc của nhà phát triển:
npm install --save-dev eslint eslint-config-airbnb
Sau đó khởi tạo ESLint.
npx eslint --init
Bạn sẽ được nhắc với các câu hỏi về dự án của bạn. Khi được nhắc với:
? How would you like to use EsLint?
Chọn tùy chọn này:
> To check syntax, find problems and enforce code style
Trả lời các câu hỏi tiếp theo theo dự án của bạn cho đến khi bạn gặp lời nhắc sau.
? How would you like to define a style for your project?
Thì trả lời như sau.
> Use a popular style guide
Chọn hướng dẫn phong cách Airbnb cho lời nhắc tiếp theo.
? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>
Cuối cùng, cài đặt các phụ thuộc cần thiết bằng cách chọn “Có” trong lời nhắc tiếp theo.
Khi quá trình cài đặt kết thúc, bạn sẽ có một .eslintsrc.json tập tin ở thư mục gốc của thư mục của bạn.
Tùy chỉnh Hướng dẫn Phong cách Airbnb
Hướng dẫn phong cách Airbnb cho phép tùy chỉnh. Bạn có thể thêm các quy tắc bổ sung hoặc ghi đè các quy tắc hiện có trong .eslintsrc.json tập tin cấu hình.
Ví dụ: để cho phép tối đa 80 ký tự trên mỗi dòng, bạn có thể thêm quy tắc này trong phần quy tắc.
{
"extends": [
"plugin:react/recommended",
"airbnb"
],
"rules": {
"max-len": ["error", { "code": 80 }]
}
}
Chạy ESLint trong pack.json
Thêm một kịch bản trong gói.json tập tin để chạy ESLint.
"scripts": {
"lint": "eslint"
}
Chạy tập lệnh lint để kiểm tra bất kỳ lỗi lint nào bằng cách thực hiện lệnh này.
npm run lint
Bạn cũng có thể thêm tập lệnh để khắc phục sự cố trong mã bằng cách sử dụng –sửa chữa lá cờ.
"scripts": {
"lint": "eslint",
"lint:fix": "npm run lint -- --fix"
},
Đang chạy npm chạy lint: sửa lỗi trên thiết bị đầu cuối sẽ tự động khắc phục mọi sự cố mà kẻ nói dối có thể khắc phục.
Bật Linting khi Lưu trong Mã VS
Việc chạy một tập lệnh mỗi khi bạn muốn sửa mã của mình có thể trở nên tẻ nhạt. Thực hiện theo các bước bên dưới để bật linting khi lưu trong Mã VS.
- Chuyển đến tab “Tiện ích mở rộng” ở phía bên trái của cửa sổ Mã VS.
- Tìm kiếm tiện ích mở rộng ESLint và cài đặt nó.
- Sau khi tiện ích mở rộng được cài đặt, hãy mở cài đặt Mã VS (Tệp > Tùy chọn > Cài đặt hoặc bằng cách nhấn Ctrl +,).
- Trong trình chỉnh sửa cài đặt, tìm kiếm “hành động mã khi lưu”.
- Nhấp vào “Chỉnh sửa trong settings.json” và thêm các cài đặt sau vào cài đặt.json tập tin.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
Điều này cho phép tiện ích mở rộng ESLint tự động sửa mã của bạn khi bạn lưu.
Lợi ích của việc sử dụng Style Guide
Lợi ích chính của việc sử dụng hướng dẫn về phong cách như hướng dẫn về phong cách của Airbnb là nó giúp bạn duy trì cơ sở mã nhất quán. Điều này rất hữu ích trong một nhóm vì các nhà phát triển có thể hiểu và đóng góp vào cơ sở mã một cách dễ dàng. Nó cũng giúp bạn thực thi các phương pháp hay nhất và tránh các lỗi mã hóa phổ biến.
