ESLint là gì? Cách tích hợp và sử dụng ESLint cho dự án web

Trong quá trình phát triển website hiện đại, đảm bảo chất lượng mã nguồn đóng vai trò rất quan trọng, đặc biệt khi dự án có nhiều thành viên cùng tham gia. Một codebase thiếu kiểm soát dễ dẫn đến lỗi logic, khó bảo trì và tốn nhiều thời gian debug. ESLint ra đời như một công cụ giúp tự động phát hiện lỗi, chuẩn hóa cách viết code và đảm bảo tuân thủ các quy tắc lập trình nhất quán trong toàn bộ dự án. Nhờ khả năng tích hợp linh hoạt với nhiều framework và công cụ khác nhau, ESLint đã trở thành tiêu chuẩn phổ biến trong các dự án JavaScript hiện đại. Bài viết này sẽ giúp bạn tìm hiểu ESLint là gì, cơ chế hoạt động, các thành phần quan trọng trong file cấu hình cũng như cách cài ESLint và sử dụng ESLint hiệu quả cho dự án web. 
 

 

ESLint là gì?

ESLint là một công cụ phân tích mã tĩnh (static analysis tool) mã nguồn mở, được thiết kế dành riêng cho JavaScript và TypeScript. Nhiệm vụ cốt lõi của nó là đọc mã nguồn mà không cần chạy chương trình, rồi phát hiện các vấn đề tiềm ẩn dựa trên một bộ quy tắc được định sẵn.Khác với trình biên dịch hay runtime, ESLint không quan tâm đến kết quả thực thi mà chỉ nhìn vào cấu trúc của code. Điều này giúp công cụ này phát hiện sớm các lỗi như:

- Sử dụng biến chưa khai báo.

- Câu lệnh console.log bị bỏ sót trong production.

- Vi phạm quy ước đặt tên.

- Cấu trúc code dễ gây lỗi như == thay vì ===.

ESLint được phát triển bởi Nicholas C. Zakas và ra mắt lần đầu vào năm 2013. Điểm khác biệt lớn nhất so với các công cụ cùng thời như JSHint là kiến trúc hướng plugin, mỗi quy tắc là một module độc lập, có thể bật/tắt và cấu hình riêng biệt. Nhờ đó, ESLint trở thành tiêu chuẩn trong hệ sinh thái JavaScript hiện đại.
 

 

Cơ chế hoạt động của công cụ ESLint

ESLint hoạt động theo cơ chế phân tích mã nguồn tĩnh (Static Analysis), nghĩa là công cụ có thể kiểm tra chất lượng mã nguồn mà không cần thực thi chương trình. Thay vì chạy ứng dụng, ESLint sẽ phân tích cấu trúc của mã nguồn, áp dụng các quy tắc đã được cấu hình và đưa ra cảnh báo hoặc lỗi nếu phát hiện vấn đề. Quy trình hoạt động của ESLint thường gồm 4 bước sau:

Bước 1: Parsing (Phân tích cú pháp)

ESLint đọc file mã nguồn và sử dụng parser để chuyển đổi thành Abstract Syntax Tree (AST) - cây cú pháp trừu tượng. AST biểu diễn cấu trúc của chương trình dưới dạng cây, trong đó mỗi nút (node) đại diện cho một thành phần ngôn ngữ như khai báo biến, hàm, biểu thức hay câu lệnh điều kiện. 

AST là biểu diễn dạng cây của chương trình, trong đó mỗi nút (node) đại diện cho một thành phần ngôn ngữ như khai báo biến, hàm, biểu thức hay câu lệnh điều kiện. 

Ví dụ:

const x = 1 + 2;

sẽ được biểu diễn thành một cây gồm: 

VariableDeclaration

└── VariableDeclarator

    ├── Identifier (x)

    └── BinaryExpression (+)

        ├── Literal (1)

        └── Literal (2)

Nhờ AST, ESLint có thể hiểu cấu trúc chương trình thay vì chỉ đọc từng dòng văn bản.

Bước 2: Rule Loading (Nạp quy tắc)

Sau khi tạo AST, ESLint sẽ đọc file cấu hình (chẳng hạn eslint.config.js hoặc .eslintrc.*) để nạp toàn bộ các thiết lập cần thiết cho quá trình kiểm tra mã nguồn.

Ở bước này, ESLint sẽ:

- Đọc các Rules được bật hoặc tắt.

- Kế thừa các bộ quy tắc thông qua Extends.

- Nạp các Plugins để hỗ trợ React, Vue, TypeScript,...

- Khởi tạo Parser và các tùy chọn liên quan.

- Xác định môi trường thực thi (Environment) và các thiết lập khác.

Sau khi hoàn tất, ESLint đã biết chính xác những quy tắc nào sẽ được áp dụng cho mã nguồn.

Bước 3: Traversal (Duyệt cây)

Sau khi tạo AST, ESLint duyệt toàn bộ cây cú pháp. Trong quá trình này, mỗi rule sẽ đăng ký các listener để theo dõi những loại node cụ thể. Khi ESLint gặp một node phù hợp, listener tương ứng sẽ được kích hoạt để kiểm tra xem mã nguồn có vi phạm quy tắc hay không. 

Ví dụ, rule kiểm tra sử dụng console.log() sẽ đăng ký listener cho node CallExpression. Khi ESLint gặp một lời gọi hàm, listener sẽ kiểm tra xem đó có phải là console.log() hay không. Nếu đúng và rule không cho phép sử dụng, ESLint sẽ đánh dấu đó là một vi phạm. Cơ chế này giúp ESLint chỉ kiểm tra những phần mã nguồn liên quan đến từng quy tắc, từ đó tối ưu hiệu suất phân tích. 

