Cách thiết lập Đẹp hơn trong Visual Studio Code
Viết mã rõ ràng và dễ đọc là điều cần thiết, cho dù bạn đang làm việc một mình hay với một nhóm các nhà phát triển. Trong khi nhiều yếu tố góp phần vào khả năng đọc mã, một trong những yếu tố quan trọng nhất là định dạng mã nhất quán.
Nhưng đây là vấn đề: việc định dạng mã thủ công có thể là một điều cực kỳ khó khăn và rất dễ xảy ra lỗi. Các công cụ như Prettier giúp định dạng HTML, CSS, JavaScript và các ngôn ngữ khác dễ dàng hơn rất nhiều. Khám phá cách cài đặt và sử dụng tiện ích mở rộng Prettier để định dạng mã, cũng như một số cài đặt cấu hình nâng cao.
Mục Lục
Cài đặt đẹp hơn
Trước khi tiếp tục, đảm bảo rằng bạn đã cài đặt Node.js trên máy tính của mình. Bạn có thể cài đặt phiên bản mới nhất từ trang tải xuống Node.js chính thức. Nó đi kèm với trình quản lý gói nút (npm) được tích hợp sẵn mà bạn sẽ sử dụng để quản lý các gói Node.js của mình.
Sau khi xác nhận rằng Node.js đã được cài đặt cục bộ, hãy bắt đầu bằng cách tạo một thư mục trống cho dự án của bạn. Bạn có thể đặt tên cho thư mục đẹp hơn-demo.
Tiếp theo, cd vào thư mục đó bằng dòng lệnh, sau đó chạy lệnh sau để khởi tạo dự án Node.js:
npm init -y
Lệnh này tạo tệp pack.json chứa cài đặt mặc định.
Để cài đặt tiện ích mở rộng Prettier, hãy chạy lệnh đầu cuối này:
npm i --save-dev prettier
Các –save-dev cờ cài đặt đẹp hơn dưới dạng phần phụ thuộc của nhà phát triển, nghĩa là nó chỉ được sử dụng trong quá trình phát triển.
Bây giờ bạn đã cài đặt xong, bạn có thể bắt đầu khám phá cách thức hoạt động của Prettier bằng cách sử dụng nó trên dòng lệnh.
Sử dụng Prettier thông qua Dòng lệnh
Bắt đầu bằng cách tạo một script.js tập tin và điền nó với đoạn mã sau:
function sum(a, b) { return a + b }const user = { name: "Kyle", age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3
}
Để định dạng mã trong tệp script.js này qua dòng lệnh, hãy chạy lệnh sau:
npx prettier --write script.js
Lệnh định dạng lại mã JavaScript trong script.js thành tiêu chuẩn mặc định của Prettier. Đây sẽ là kết quả:
function sum(a, b) {
return a + b;
}
const user = {
name: "Kyle",
age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3,
};
Bạn cũng có thể định dạng đánh dấu HTML từ dòng lệnh. Tạo ra một index.html tập tin trong cùng thư mục với script.js. Sau đó, dán HTML có định dạng kém sau vào tệp:
<header>
<div>
<img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
Để định dạng HTML, hãy chạy lệnh này:
npx prettier --write index.html
Lệnh này định dạng lại HTML thành tiêu chuẩn mặc định của Prettier, dẫn đến mã sau:
<header>
<div>
<img src="" alt="" class="weather-icon large" />
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
Bạn cũng có thể sử dụng –kiểm tra cờ để kiểm tra xem mã có tuân theo tiêu chuẩn của Prettier hay không. Ví dụ sau kiểm tra script.js:
npx prettier --check script.js
Điều này hữu ích nếu bạn muốn có pre-commit hook để đảm bảo mọi người đang sử dụng Prettier và định dạng các tệp trước khi đẩy chúng vào Git. Điều này hoạt động tốt khi đóng góp cho mã nguồn mở.
Tích hợp Đẹp hơn vào Visual Studio Code
Sử dụng Prettier thông qua dòng lệnh có thể là một điều khó khăn. Thay vì chạy một lệnh theo cách thủ công mỗi khi bạn muốn định dạng mã, bạn có thể thiết lập để nó tự động định dạng khi bạn thay đổi tệp. May mắn thay, Visual Studio Code (VS Code) có một cách được tích hợp sẵn để thực hiện việc này cho bạn.
đi đến Tiện ích mở rộng trong Mã VS và tìm kiếm xinh hơn. Bấm vào Đẹp hơn – Trình định dạng mãcài đặt nó, sau đó kích hoạt nó.
Đi vào cài đặt Mã VS của bạn bằng cách điều hướng đến Tệp> Tùy chọn> Cài đặt. Trong hộp tìm kiếm, tìm kiếm xinh hơn. Bạn sẽ tìm thấy rất nhiều tùy chọn để giúp bạn định cấu hình tiện ích mở rộng Prettier.
Thông thường, bạn có thể sử dụng các cài đặt mặc định. Điều duy nhất bạn có thể cân nhắc thay đổi là dấu chấm phẩy (bạn có thể loại bỏ chúng nếu muốn). Mặt khác, mọi thứ được đặt thành mặc định, nhưng bạn có thể thay đổi nó theo cách bạn muốn.
Hãy chắc chắn để kích hoạt định dạng lưu để mã trong mỗi tệp được định dạng tự động khi bạn lưu tệp đó. Để kích hoạt nó, chỉ cần tìm kiếm định dạng lưu và đánh dấu vào ô.
Nếu bạn không sử dụng VSCode hoặc tiện ích mở rộng không hoạt động vì lý do nào đó, bạn có thể tải xuống thư viện onchange. Thao tác này sẽ chạy lệnh để định dạng mã bất cứ khi nào bạn thay đổi tệp.
Cách bỏ qua tệp khi định dạng với Prettier
Nếu bạn chạy đẹp hơn –viết lệnh trên toàn bộ thư mục của bạn, nó sẽ đi qua từng mô-đun nút của bạn. Nhưng bạn không nên lãng phí thời gian định dạng mã của người khác!
Để giải quyết vấn đề này, hãy tạo một .prettierignore tệp và bao gồm thuật ngữ nút_mô-đun Trong tập tin. Nếu bạn định chạy –viết lệnh trên toàn bộ thư mục, nó sẽ định dạng lại tất cả các tệp ngoại trừ những tệp trong thư mục nút_mô-đun thư mục.
Bạn cũng có thể bỏ qua các tệp có phần mở rộng cụ thể. Ví dụ: nếu bạn muốn bỏ qua tất cả các tệp HTML, chỉ cần thêm *.html ĐẾN .prettierignore.
Cách cấu hình đẹp hơn
Bạn có thể định cấu hình cách bạn muốn Prettier hoạt động với các tùy chọn khác nhau. Một cách là thêm một xinh hơn chìa khóa cho bạn gói.json tài liệu. Giá trị sẽ là một đối tượng chứa tất cả các tùy chọn cấu hình:
{
...
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
prettier: {
}
}
Tùy chọn thứ hai (mà chúng tôi khuyên dùng) là tạo một .prettierrc tài liệu. Tệp này sẽ cho phép bạn thực hiện tất cả các loại tùy chỉnh.
Giả sử bạn không thích dấu chấm phẩy. Bạn có thể loại bỏ chúng bằng cách đặt đối tượng sau vào tệp:
{
"semi": true,
"overrides": [
{
"files": ".ts",
"options": {
"semi": false
}
}
]
}
Các ghi đè thuộc tính cho phép bạn xác định ghi đè tùy chỉnh cho một số tệp hoặc phần mở rộng tệp nhất định. Trong trường hợp này, chúng tôi nói rằng tất cả các tệp kết thúc bằng .ts (nghĩa là các tệp bản thảo) không được có dấu chấm phẩy.
Sử dụng đẹp hơn với ESLint
ESLint là một công cụ linting để phát hiện lỗi trong mã JavaScript cũng như định dạng nó. Nếu bạn đang sử dụng Prettier, có lẽ bạn cũng không muốn sử dụng ESLint để định dạng. Để sử dụng chúng cùng nhau, bạn cần cài đặt và thiết lập eslint-config-prettier. Công cụ này tắt tất cả các cấu hình ESLint cho những thứ mà Prettier đã xử lý.
Trước tiên, bạn cần cài đặt nó:
npm i --save-dev eslint-config-prettier
Tiếp theo, thêm nó vào danh sách mở rộng trong .eslintrc tệp (đảm bảo đó là điều cuối cùng trong danh sách):
{
"extends": [
"some-other-config-you-use",
"prettier"
],
"rules": {
"indent": "error"
}
}
Giờ đây, ESLint sẽ vô hiệu hóa tất cả các quy tắc mà Prettier đang xử lý để tránh xung đột.
Dọn dẹp Codebase của bạn với Prettier và ESLint
Prettier là một công cụ lý tưởng để làm sạch mã của bạn và thực thi định dạng nhất quán trong một dự án. Đặt nó hoạt động với Mã VS có nghĩa là nó luôn trong tầm tay.
ESLint là một công cụ JavaScript phải có song hành với Prettier. Nó cung cấp rất nhiều tính năng và tùy chọn tùy chỉnh vượt xa định dạng cơ bản. Tìm hiểu cách sử dụng ESLint với JavaScript nếu bạn muốn trở thành nhà phát triển hiệu quả hơn.