8 phút để đọc
Khi lập trình JavaScript với một trình soạn thảo như Visual Studio Code, có nhiều cách để đảm bảo code của bạn đúng cú pháp và tuân thủ các phương pháp tốt nhất hiện tại. Một trong những cách đó là sử dụng linter. Linter kiểm tra code của bạn để tìm lỗi cú pháp và đánh dấu chúng để bạn có thể nhanh chóng tìm và sửa lỗi. ESLint là một linter mà bạn có thể tích hợp vào Visual Studio Code để đảm bảo tính toàn vẹn của code.
ESLint vừa có thể định dạng code vừa phân tích để đưa ra các gợi ý cải thiện. Nó cũng có thể cấu hình được, nghĩa là bạn có thể tùy chỉnh cách code được đánh giá.
Trong hướng dẫn này, bạn sẽ cài đặt và cấu hình ESLint trên Visual Studio Code để xử lý các câu lệnh log statement trong quá trình 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 tệp tin.
Điều kiện tiên quyết
Để hoàn thành hướng dẫn này, bạn cần:
- Cài đặt phiên bản mới nhất của Visual Studio Code.
- Cài đặt phiên bản mới nhất của Node.
Hướng dẫn này được xác minh với Visual Studio Code v1.62.3, ESLint Extension v2.2.2, Node.js v17.2.0, npm v8.1.4, và eslint v8.3.0.
Các bước này hợp lệ cho các phiên bản Ubuntu gần đây nhất: Ubuntu 24.04, Ubuntu 22.04, và Ubuntu 20.04. Nếu bạn đang sử dụng Ubuntu phiên bản <= 18.04, chúng tôi khuyên bạn nên nâng cấp lên phiên bản mới hơn vì Ubuntu không còn hỗ trợ các phiên bản cũ.
Bước 1: Tạo code JavaScript khởi đầu
Bạn cần bắt đầu với một dự án demo. Tạo một thư mục cho dự án của bạn với lệnh:
mkdir vscode-eslint-example
Bây giờ thư mục dự án đã được tạo, chuyển đến thư mục vscode-eslint-example:
cd vscode-eslint-example
Trong thư mục vscode-eslint-example, tạo một tệp JavaScript với tên app.js:
touch app.js
Mở app.js trong Visual Studio Code. Viết đoạn code JavaScript sau vào tệp app.js của bạn:
function test() {
let someName = 'test';
if(someName == 'test'){
console.log("hello");
}
}
Bạn có thể đã nhận thấy có những vấn đề về định dạng 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 tệp JavaScript này, bạn có thể khởi tạo dự án. Để làm điều này, quay lại dòng lệnh và trong thư mục vscode-eslint-example, chạy lệnh sau:
npm init -y
Sử dụng lệnh npm init để khởi tạo dự án sẽ tạo một tệp package.json trong thư mục vscode-eslint-example. Tệp package.json sẽ lưu trữ các project dependency 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 thiết lập đúng cách, bạn có thể thiết lập ESLint.
Bước 2: Thiết lập ESLint
Trước khi bạn thiết lập ESLint cho dự án của mình, trước tiên bạn sẽ 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ì nó lưu gói này như một dependency chỉ cho mục đích 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à thực hiện thay đổi cho dự án của mình. Khi dự án của bạn ra mắt hoặc đang trong sản xuất, eslint sẽ không còn cần thiết nữa. Sử dụng cờ --save-dev đảm bảo rằng eslint sẽ được liệt kê trong tệp package.json của bạn chỉ là một development dependency.
Bây giờ ESLint đã được cài đặt, bạn có thể khởi tạo một cấu hình ESLint cho dự án của mình bằng cách sử dụ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 cờ --init sẽ 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 tệp 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 mình.
Trước khi bạn có thể truy cập tệp cấu hình ESLint của mình, bạn sẽ được nhắc 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 hỏi để đả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.
Lời nhắc đầu tiên sẽ là:
How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
Chọn tùy chọn To check syntax and find problems
Lời 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.
Lời 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
Lời nhắc tiếp theo sẽ hỏi:
Does your project use TypeScript?
Chọn tùy chọn No.
Lời nhắc sau đây sẽ nói:
? 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
Lời nhắc tiếp theo sẽ nói:
The config that you've selected requires the following dependencies:
eslint, globals, @eslint/js
? Would you like to install them now? > No / Yes
Chọn tùy chọn Yes.
Nếu bạn được yêu cầu cài đặt thêm các gói, hãy chọn yes.
Sau khi hoàn thành tất cả các lời nhắc, bạn sẽ thấy một tệp có tên .eslintrc.json đã được thêm vào thư mục vscode-eslint-example của bạn. ESLint đã được cài đặt. Code trong app.js 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ài đặt ESLint Extension
Để tích hợp ESLint vào Visual Studio Code, bạn sẽ cần cài đặt tiện ích mở rộng ESLint. Quay lại Visual Studio Code và tìm kiếm ESLint trong tab Extensions. Nhấp vào Install sau khi bạn đã định vị được tiện ích mở rộng.
Khi ESLint được cài đặt trong Visual Studio Code, bạn sẽ thấy các đường gạch chân màu sắc trong tệp app.js của mình làm nổi bật các lỗi. Các dấu hiệ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 code được gạch chân, bạn sẽ thấy một thông báo giải thích lỗi cho bạn. Bằng cách này, ESLint giúp chúng ta tìm và loại bỏ các lỗi code và cú pháp.
ESLint có thể làm được nhiều hơn thế. ESLint có thể được sửa đổi để tự động sửa lỗi mỗi khi một tệp được lưu.
Bước 4: Tự động định dạng khi lưu tệp
Để cấu hình ESLint tự động sửa lỗi cú pháp và định dạng mỗi khi bạn lưu, bạn sẽ cần mở menu cài đặt. Để tìm cài đặt trong Visual Studio Code, sử dụng command palette để mở Preferences: Open User Settings (JSON). Tệp settings.json sẽ mở bên trong trình chỉnh sửa code của bạn. Để ESLint sửa lỗi khi bạn lưu tệp, bạn sẽ cần viết đoạn code sau vào settings.json:
.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
Với code này trong tệp settings.json của bạn, ESLint giờ đây sẽ tự động sửa lỗi và xác thực JavaScript khi lưu.
Quay lại tệp app.js của bạn và lưu nó. Bạn sẽ thấy một số thay đổi, bao gồm ít gạch chân màu sắc hơn. Một số vấn đề về định dạng mà ESLint đã sửa bao gồm:
- Sử dụng dấu nháy đơn nhất quán
- Thụt lề đúng cách bên trong hàm
- Sử dụng dấu chấm phẩy nhất quán
ESLint giờ đây sẽ tự động giải quyết các lỗi cú pháp bất cứ 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 sửa bằng cách tùy chỉnh cấu hình ESLint để bắt hoặc bỏ qua các lỗi và vấn đề định dạng cụ thể.
Bước 5: Tùy chỉnh các quy tắc của ESLint
Hiện tại, ESLint tạo ra một thông báo được làm nổi bật cho tất cả các câu lệnh console.log() trong app.js. Trong một số trường hợp, việc loại bỏ các câu lệnh console.log có thể không phải là ư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. Các quy tắc cấu hình ESLint có thể được sửa đổi trong tệp .eslintrc.json.
Nếu bạn không thể tìm thấy tệp cấu hình .eslintrc.json trong cài đặt của mình, bạn có thể sử dụng tệp eslint.config.js để thêm tùy chỉnh. Mở tệp .eslintrc.json. Đây là code bạn sẽ thấy trong tệp đó:
.eslintrc.json
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": [
"airbnb-base"
],
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
}
}
Ở cuối tệp .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 code nhất định, bạn sẽ thêm các cặp key-value vào đối tượng "rules". Khóa sẽ khớp với tên của quy tắc bạn muốn thêm hoặc thay đổi. Giá trị sẽ khớ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 gạch chân màu đỏwarn: tạo ra gạch chân màu vàngoff: không hiển thị gì cả.
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 quy tắc no-console làm khóa. Nhập off làm giá trị cho no-console:
.eslintrc.json
"rules" : {
"no-console": "off"
}
Điều này loại bỏ các thông báo lỗi từ các câu lệnh console.log của bạn trong app.js.
Một số quy tắc yêu cầu nhiều phần thông tin, bao gồm mức độ nghiêm trọng và một giá trị. Để chỉ định loại dấu nháy bạn muốn sử dụng trong code của mình, bạn phải truyền cả loại dấu nháy đã chọn và mức độ nghiêm trọng:
.eslintrc.json
"rules" : {
"no-console": "off",
"quotes": [
"error",
"double"
]
}
Bây giờ, nếu bạn sử dụng dấu nháy đơn trong code của mình, ESLint sẽ báo lỗi.
Kết luận
Hướng dẫn này giới thiệu một số điều bạn có thể làm với linting bằng ESLint trên Visual Studio Code. Các công cụ linting như ESLint có thể giúp tiết kiệm thời gian cho các tác vụ 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 tốt nhất.
Nếu bạn muốn biết thêm thông tin về các quy tắc và các cặp key-value bạn có thể sử dụng để tùy chỉnh các quy tắc ESLint của mình, bạn có thể xem tài liệu.