Bước 4: Reporting (Báo cáo)

Nếu phát hiện vi phạm, rule sẽ gọi hàm context.report() để ghi nhận lỗi hoặc cảnh báo, đồng thời xác định vị trí chính xác (dòng và cột) trong file mã nguồn.

Sau khi duyệt toàn bộ AST, ESLint sẽ tổng hợp tất cả kết quả và hiển thị dưới nhiều hình thức khác nhau như:

- Terminal hoặc Command Prompt.

- IDE (Visual Studio Code, WebStorm...) thông qua extension.

- File báo cáo (JSON, HTML...).

- Pipeline CI/CD để tự động kiểm tra chất lượng mã nguồn trước khi triển khai.
 

 

Các thành phần cốt lõi bên trong một file cấu hình ESLint

File cấu hình ESLint (thường là .eslintrc.js, .eslintrc.json hoặc eslint.config.js với Flat Config) là nơi khai báo các quy tắc và thiết lập để ESLint phân tích mã nguồn. Tại đây, bạn có thể xác định cách ESLint kiểm tra code, những plugin cần sử dụng, parser phù hợp cũng như các bộ quy tắc kế thừa. Trong số nhiều thành phần của file cấu hình, Rules, Extends, Plugins và Parser là bốn yếu tố quan trọng nhất.

1. Rules (Quy tắc)

Rules là tập hợp các quy định mà ESLint sẽ sử dụng để kiểm tra mã nguồn. Mỗi rule có thể được cấu hình ở ba mức:

- off (0): Tắt quy tắc.

- warn (1): Chỉ cảnh báo.

- error (2): Báo lỗi.

Trong file cấu hình, các rule được khai báo trong thuộc tính rules dưới dạng cặp key-value, trong đó key là tên rule và value là mức độ áp dụng hoặc các tùy chọn cấu hình của rule.

Ví dụ: 

module.exports = {

  rules: {

    semi: [" error", "always"],

    quotes: [" error", "single"],

    no-unused-vars: " warn",

    no-console: "error"

  }

};

Trong ví dụ trên:

- Bắt buộc sử dụng dấu chấm phẩy ở cuối câu lệnh.

- Bắt buộc sử dụng dấu nháy đơn cho chuỗi ký tự.

- Hiển thị cảnh báo nếu có biến được khai báo nhưng không sử dụng.

- Báo lỗi khi sử dụng console.log().

Ngoài việc thiết lập mức độ (off, warn hoặc error), nhiều rule còn cho phép truyền thêm tùy chọn (options) để kiểm soát cách kiểm tra mã nguồn. Chẳng hạn, rule quotes có thể quy định sử dụng dấu nháy đơn hoặc dấu nháy kép, trong khi semi có thể yêu cầu bắt buộc hoặc không sử dụng dấu chấm phẩy. Bên cạnh các rule được ESLint cung cấp sẵn, bạn cũng có thể sử dụng các rule từ plugin của cộng đồng hoặc tự xây dựng rule riêng để đáp ứng những yêu cầu đặc thù của dự án. 

2. Extends (Kế thừa)

Thay vì phải tự định nghĩa từng rule, Extends cho phép bạn kế thừa toàn bộ bộ cấu hình từ một preset có sẵn. Đây là tính năng giúp bạn nhanh chóng áp dụng các best practices được cộng đồng hoặc tổ chức xây dựng, đồng thời giảm đáng kể thời gian cấu hình ESLint cho dự án phát triển web. Trong file cấu hình, extends được khai báo dưới dạng một chuỗi hoặc mảng các preset:

Ví dụ: 

module.exports = {

  extends: [

    "eslint: recommended",

    "plugin: react/recommended",

    "plugin: @typescript-eslint/recommended"

  ]

};

Trong ví dụ trên:

- Eslint: recommended: Kích hoạt các rule quan trọng do công cụ ESLint cung cấp để phát hiện những lỗi phổ biến trong JavaScript.

- Plugin:react/ recommended: Áp dụng các quy tắc được khuyến nghị cho dự án React.

- Plugin:@typescript-eslint/ recommended: Bổ sung các quy tắc dành cho dự án sử dụng TypeScript.

Một số preset được sử dụng phổ biến gồm: 
 

Sau khi kế thừa một preset, bạn vẫn có thể ghi đè (override) các rule bằng thuộc tính rules. Nếu một rule được khai báo trong cả extends và rules, cấu hình trong rules sẽ được ưu tiên. Điều này giúp bạn tận dụng các bộ quy tắc có sẵn nhưng vẫn dễ dàng tùy chỉnh để phù hợp với tiêu chuẩn và yêu cầu của từng dự án.

3. Plugins (Tiện ích mở rộng)

Plugins là các gói mở rộng giúp ESLint bổ sung thêm rule hoặc hỗ trợ phân tích mã nguồn cho những thư viện, framework và ngôn ngữ mà ESLint không hỗ trợ đầy đủ theo mặc định. Nhờ plugin, ESLint có thể kiểm tra các quy tắc đặc thù của React, Vue, TypeScript, JSX và nhiều công nghệ khác. Sau khi cài đặt plugin bằng npm hoặc yarn, bạn cần khai báo plugin trong file cấu hình để ESLint có thể sử dụng các rule mà plugin cung cấp.

Ví dụ:

module. exports = {

  plugins : [

    "react" ,

    "@typescript- eslint",

    "import"

  ]

};

Trong ví dụ trên:

