Làm thế nào để Lint và Định dạng mã với ESLint trong Visual Studio Code
Giới thiệu
Khi viết JavaScript bằng trình soạn thảo như Visual Studio Code , có một số cách để bạn có thể đảm bảo mã của bạn chính xác về mặt cú pháp và phù hợp với các phương pháp hay nhất hiện tại. Bạn có thể sử dụng linter để làm điều này. Linters kiểm tra mã của bạn để tìm lỗi cú pháp và lỗi đánh dấu đảm bảo bạn có thể nhanh chóng tìm và sửa chúng. ESLint là một linter mà bạn có thể tích hợp vào cài đặt Visual Studio Code của bạn đảm bảo tính toàn vẹn của mã.
ESLint có thể vừa định dạng mã của bạn vừa phân tích nó để đưa ra các đề xuất cải tiến. Nó cũng có thể cấu hình. Điều này nghĩa là bạn có thể tùy chỉnh cách đánh giá mã của bạn .
Trong hướng dẫn này, bạn sẽ cài đặt ESLint trên Visual Studio Code và triển khai cấu hình tùy chỉnh để xử lý các câu lệnh log trong gỡ lỗi. Bạn cũng sẽ cấu hình ESLint để tự động sửa lỗi cú pháp khi bạn lưu file của bạn .
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần những thứ sau:
- Phiên bản mới nhất Visual Studio Code được cài đặt trên máy của bạn. Hướng dẫn này sử dụng Visual Studio Code version 1.43.0.
- Phiên bản mới nhất của Node được cài đặt trên máy của bạn. Bạn có thể thực hiện điều này theo Cách cài đặt Node.js và Tạo môi trường phát triển local cho máy của bạn.
Bước 1 - Tạo mã khởi động JavaScript
Bạn cần bắt đầu với một dự án demo. Tạo một folder cho dự án của bạn bằng lệnh sau:
- mkdir linting
Bây giờ folder dự án của bạn đã được tạo, hãy chuyển sang folder linting :
cd linting Khi ở bên trong folder linting , hãy tạo một file JavaScript với tên app.js :
- touch app.js
Mở app.js trong Visual Studio Code. Viết mã JavaScript sau vào file app.js của bạn:
const name = 'James' const person = {first: name} console.log(person) const sayHelloLinting = (fName) => { console.log(`Hello linting, ${fName}`); }; Từ góc độ định dạng, bạn có thể nhận thấy một số điều có thể được cải thiện:
- Sử dụng dấu ngoặc kép không nhất quán
- Sử dụng dấu chấm phẩy không nhất quán
- khoảng cách
Với file JavaScript này, bây giờ bạn có thể khởi tạo dự án này. Để thực hiện việc này, hãy chuyển trở lại dòng lệnh của bạn và trong folder linting , hãy chạy lệnh sau:
- npm init
Sử dụng lệnh npm init để khởi tạo dự án của bạn sẽ tạo file package.json trong folder linting . package.json sẽ lưu trữ các phụ thuộc dự án của bạn và các cài đặt cấu hình quan trọng khác cho dự án của bạn.
Bây giờ dự án JavaScript của bạn đã được cài đặt đúng cách, bây giờ bạn có thể cài đặt ESLint.
Bước 2 - Cài đặt ESLint
Trước khi cài đặt ESLint cho dự án của bạn , trước tiên bạn cần cài đặt ESLint:
npm install eslint --save-dev Điều quan trọng là phải bao gồm cờ --save-dev vì điều này chỉ lưu gói dưới dạng phụ thuộc để sử dụng phát triển. Trong trường hợp này, eslint là một gói chỉ cần thiết khi bạn đang tích cực làm việc và áp dụng các thay đổi đối với dự án của bạn . Sau khi dự án của bạn chạy hoặc đang trong quá trình production , eslint sẽ không còn cần thiết nữa. Sử dụng cờ --save-dev đảm bảo eslint sẽ được liệt kê trong file package.json của bạn dưới dạng phụ thuộc phát triển.
Bây giờ ESLint đã được cài đặt, bạn có thể khởi tạo cấu hình ESLint cho dự án của bạn bằng lệnh sau:
- ./node_modules/.bin/eslint --init
Một phần quan trọng trong lệnh này là cờ --init . Phần ./node_modules/.bin/eslint của lệnh là đường dẫn đến ESLint trong dự án của bạn. Sử dụng --init cờ kích hoạt ESLint cho dự án của bạn. Kích hoạt hoặc khởi tạo ESLint sẽ tạo một file cấu hình ESLint cho phép bạn tùy chỉnh cách ESLint hoạt động với dự án của bạn.
Trước khi bạn có thể truy cập file cấu hình ESLint của bạn , bạn sẽ được yêu cầu với các câu hỏi khác nhau về dự án của bạn . Những câu hỏi này được đặt ra đảm bảo rằng cấu hình được khởi tạo cho dự án của bạn phù hợp nhất với nhu cầu của bạn.
Dấu nhắc đầu tiên sẽ là:
? How would you like to use ESLint? … To check syntax only To check syntax and find problems ❯ To check syntax, find problems, and enforce code style Chọn tùy chọn To check syntax, find problems, and enforce code style .
Dấu nhắc tiếp theo sẽ là:
What type of modules does your project use? … JavaScript modules (import/export) ❯ CommonJS (require/exports) None of these Chọn tùy chọn CommonJS để sử dụng các biến toàn cục CommonJS.
Dấu nhắc tiếp theo sẽ nói:
? Which framework does your project use? … React Vue.js ❯ None of these Chọn tùy chọn None of these .
Dấu nhắc tiếp theo sẽ hỏi:
? Does your project use TypeScript? › No / Yes Chọn tùy chọn No .
Dấu nhắc sau sẽ cho biết:
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection) ✔ Browser ✔ Node Chọn tùy chọn Browser .
Dấu nhắc tiếp theo sẽ nói:
✔ How would you like to define a style for your project? … ❯ Use a popular style guide Answer questions about your style Inspect your JavaScript file(s) Chọn tùy chọn Use a popular style guide .
Đối với Which style guide do you want to follow? nhắc, hãy chọn tùy chọn Airbnb: https://github.com/airbnb/javascript .
Dấu nhắc tiếp theo sẽ hỏi:
? What format do you want your config file to be in? … JavaScript YAML ❯ JSON Chọn tùy chọn JSON .
Sau đó, bạn sẽ thấy thông báo này:
Checking peerDependencies of eslint-config-airbnb-base@latest The config that you've selected requires the following dependencies: eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 Dấu nhắc cuối cùng sẽ hỏi:
? Would you like to install them now with npm? › No / Yes Chọn tùy chọn Yes để cài đặt các phần phụ thuộc với npm .
Bạn cần cài đặt các gói bổ sung. Chọn yes .
Sau khi hoàn thành tất cả các dấu nhắc , bạn sẽ nhận thấy rằng một file có tên .eslintrc.json đã được thêm vào folder linting của bạn. ESLint hiện đã được cài đặt. Mã trong app.js vẫn chưa thay đổi. Điều này là do ESLint cần được tích hợp với Visual Studio Code.
Bước 3 - Cấu hình ESLint
Để tích hợp ESLint vào Visual Studio Code, bạn cần cài đặt phần mở rộng ESLint cho Visual Studio Code. Điều hướng trở lại Mã Visual Studio và tìm kiếm ESLint trong tab Tiện ích mở rộng . Nhấp vào Cài đặt khi bạn đã tìm thấy tiện ích mở rộng:
Sau khi ESLint được cài đặt trong Visual Studio Code, bạn sẽ nhận thấy các lỗi gạch dưới đầy màu sắc trong file app.js của bạn. Các điểm đánh dấu này được mã hóa màu dựa trên mức độ nghiêm trọng. Nếu bạn di chuột qua mã gạch chân của bạn , bạn sẽ thấy thông báo giải thích lỗi cho bạn. Bằng cách này, ESLint giúp ta tìm và loại bỏ các lỗi mã và cú pháp.
ESLint có thể giúp bạn nhiều hơn thế. ESLint có thể được sửa đổi để tự động sửa lỗi mỗi khi file được lưu.
Bước 4 - Định dạng khi lưu
Để cấu hình ESLint tự động sửa lỗi cú pháp và các vấn đề định dạng mỗi khi bạn lưu, bạn cần phải mở menu cài đặt. Để tìm cài đặt trong Visual Studio Code, hãy nhấp vào biểu tượng bánh răng ở phía dưới bên trái, sau đó chọn Cài đặt .
Trong menu cài đặt, tìm kiếm Hành động mã khi Lưu . Tùy chọn đầu tiên sẽ có nội dung Editor: Code Actions on Save và bên dưới sẽ có tùy chọn Chỉnh sửa trong settings.json . Nhấp vào liên kết để Chỉnh sửa trong settings.json .
Tệp settings.json sẽ mở bên trong trình soạn thảo mã của bạn. Để ESLint sửa lỗi khi bạn lưu file của bạn , bạn cần viết mã sau trong settings.json :
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript"] Với mã này trong file settings.json của bạn, ESLint bây giờ sẽ tự động sửa lỗi và xác thực JavaScript khi lưu.
Quay lại file app.js của bạn và lưu nó. Bạn sẽ thấy một số thay đổi, bao gồm gạch dưới ít màu sắc hơn. Một số vấn đề định dạng mà ESLint đã khắc phục bao gồm:
- Sử dụng nhất quán các dấu nháy đơn
- Thụt lề thích hợp bên trong hàm
- Sử dụng nhất quán dấu chấm phẩy
Bây giờ ESLint sẽ tự động giải quyết các lỗi cú pháp khi nào bạn lưu app.js Vẫn còn một số thông báo lỗi. Những lỗi này có thể được khắc phục bằng cách tùy chỉnh cấu hình ESLint để bắt hoặc bỏ qua các lỗi và sự cố định dạng cụ thể.
Bước 5 - Tùy chỉnh cấu hình ESLint
Như vậy, ESLint tạo ra một thông báo được đánh dấu cho tất cả các câu lệnh console.log() trong app.js Trong một số trường hợp, xóa các câu lệnh console.log có thể không được ưu tiên. Bạn có thể tùy chỉnh cấu hình ESLint để cho phép các câu lệnh console.log mà không tạo ra thông báo lỗi. Luật cấu hình ESLint có thể được sửa đổi trong file .eslintrc.json .
Mở file .eslintrc.json . Đây là mã bạn sẽ thấy trong file đó:
{ "env": { "browser": true, "commonjs": true, "es2021": true }, "extends": [ "airbnb-base" ], "parserOptions": { "ecmaVersion": 12 }, "rules": { } } Ở cuối file .eslintrc.json , bạn sẽ thấy một đối tượng "rules" . Để tùy chỉnh các lỗi kích hoạt ESLint hoặc để vô hiệu hóa phản hồi của ESLint đối với các đoạn mã nhất định, bạn sẽ thêm các cặp key-value vào đối tượng "rules" . Khóa sẽ trùng với tên của luật bạn muốn thêm hoặc thay đổi. Giá trị sẽ phù hợp với mức độ nghiêm trọng của vấn đề. Bạn có ba lựa chọn cho mức độ nghiêm trọng:
-
error- tạo ra một gạch dưới màu đỏ -
warn- sẽ tạo ra một gạch chân màu vàng -
off- sẽ không hiển thị bất cứ điều gì.
Nếu bạn không muốn tạo bất kỳ thông báo lỗi nào cho các câu lệnh console.log , bạn có thể sử dụng tên luật no-console làm khóa. Đầu vào off làm giá trị cho no-console :
"rules" : { "no-console": "off" } Thao tác này sẽ xóa các thông báo lỗi khỏi các câu lệnh console.log của bạn trong app.js :
Một số luật yêu cầu nhiều phần thông tin, bao gồm mức độ nghiêm trọng và giá trị. Để chỉ định loại dấu ngoặc kép bạn muốn sử dụng trong mã của bạn , bạn phải chuyển cả loại dấu ngoặc kép đã chọn và mức độ nghiêm trọng:
"rules" : { "no-console": "off", "quotes": [ "error", "double" ] } Bây giờ, nếu bạn bao gồm các dấu ngoặc kép trong báo giá của bạn , ESLint sẽ phát sinh lỗi.
Kết luận
Hướng dẫn này giới thiệu một số thao tác bạn có thể làm với cách sử dụng ESLint trên Visual Studio Code. Các công cụ tẩm mỡ như ESLint có thể giúp tạo thời gian cho các việc phức tạp hơn bằng cách tự động hóa và đơn giản hóa cách bạn xác minh cú pháp và các phương pháp hay nhất.
Nếu bạn muốn biết thêm thông tin về các luật và những cặp key-value nào bạn có thể sử dụng để tùy chỉnh các luật ESLint của bạn , bạn có thể xem tài liệu này.
Các tin liên quan