- React: Bổ sung các rule dành cho dự án React.

- @Typescript-eslint: Cung cấp các rule và tính năng hỗ trợ TypeScript.

- Import: Kiểm tra việc sử dụng câu lệnh import và export, chẳng hạn như phát hiện module không tồn tại hoặc import trùng lặp.

4. Parser

Parser là thành phần chịu trách nhiệm đọc và phân tích cú pháp và chuyển đổi mã nguồn thành Abstract Syntax Tree (AST) - cây cú pháp trừu tượng, để ESLint hiểu có thể kiểm tra cấu trúc của chương trình.

Mặc định, ESLint sử dụng Espree, một parser hỗ trợ các chuẩn JavaScript hiện đại (ECMAScript). Tuy nhiên, nếu dự án sử dụng TypeScript, Babel hoặc các cú pháp đặc biệt khác, bạn cần chỉ định parser phù hợp để ESLint có thể phân tích chính xác mã nguồn.

Ví dụ: 

module. exports = {

  parser: "@typescript- eslint/parser"

};

Trong ví dụ trên, ESLint sử dụng @typescript-eslint/parser để phân tích các file TypeScript trước khi áp dụng các rule kiểm tra. 

Nếu parser không nhận diện được cú pháp của mã nguồn (ví dụ sử dụng cú pháp TypeScript nhưng vẫn dùng parser mặc định), quá trình phân tích cú pháp sẽ thất bại và ESLint sẽ dừng việc kiểm tra file đó. Bên cạnh parser, bạn cũng có thể truyền tùy chọn cho parser thông qua parserOptions để kiểm soát phiên bản ECMAScript, module system (CommonJS hay ES Modules).

 

 

Tại sao mọi dự án phát triển web hiện đại đều nên sử dụng ESLint?

Trước khi quyết định sử dụng ESLint cho một dự án, nhiều lập trình viên thường nghĩ rằng đây chỉ là công cụ hỗ trợ kiểm tra cú pháp. ESLint còn đóng vai trò quan trọng trong nâng cao chất lượng mã nguồn, giảm thiểu lỗi và chuẩn hóa quy trình phát triển phần mềm. Nhờ khả năng tự động phân tích mã nguồn theo các quy tắc đã thiết lập, công cụ ESLint đã trở thành một phần không thể thiếu trong hầu hết các dự án web hiện đại. 

1. Giữ code sạch và nhất quán

Trong các dự án có nhiều thành viên tham gia, mỗi người sử dụng một phong cách viết code khác nhau sẽ khiến mã nguồn trở nên khó đọc và khó bảo trì. ESLint giúp giải quyết vấn đề này bằng cách áp dụng thống nhất các quy tắc về định dạng, cách đặt tên biến, cách sử dụng dấu ngoặc, dấu chấm phẩy hay dấu nháy trong toàn bộ dự án. Khi mọi thành viên đều tuân theo cùng một bộ quy tắc, mã nguồn sẽ trở nên đồng nhất, dễ đọc và dễ mở rộng hơn. Điều này đặc biệt quan trọng đối với các dự án phát triển trong thời gian dài hoặc có nhiều lập trình viên cùng cộng tác.

2. Phát hiện lỗi sớm trong quá trình code

Một trong những lợi ích lớn nhất khi sử dụng ESLint là khả năng phát hiện lỗi ngay trong quá trình lập trình. Thay vì chờ đến khi chạy ứng dụng hoặc kiểm thử mới phát hiện vấn đề, ESLint sẽ cảnh báo các lỗi cú pháp, biến chưa được sử dụng, khai báo trùng lặp hoặc những đoạn mã không tuân thủ quy tắc ngay khi lập trình viên viết code. Điều này giúp rút ngắn thời gian sửa lỗi và hạn chế việc phát sinh các lỗi dây chuyền trong quá trình phát triển.

Ngoài những lỗi cơ bản, ESLint còn có thể phát hiện nhiều vấn đề tiềm ẩn thông qua các rule tùy chỉnh hoặc plugin dành cho React, Vue và TypeScript. Nhờ đó, lập trình viên có thể xử lý lỗi ngay từ giai đoạn đầu, thay vì phải tốn nhiều thời gian khắc phục khi dự án đã hoàn thiện.
 

 

3. Giảm bug trước khi deploy

Không phải mọi lỗi đều khiến chương trình dừng hoạt động ngay lập tức. Nhiều lỗi nhỏ như sử dụng biến chưa khai báo, viết sai cú pháp hoặc import không đúng có thể chỉ xuất hiện khi ứng dụng hay website được chạy trong một số điều kiện nhất định. Sử dụng ESLint giúp bạn phát hiện sớm các vấn đề này trước khi mã nguồn được đưa lên môi trường kiểm thử hoặc production.

Bằng cách kiểm tra tự động theo các rule đã cấu hình, công cụ ESLint góp phần làm giảm đáng kể số lượng lỗi tồn tại trong sản phẩm cuối cùng. Điều này không chỉ nâng cao độ ổn định của ứng dụng mà còn giảm chi phí sửa lỗi sau khi triển khai dự án web.

4. Tiết kiệm thời gian code review

Thay vì phải dành thời gian góp ý các lỗi nhỏ như định dạng code, cách đặt tên biến hay thiếu dấu chấm phẩy, sử dụng ESLint có thể tiết kiệm đáng kể thời gian trong quá trình code review. Người review có thể tập trung vào logic nghiệp vụ và kiến trúc hệ thống. 

ESLint đóng vai trò như một “bộ lọc tự động” ngay từ giai đoạn viết code, giúp phát hiện và xử lý sớm các vấn đề mang tính quy ước trong dự án. Khi lập trình viên tuân theo cùng một bộ quy tắc, các pull request sẽ trở nên gọn gàng, nhất quán và dễ đọc hơn. Nhờ vậy, thời gian trao đổi qua lại giữa các thành viên trong team cũng được giảm thiểu đáng kể. 

5. Tích hợp tốt với các công cụ CI/CD

Một ưu điểm nổi bật khác của ESLint là khả năng tích hợp với nhiều công cụ trong quy trình phát triển phần mềm hiện đại. ESLint có thể được kết hợp với Git Hooks, GitHub Actions, GitLab CI, Jenkins hoặc các nền tảng CI/CD khác để tự động kiểm tra mã nguồn mỗi khi có thay đổi được đẩy lên repository. 

Nếu phát hiện lỗi vi phạm các rule đã thiết lập, quy trình build hoặc deploy có thể được dừng lại cho đến khi các vấn đề được khắc phục. Nhờ cơ chế kiểm tra tự động này, doanh nghiệp có thể đảm bảo chỉ những đoạn mã đáp ứng tiêu chuẩn chất lượng mới được triển khai lên môi trường thực tế, góp phần xây dựng quy trình phát triển phần mềm ổn định và chuyên nghiệp.
 

 

Hướng dẫn tích hợp và sử dụng ESLint trong dự án phát triển website 

Khi bắt đầu một dự án web hiện đại, sử dụng ESLint ngay từ đầu sẽ giúp bạn kiểm soát chất lượng mã nguồn một cách hiệu quả và nhất quán. Tích hợp công cụ ESLint vào workflow phát triển giúp lập trình viên phát hiện lỗi sớm, giảm bug và tăng tốc độ làm việc nhóm. Dưới đây là hướng dẫn chi tiết từng bước để bạn có thể cài ESLint trong dự án website hiệu quả.

Bước 1. Cài đặt thư viện ESLint vào dự án

Bước đầu tiên để bắt đầu sử dụng ESLint là cài đặt thư viện vào dự án thông qua npm hoặc yarn. ESLint có thể được cài đặt như một dev dependency để chỉ phục vụ quá trình phát triển. Thông thường, bạn sẽ cài ESLint bằng cách chạy lệnh: npm install save- dev eslint.

Sau khi cài đặt, bạn có thể kiểm tra phiên bản ESLint để đảm bảo quá trình cài đặt thành công. Đây là bước nền tảng để công cụ ESLint có thể hoạt động trong dự án của bạn.

Bước 2. Cấu hình ESLint cơ bản

Sau khi cài đặt, bạn cần khởi tạo file cấu hình ESLint để định nghĩa các rule và môi trường làm việc. Bạn có thể chạy lệnh: npx eslint --init.

Quá trình này sẽ yêu cầu bạn trả lời một số câu hỏi như:

- Dự án sử dụng framework nào (React, Vue, hoặc không dùng framework)?

- Bạn muốn sử dụng kiểu module (ESM hay CommonJS)?

- Dự án có dùng TypeScript hay không?

- Bạn muốn áp dụng style guide nào (Airbnb Standard, hoặc tự tùy chỉnh)?

Sau khi hoàn tất, ESLint sẽ tạo ra file cấu hình như .eslintrc. json hoặc .eslintrc. js. Đây là nơi bạn định nghĩa các quy tắc kiểm tra code.

Bước 3. Chạy ESLint trong dự án

Sau khi cấu hình cơ bản, bạn có thể chạy ESLint để kiểm tra toàn bộ mã nguồn bằng lệnh: npx eslint . 

Dấu . có nghĩa là công cụ ESLint sẽ quét toàn bộ thư mục hiện tại, bao gồm tất cả file JavaScript (hoặc TypeScript nếu có cấu hình).

Khi chạy lệnh này, ESLint sẽ:

- Phân tích toàn bộ code trong project.

- Hiển thị lỗi (errors) và cảnh báo (warnings).

- Chỉ ra dòng code vi phạm rule đã cấu hình.

Bạn cũng có thể thêm tùy chọn --fix để tự động sửa một số lỗi đơn giản. Thường xuyên chạy ESLint giúp bạn đảm bảo mã nguồn luôn đạt chuẩn trong suốt quá trình phát triển.
 

 

Bước 4. Tích hợp ESLint với IDE (VS Code) 

Tích hợp ESLint với IDE như VS Code giúp bạn phát hiện lỗi ngay khi đang viết code. Điều này giúp tối ưu trải nghiệm phát triển và giảm thời gian debug đáng kể. Khi được tích hợp đúng cách, bạn sẽ thấy lỗi hiển thị trực tiếp trong editor thay vì phải chạy lệnh thủ công.

Cài extension ESLint

Extension ESLint là một tiện ích mở rộng dành cho các trình soạn thảo code như VS Code, giúp kiểm tra và phát hiện lỗi trong mã nguồn JavaScript/TypeScript ngay trong quá trình lập trình. Thay vì phải chạy lệnh kiểm tra thủ công, extension sẽ tự động phân tích code theo các quy tắc đã được cấu hình trong dự án và hiển thị cảnh báo hoặc lỗi trực tiếp trong editor.

Để sử dụng, bạn cần cài đặt extension ESLint trên VS Code. Mở tab Extensions (Ctrl + Shift + X), tìm kiếm từ khóa “ESLint” và chọn extension chính thức của Microsoft (ID: dbaeumer. vscode-eslint). Đây là extension phổ biến và được duy trì bởi đội ngũ phát triển VS Code.

Sau khi cài đặt, extension sẽ tự động phát hiện file cấu hình ESLint trong workspace và bắt đầu hoạt động. Nếu bạn thấy biểu tượng ESLint hiển thị ở thanh trạng thái phía dưới, nghĩa là extension đã được kích hoạt thành công.

Bật linting real-time

Linting real-time là tính năng giúp kiểm tra và phát hiện lỗi trong mã nguồn ngay khi bạn đang viết code, thay vì phải chạy lệnh kiểm tra thủ công. Nhờ cơ chế này, công cụ ESLint sẽ liên tục phân tích đoạn mã và hiển thị cảnh báo hoặc lỗi trực tiếp trong trình soạn thảo, giúp lập trình viên dễ dàng nhận biết và sửa lỗi ngay từ sớm.

Mặc định, extension ESLint trong VS Code đã hỗ trợ linting real-time khi file thay đổi. Tuy nhiên, để đảm bảo hoạt động ổn định hoặc tinh chỉnh phạm vi kiểm tra, bạn có thể thêm cấu hình vào file .vscode/ settings.json như sau:

json {

  "eslint.enable": true,

  "eslint.validate": [

    "javascript",

    "javascriptreact",

    "typescript",

    "typescriptreact"

  ]

}

Với cấu hình này, VS Code sẽ tự động hiển thị lỗi ngay trong editor:

- Màu vàng với ý nghĩa cảnh báo (warning)

- Màu đỏ là lỗi (error)

- Khi hover chuột sẽ hiển thị tooltip giải thích chi tiết lỗi

Tự động fix khi save

Tính năng tự động fix khi lưu file giúp bạn tiết kiệm thời gian chỉnh sửa code và đảm bảo mã nguồn luôn tuân thủ đúng quy tắc đã thiết lập. Khi được kích hoạt, ESLint sẽ tự động sửa các lỗi đơn giản như định dạng code, dấu chấm phẩy hoặc dấu nháy ngay khi bạn nhấn lưu file trong VS Code.

Để bật tính năng này, bạn thêm cấu hình vào file .vscode/settings.json:

{

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  }

}

Sau khi thiết lập, mỗi lần bạn lưu file, VS Code sẽ tự động:

- Sửa các lỗi format có thể fix được.

- Chuẩn hóa code theo rules đã cấu hình.

- Giảm thiểu thao tác chỉnh sửa thủ công.

Tuy nhiên, không phải tất cả lỗi đều có thể tự động sửa, đặc biệt là các lỗi liên quan đến logic. Vì vậy bạn vẫn cần kiểm tra và xử lý thủ công khi cần thiết.

Cấu hình workspace settings

Cấu hình workspace settings giúp bạn thiết lập riêng các quy tắc hoạt động của ESLint cho từng dự án, thay vì áp dụng chung cho toàn bộ VS Code. Điều này đặc biệt hữu ích khi làm việc nhóm, vì đảm bảo tất cả thành viên đều sử dụng cùng một cấu hình và tránh xung đột giữa các môi trường phát triển khác nhau.

Để cấu hình, bạn tạo file .vscode/settings.json trong thư mục gốc của dự án và thêm nội dung như sau:

{

  "eslint.enable ": true,

  "eslint validate": [

    "javascript  ",

    "javascriptreact ",

    "typescript",

    "typescriptreact"

  ],

  "editor.formatOnSave": true

}

Với cấu hình này:

- ESLint sẽ được bật trong phạm vi dự án.

- Kiểm tra lỗi cho JavaScript, React và TypeScript.

- Tự động format code khi lưu file.
 

 

Bước 5. Tích hợp ESLint với Prettier

ESLint và Prettier thường bị nhầm lẫn là có chức năng trùng lặp, nhưng thực tế hai công cụ này bổ trợ cho nhau. ESLint tập trung vào việc phát hiện lỗi logic, lỗi cú pháp và các vi phạm best practice trong code, trong khi Prettier chịu trách nhiệm định dạng mã nguồn như indentation, dấu ngoặc kép, dấu chấm phẩy hay độ dài dòng. 

Giải pháp chuẩn là dùng hai package bổ trợ: npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier.

- Prettier: Format code.

- Eslint-config-prettier: Tắt rule format của ESLint (để không bị xung đột).

- Eslint-plugin-prettier: Chạy Prettier trong ESLint.

Nếu bạn dùng file eslint.config.js (mới), bạn cấu hình ESLint với Prettier như sau:

import js from " @eslint/js";

import prettierPlugin from " eslint-plugin-prettier/recommended";

export default [

  js.configs.recommended,

  // Prettier chạy trong ESLint

  prettierPlugin,

  {

    rules: {

      "prettier/ prettier": "warn"

    }

  }

];

Bước 6. Tích hợp ESLint vào Git workflow

ESLint không chỉ dùng trong lúc viết code mà còn có thể tích hợp vào Git workflow để đảm bảo chỉ những đoạn code đạt chuẩn mới được commit hoặc push lên repository. Cách này giúp giảm lỗi ngay từ giai đoạn đầu và giữ cho toàn bộ dự án luôn ổn định, đặc biệt khi làm việc nhóm. 

Công cụ phổ biến nhất để triển khai là Husky kết hợp với lint-staged. Hai công cụ này cho phép bạn chạy ESLint tự động ngay trước khi commit, đồng thời chỉ kiểm tra những file đã thay đổi thay vì check toàn bộ dự án, giúp tối ưu hiệu suất đáng kể.

Cách cấu hình lint-staged: 

Trong file package.json, bạn thêm cấu hình như sau:

{

  "lint-staged": {

    "*.{js,jsx,ts,tsx}": [

      "eslint --fix"

    ]

  }

}

Cụ thể:

- Chỉ kiểm tra các file đang được commit (staged files).

- ESLint sẽ tự động fix các lỗi đơn giản.

- Các file sau khi fix sẽ được tự động cập nhật lại vào stage.

Sau khi đã cấu hình lint-staged, bước tiếp theo là sử dụng Husky để tự động kích hoạt kiểm tra code mỗi khi thực hiện commit. Đây là phần quan trọng giúp đảm bảo code luôn đạt chuẩn trước khi được đưa lên repository.

Để bắt đầu, bạn cần cài đặt và khởi tạo Husky bằng lệnh npm install --save-dev husky và npx husky init. Lệnh này sẽ tự động tạo thư mục .husky/ và file pre-commit mặc định trong dự án.

Sau khi khởi tạo, bạn chỉnh sửa file .husky/pre-commit để chạy lint-staged bằng cách thêm lệnh npx lint-staged. Khi đó, mỗi lần bạn thực hiện lệnh git commit -m "message", Husky sẽ tự động kích hoạt pre-commit hook, chạy lint-staged để kiểm tra các file đang được staged, ESLint sẽ phân tích và tự động fix các lỗi đơn giản nếu có thể, đồng thời chặn commit nếu vẫn còn lỗi nghiêm trọng chưa được xử lý.

Kết quả là toàn bộ quy trình commit được kiểm soát chặt chẽ: code luôn được kiểm tra trước khi đưa lên Git, chỉ lint những file thay đổi giúp tối ưu hiệu suất và đảm bảo chất lượng code đồng nhất trong toàn bộ dự án, đặc biệt khi làm việc nhóm hoặc trong môi trường production.

Bước 7. Tích hợp ESLint vào CI/CD

ESLint không chỉ được sử dụng trong quá trình phát triển cục bộ hay Git workflow mà còn có thể tích hợp vào CI/CD để kiểm tra chất lượng code tự động mỗi khi có pull request hoặc khi push code lên repository. Cách làm này giúp đảm bảo toàn bộ code trước khi deploy đều đạt chuẩn, hạn chế lỗi lọt vào môi trường production.

Trong CI/CD, ESLint thường được chạy như một bước kiểm tra (lint check) trong pipeline. Nếu code vi phạm rule, pipeline sẽ thất bại và quá trình deploy sẽ bị dừng lại, buộc lập trình viên phải sửa lỗi trước khi tiếp tục.

Ví dụ với GitHub Actions, bạn có thể tạo file workflow như sau:

name: ESLint Check

on:

  push:

    branches : [main, develop]

  pull request :

    branches : [main]

jobs:

  lint:

    runs-on : ubuntu-latest

    steps:

      - name : Checkout code

        uses : actions/checkout@v4

      - name: Setup Node.js

        uses: actions/setup-node@v4

        with:

          node-version : 18

      - name : Install dependencies

        run : npm install

      - name : Run ESLint

        run : npx eslint .

Trong pipeline này:

- Code sẽ được checkout từ repository.

- Cài đặt NodeJS và dependencies.

- Chạy ESLint để kiểm tra toàn bộ source code.

- Nếu ESLint phát hiện lỗi, pipeline sẽ fail và chặn merge/deploy.

Kết quả là toàn bộ hệ thống CI/CD sẽ đóng vai trò như một “hàng rào bảo vệ”, đảm bảo chỉ những code sạch, không vi phạm quy tắc mới được đưa vào môi trường production, giúp tăng độ ổn định và chất lượng của dự án.

Bước 8. Áp dụng ESLint cho các framework

ESLint không chỉ hoạt động tốt với JavaScript thuần mà còn được thiết kế để tích hợp linh hoạt với các framework phổ biến như React, Vue hay Angular. Áp dụng ESLint cho từng framework giúp đảm bảo code tuân thủ đúng chuẩn của hệ sinh thái, giảm lỗi đặc thù và tăng tính nhất quán trong dự án.

- Với React, ESLint thường được kết hợp thêm các plugin như eslint-plugin-react và eslint-plugin-react-hooks để kiểm soát hooks, component structure và các best practice trong React.

- Với Vue, bạn có thể sử dụng eslint-plugin-vue để kiểm tra template, directive và cấu trúc component theo chuẩn Vue Style Guide.

- Với Angular, ESLint hỗ trợ thông qua @angular-eslint, giúp kiểm tra TypeScript, template HTML và các quy tắc đặc thù của Angular framework.

Bước 9. Tối ưu workflow với ESLint

Một trong những cách tối ưu phổ biến là kết hợp ESLint với các công cụ như Prettier, Husky, lint-staged và CI/CD, tạo thành một chuỗi kiểm soát chất lượng từ lúc lập trình đến khi deploy. Nhờ đó, code sẽ được kiểm tra nhiều lớp: ngay khi viết (real-time), trước khi commit và cả trên server CI.

Ngoài ra, bạn có thể tối ưu hiệu suất ESLint bằng cách chỉ lint những file thay đổi thay vì toàn bộ project, sử dụng cache để tăng tốc độ kiểm tra với lệnh eslint --cache, hoặc phân chia rule theo từng môi trường (development/production) để giảm độ nặng không cần thiết.

Một workflow ESLint tối ưu thường sẽ hoạt động theo luồng:

Lập trình viên viết code → ESLint kiểm tra real-time → Husky chặn lỗi trước commit → CI/CD kiểm tra lần cuối trước khi merge/deploy. 

Cách tổ chức này giúp đảm bảo chất lượng code luôn ổn định, đồng thời giảm đáng kể thời gian debug và review trong dự án lớn.
 

 

Hệ thống quy tắc (rules) phổ biến trong ESLint

ESLint cung cấp một hệ thống rule rất đa dạng, cho phép kiểm soát chất lượng mã nguồn từ cơ bản đến nâng cao. Các rule này giúp phát hiện lỗi sớm, chuẩn hóa code và hạn chế các vấn đề tiềm ẩn trong quá trình phát triển ứng dụng. 

1. Nhóm quy tắc quản trị an toàn mã nguồn và phòng ngừa lỗi (Bug Prevention Rules)

Đây là nhóm rules quan trọng nhất và thường là lý do chính khiến các team quyết định đưa ESLint vào dự án. Nhóm quy tắc này tập trung phát hiện các lỗi có thể gây crash ứng dụng, lỗi logic hoặc hành vi không mong muốn trong quá trình chạy chương trình. Dưới đây là một số rule phổ biến:

 

 

2. Nhóm quy tắc chuẩn hóa logic và tối ưu cú pháp (Best Practices Rules)

ESLint cung cấp nhóm rules chuẩn hóa logic và tối ưu cú pháp nhằm đảm bảo code không chỉ chạy đúng mà còn được viết theo cách tối ưu, rõ ràng và dễ bảo trì. Đây là nhóm quy tắc giúp chuẩn hóa cách viết code giữa các lập trình viên trong cùng một dự án, hạn chế các cách viết tùy ý dễ gây khó hiểu hoặc lỗi tiềm ẩn về sau. Dưới đây là một số rule tiêu biểu trong nhóm này:

 

 

3. Nhóm quy tắc đồng nhất phong cách viết code (Stylistic Rules)

ESLint cung cấp nhóm rules Stylistic nhằm chuẩn hóa cách trình bày code giữa các lập trình viên trong cùng một dự án. Nhóm quy tắc này không tập trung vào lỗi logic mà chủ yếu kiểm soát “cách viết code” để đảm bảo tính nhất quán, dễ đọc và dễ bảo trì. Các rule này thường được sử dụng kết hợp với Prettier để đảm bảo toàn bộ codebase có cùng một phong cách định dạng, tránh tình trạng mỗi người viết một kiểu khác nhau. Dưới đây là một số rule tiêu biểu: 

 

 

4. Tăng tốc cấu hình bằng các bộ quy tắc đóng gói sẵn (Pre-configured Shareable Configs)

ESLint cho phép sử dụng các bộ cấu hình có sẵn (shareable configs) để giúp lập trình viên không cần tự viết toàn bộ rules từ đầu. Đây là cách nhanh nhất để thiết lập một hệ thống linting chuẩn cho dự án, đặc biệt hữu ích khi bắt đầu dự án mới hoặc làm việc với framework lớn. 

Thay vì phải cấu hình từng rule thủ công, bạn chỉ cần cài đặt và sử dụng các preset đã được cộng đồng hoặc framework xây dựng sẵn. Những bộ config này thường bao gồm sẵn các rule về bug prevention, best practices và style guide theo tiêu chuẩn của từng hệ sinh thái. Dưới đây là một số shareable config phổ biến:

 

 

Những lỗi thường gặp khi sử dụng ESLint và cách khắc phục

ESLint là một công cụ rất mạnh, nhưng trong quá trình triển khai thực tế, lập trình viên thường gặp một số vấn đề liên quan đến cấu hình, hiệu suất và tương thích. Hiểu rõ các lỗi phổ biến sẽ giúp bạn sử dụng ESLint hiệu quả hơn và tránh gián đoạn workflow.

- Lỗi không nhận diện biến toàn cục và môi trường thực thi: ESLint đôi khi báo lỗi “undefined variable” đối với các biến toàn cục như window, document hoặc process. Nguyên nhân là do chưa khai báo đúng môi trường (environment) trong cấu hình ESLint. Để khắc phục, bạn cần thiết lập env phù hợp như browser, node hoặc jest để ESLint hiểu được phạm vi hoạt động của các biến này. 

- Lỗi không lint được file TypeScript/JSX: Một số trường hợp ESLint không nhận diện được file TypeScript hoặc JSX do thiếu parser hoặc plugin phù hợp. Điều này thường xảy ra khi chưa cài đặt @typescript-eslint/parser hoặc eslint-plugin-react. Giải pháp là cấu hình parser đúng cho TypeScript và thêm plugin tương ứng để ESLint hiểu được cú pháp mở rộng của framework.

- ESLint làm fail build không mong muốn: Trong một số dự án, ESLint có thể khiến quá trình build bị fail do các rule quá nghiêm ngặt hoặc cấu hình chưa phù hợp với môi trường production. Để khắc phục, bạn có thể tách riêng cấu hình giữa development và production hoặc điều chỉnh mức độ nghiêm trọng của rule (error → warn) để tránh chặn build không cần thiết.

- ESLint chạy chậm trên project lớn: Khi dự án có hàng nghìn file, ESLint có thể chạy chậm do phải phân tích toàn bộ codebase. Nguyên nhân thường đến từ việc không sử dụng cache hoặc lint toàn bộ project mỗi lần chạy. Giải pháp là sử dụng --cache, kết hợp lint-staged để chỉ kiểm tra file thay đổi, giúp cải thiện hiệu suất đáng kể.

- Quá nhiều warning gây nhiễu: Nếu cấu hình ESLint quá nghiêm ngặt, số lượng warning có thể tăng cao khiến lập trình viên bị “nhiễu” và bỏ qua cảnh báo quan trọng. Điều này thường xảy ra khi bật quá nhiều rule không cần thiết hoặc không phân loại mức độ ưu tiên. Cách khắc phục là tinh chỉnh lại rule, chỉ giữ những rule quan trọng ở mức error, còn lại chuyển sang warn để dễ kiểm soát hơn.

- Xung đột thực thi quy tắc định dạng giữa ESLint và Prettie: Một trong những lỗi phổ biến nhất là xung đột giữa ESLint và Prettier. Nguyên nhân là ESLint có một số rule liên quan đến format code (như indent, quotes, semi), trong khi Prettier cũng tự động định dạng lại code theo chuẩn riêng. Khi hai công cụ cùng áp dụng, chúng có thể “ghi đè” lẫn nhau và gây ra lỗi liên tục hoặc format không ổn định. Cách khắc phục là sử dụng eslint-config-prettier để tắt các rule định dạng của ESLint và đảm bảo Prettier là công cụ duy nhất xử lý format.
 

 

Sự khác biệt giữa ESLint với Prettier và JSHint

ESLint thường được so sánh với Prettier và JSHint vì cả ba đều liên quan đến kiểm soát chất lượng mã nguồn JavaScript. Tuy nhiên, mỗi công cụ lại có mục tiêu và phạm vi hoạt động khác nhau: ESLint tập trung vào phát hiện lỗi và best practices, Prettier tập trung vào định dạng code, còn JSHint là công cụ lint thế hệ cũ với khả năng kiểm tra hạn chế hơn. Dưới đây là bảng so sánh chi tiết giúp bạn dễ dàng phân biệt các công cụ: 

 

 

Một số câu hỏi thường gặp về công cụ ESLint

ESLint là một trong những công cụ quan trọng trong quy trình phát triển web hiện đại, tuy nhiên vẫn có nhiều câu hỏi phổ biến xoay quanh cách sử dụng, phạm vi hoạt động và tính ứng dụng trong thực tế. Dưới đây là những câu hỏi thường gặp giúp bạn hiểu rõ hơn về ESLint và cách áp dụng hiệu quả trong dự án. 

1. Công cụ ESLint hoạt động trên những ngôn ngữ nào?

ESLint chủ yếu được thiết kế để hoạt động với JavaScript nhưng hiện nay đã hỗ trợ mạnh mẽ cho TypeScript, JSX và các framework như React, Vue hoặc Node.js thông qua các plugin mở rộng. Điều này giúp ESLint trở thành công cụ linh hoạt trong hầu hết các dự án phát triển web hiện đại. Nhờ khả năng mở rộng mạnh mẽ này, công cụ có thể đáp ứng tốt nhu cầu của cả dự án nhỏ lẫn hệ thống lớn phức tạp. 

2. ESLint có hoàn toàn miễn phí và hợp pháp cho các dự án thương mại lớn?

ESLint là công cụ mã nguồn mở và hoàn toàn miễn phí. Bạn có thể sử dụng trong cả dự án cá nhân lẫn các hệ thống thương mại lớn mà không gặp bất kỳ hạn chế pháp lý nào. Đây cũng là lý do ESLint được các doanh nghiệp lớn tin dùng rộng rãi. Ngoài ra, cộng đồng phát triển của ESLint rất lớn và được hỗ trợ liên tục, giúp công cụ luôn được cập nhật để phù hợp với các tiêu chuẩn lập trình hiện đại. 

3. Có nên bật tính năng Linting trực tiếp trên môi trường Production (CI/CD Pipeline)?

ESLint nên được tích hợp vào CI/CD pipeline như một bước kiểm tra bắt buộc trước khi build hoặc deploy, thay vì chỉ sử dụng trong môi trường local. Điều này giúp đảm bảo mọi đoạn code đều được kiểm tra theo cùng một tiêu chuẩn trước khi đưa vào production. Bật linting trong CI/CD giúp phát hiện sớm các lỗi tiềm ẩn, ngăn chặn code kém chất lượng được merge vào nhánh chính và giảm rủi ro lỗi xảy ra trên môi trường thực tế. Đây là một best practice phổ biến trong các dự án chuyên nghiệp.

 

Qua bài viết của Phương Nam Vina, ESLint là một công cụ quan trọng trong quy trình phát triển web hiện đại, giúp phát hiện lỗi sớm, chuẩn hóa cách viết code và nâng cao chất lượng tổng thể của dự án. Khi được kết hợp cùng các công cụ như Prettier, Husky hay CI/CD, ESLint trở thành một phần không thể thiếu trong workflow chuyên nghiệp, từ giai đoạn phát triển đến triển khai sản phẩm. Áp dụng ESLint ngay từ đầu không chỉ giúp giảm bug mà còn tạo ra sự thống nhất trong đội ngũ lập trình viên, đặc biệt trong các dự án lớn hoặc làm việc theo nhóm. Tuy nhiên để đạt hiệu quả cao nhất, bạn cần cấu hình hợp lý và điều chỉnh rules phù hợp với quy mô cũng như yêu cầu thực tế của dự án. Nhìn chung, ESLint không chỉ là một công cụ kiểm tra lỗi mà còn là nền tảng quan trọng giúp xây dựng một hệ thống code sạch, ổn định và dễ bảo trì trong dài hạn.

Tham khảo thêm:

 Swagger là gì? Cách sử dụng Swagger trong phát triển web

 Markdown là gì? Học nhanh cú pháp Markdown trong 10 phút

 AR là gì? Cơ chế vận hành và ứng dụng của Augmented Reality