ESLint là gì? Cách cài đặt và cấu hình ESLint chi tiết từ A-Z

Trong quá trình trực tiếp phát triển và duy trì các dự án JavaScript quy mô lớn, mình đã sử dụng ESLint như một công cụ bắt buộc để kiểm soát chất lượng mã nguồn và đảm bảo tính nhất quán giữa các thành viên trong đội ngũ. Thực tế cho thấy việc cấu hình đúng các bộ quy tắc ngay từ đầu giúp loại bỏ tới 80% các lỗi cú pháp phổ biến và các rủi ro tiềm ẩn trước khi bước vào giai đoạn kiểm thử. Bài viết này sẽ hướng dẫn chi tiết cách cài đặt và tối ưu hóa cấu hình ESLint giúp bạn chuẩn hóa quy trình lập trình một cách chuyên nghiệp nhất.

Những điểm chính

Đối với mình, ESLint không chỉ là công cụ kiểm tra lỗi cú pháp mà còn là nền tảng giúp duy trì chất lượng code, tính nhất quán và khả năng mở rộng của dự án. Để giúp bạn hiểu rõ hơn về ESLint và cách ứng dụng trong thực tế, bài viết dưới đây sẽ cung cấp các thông tin gồm:

• Khái niệm: Hiểu rõ ESLint là công cụ phân tích mã nguồn tĩnh giúp phát hiện lỗi cú pháp, logic và vi phạm coding convention.
• Ưu nhược điểm: Nắm được các ưu nhược điểm phổ biến, giúp bạn đưa ra lựa chọn phù hợp khi sử dụng
• Plugins và rules phổ biến: Biết cách áp dụng các plugin và các quy tắc để tối ưu hóa việc quản lý mã nguồn.
• Quy trình cài đặt: Nắm vững các bước cài đặt ESLint qua npm hoặc pnpm, khởi tạo file cấu hình .eslintrc.json và chạy lệnh lint cơ bản để bắt đầu kiểm tra dự án.
• Cấu hình chuyên sâu: Học cách thiết lập ESLint cho dự án TypeScript, tạo file eslint.config.mjs và tích hợp các rule nâng cao để đảm bảo tính chặt chẽ của mã nguồn.
• Tích hợp công cụ: Biết cách kết hợp ESLint với Prettier và Airbnb Style Guide để tự động format code và tuân thủ các chuẩn mực lập trình được cộng đồng công nhận.
• Khắc phục lỗi thường gặp: Nhận diện và xử lý các lỗi phổ biến như Parsing error, import/no-unresolved, import/extensions giúp quá trình phát triển diễn ra suôn sẻ hơn.
• Biết thêm Vietnix là nhà cung cấp hạ tầng lưu trữ uy tín, đáp ứng đa dạng nhu cầu vận hành của doanh nghiệp.
• Câu hỏi thường gặp: Giải đáp các thắc mắc liên quan đến ESLint.

ESLint là gì?

ESLint là một công cụ open-source chuyên phân tích mã nguồn tĩnh dành cho JavaScript và TypeScript. Công cụ này đọc code bằng Node.js và Espree, sau đó tạo AST (Abstract Syntax Tree) để phân tích sâu. Từ AST, ESLint kiểm tra patterns qua hệ thống rules dạng plugin độc lập, mỗi rule có thể bật/tắt hoặc thêm mới tại runtime. Quá trình này phát hiện lỗi cú pháp, lỗi logic và vi phạm coding convention trước khi chạy ứng dụng. ESLint còn tự động sửa lỗi format đơn giản, tích hợp VS Code và CI/CD để đảm bảo code sạch, nhất quán.

Ưu nhược điểm của ESLint

Plugins phổ biến

1. eslint-plugin-import

Đây là plugin kiểm tra tính hợp lệ câu lệnh import. Đảm bảo module tồn tại và sắp xếp đúng thứ tự (external trước, internal sau).

• import/no-unresolved: Phát hiện import module không tồn tại.
• import/order: Sắp xếp import theo nhóm, alphabetize.

{
  "plugins": ["import"],
  "rules": {
    "import/no-unresolved": "error",
    "import/order": ["error", {"groups": ["builtin", "external", "internal"], "alphabetize": {"order": "asc"}}]
  }
}

2. eslint-plugin-react

Đây là plugin hỗ trợ dự án React, giúp phát hiện vấn đề trong code JSX như biến chưa dùng hoặc thiếu khai báo React (trước React 17).

• react/jsx-uses-react: Yêu cầu import React cho JSX.
• react/jsx-uses-vars: Kiểm tra biến dùng trong JSX.

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error"
  }
}

3. @typescript-eslint/eslint-plugin

Đây là plugin cho TypeScript, yêu cầu khai báo kiểu rõ ràng, phát hiện biến không dùng.

• @typescript-eslint/explicit-function-return-type: Bắt buộc kiểu return cho hàm.
• @typescript-eslint/no-unused-vars: Cảnh báo biến/params không dùng.

{
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

4. eslint-plugin-jsx-a11y

Plugin kiểm tra accessibility (a11y) trong JSX, đảm bảo thẻ hợp lệ cho người dùng khuyết tật.

• jsx-a11y/anchor-is-valid: Thẻ <a> phải có href.
• jsx-a11y/alt-text: Thẻ <img> phải có alt.

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/anchor-is-valid": "warn",
    "jsx-a11y/alt-text": "error"
  }
}

5. eslint-plugin-prettier

Plugin kết hợp ESLint với Prettier, áp dụng format tự động theo config Prettier.

• prettier/prettier: Kiểm tra và fix lỗi format.

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

Rules phổ biến

• indent: Đảm bảo canh lề đồng nhất (2 hoặc 4 spaces).

{
  "rules": {
    "indent": ["error", 2]
  }
}

• quotes: Bắt buộc dùng dấu nháy đơn ‘ hoặc đôi “.

{
  "rules": {
    "quotes": ["error", "single"]
  }
}

• semi: Yêu cầu dấu chấm phẩy ; cuối câu lệnh.

{
  "rules": {
    "semi": ["error", "always"]
  }
}

• no-console: Cảnh báo dùng console.log trong production.

{
  "rules": {
    "no-console": "warn"
  }
}

• eqeqeq: Bắt buộc so sánh nghiêm ngặt === thay ==.

{
  "rules": {
    "eqeqeq": "error"
  }
}

• no-unused-vars: Phát hiện biến không dùng.

{
  "rules": {
    "no-unused-vars": "warn"
  }
}

ESLint yêu cầu Node.js phiên bản ^18.18.0, ^20.9.0 hoặc >=21.1.0. Các phiên bản này hỗ trợ SSL và theo chính sách Maintenance, LTS, Current của Node.js.

1. Cài đặt local qua npm

Bạn mở terminal trong thư mục dự án và chạy lệnh cài đặt ESLint như sau:

npm install eslint --save-dev

Khởi tạo file config .eslintrc.json bằng lệnh:

npx eslint --init

Chọn JavaScript/TypeScript, framework (React/Vue), style guide (Airbnb/Standard), format JSON.

Test lint file đầu tiên để xem báo cáo lỗi trong terminal:

npx eslint yourfile.js

2. Cài đặt global qua npm

Bạn chạy lệnh cài đặt global:

npm install -g eslint

Tạo file config với lệnh:

eslint --init

Trả lời tương tự bước local. Lint file bất kỳ:

eslint yourfile.js

3. Cài đặt qua pnpm

Bạn tạo file .npmrc trong project root với nội dung:

auto-install-peers=true
node-linker=hoisted

Sau đó cài đặt ESLint với lệnh:

pnpm add eslint --save-dev

Khởi tạo config:

pnpx eslint --init

Test lint:

pnpx eslint yourfile.js

1. Khởi tạo dự án TypeScript

Bạn tạo project mới bằng cách chạy các lệnh sau trong terminal:

npm init -y
npm install ts-node typescript --save-dev
npx tsc --init

Bạn cập nhật file tsconfig.json với cấu hình sau:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

2. Cài đặt ESLint và plugins

Bạn cài đặt ESLint bằng lệnh sau:

npm install eslint --save-dev
npx eslint --init

Sau đó trả lời wizard theo các lựa chọn sau:

• Use ESLint: “To check syntax, find problems”.
• Modules: “JavaScript modules (import/export)”.
• Framework: “None”.
• TypeScript: “Yes”.
• Environment: “Node”.
• Package manager: “npm”.

Bạn cài thêm các plugins cần thiết bằng lệnh:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-prettier eslint-config-prettier --save-dev

Bạn thêm scripts vào package.json như sau:

"scripts": {
  "lint": "eslint 'src/**/*.{js,ts,tsx}'",
  "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix"
}

3. Tạo file eslint.config.mjs

Bạn tạo file eslint.config.mjs với nội dung cấu hình đầy đủ:

import js from '@eslint/js';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import importPlugin from 'eslint-plugin-import';
import prettierPlugin from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default [
  // Tương đương với 'eslint:recommended' cũ
  js.configs.recommended,
  // Tương đương với 'eslint-config-prettier'
  prettierConfig, 
  {
    ignores: ['**/node_modules/**', '**/dist/**', '**/build/**'],
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.json',
        tsconfigRootDir: process.cwd(),
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin,
      import: importPlugin,
      prettier: prettierPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules, // Kế thừa rule của TS
      'prettier/prettier': 'error',
      'import/no-unresolved': 'error',
      'import/order': ['error', { groups: ['builtin', 'external', 'internal'], alphabetize: { order: 'asc', caseInsensitive: true } }],
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/explicit-function-return-type': 'warn',
      '@typescript-eslint/no-explicit-any': 'error'
    }
  }
];

4. Chạy lint

Bạn kiểm tra toàn bộ lỗi trong source code bằng lệnh sau:

npm run lint

Bạn tự động sửa các lỗi format và cú pháp đơn giản bằng lệnh:

npm run lint:fix

Bạn tạo thư mục src và file test src/index.ts với nội dung:

console.log("Hello, Vietnix");

1. Sử dụng Airbnb Style Guide

Bạn sử dụng Airbnb Style Guide để áp dụng bộ quy tắc JavaScript chuẩn từ Airbnb. Bạn cài đặt package config bằng lệnh sau trong terminal:

npx install-peerdeps --dev eslint-config-airbnb

Đối với dự án sử dụng định dạng cấu hình cũ, bạn mở file .eslintrc.json và thêm dòng airbnb vào mảng extends:

{
  "extends": ["airbnb"]
}

2. Kết hợp với Prettier

ESLint chuyên kiểm tra lỗi logic và cú pháp, trong khi Prettier chuyên tự động format code (căn lề, dấu ngoặc, chấm phẩy…). Kết hợp hai công cụ này sẽ tạo ra một workflow hoàn chỉnh.

Bạn cài đặt các package hỗ trợ tích hợp bằng lệnh sau:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

Sau đó, bạn mở filesettings: { 'import/resolver': { typescript: {} } } cấu hình .eslintrc.json và thêm "plugin:prettier/recommended" vào vị trí cuối cùng của mảng extends:

{
  "prettier/prettier": "error"
}

Bạn thêm các extends sau vào mảng extends:

{
  "extends": [
    "airbnb", 
    "plugin:prettier/recommended" 
  ]
}

3. Tự động chạy ESLint qua scripts

Bạn mở file package.json và thêm hai scripts sau vào phần scripts:

{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,ts,jsx,tsx}'",
    "lint:fix": "eslint 'src/**/*.{js,ts,jsx,tsx}' --fix"
  }
}

Bạn chạy kiểm tra tất cả lỗi bằng lệnh:

npm run lint

Bạn chạy tự động sửa lỗi format bằng lệnh sau:

npm run lint:fix

1. Lỗi Parsing error: Cannot find module ‘@typescript-eslint/parser’

Lỗi “Parsing error: Cannot find module ‘@typescript-eslint/parser'” xảy ra khi ESLint không tìm thấy parser dành riêng cho TypeScript. Parser này cần thiết để ESLint hiểu cú pháp TypeScript như type annotations, interfaces và generics.

Bạn mở terminal ở thư mục project và kiểm tra xem package đã cài chưa bằng lệnh npm ls @typescript-eslint/parser. Nếu chưa có, bạn cài đặt package bằng lệnh sau:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Bạn mở file config ESLint (eslint.config.mjs) và thêm import ở đầu file:

import tsParser from '@typescript-eslint/parser';

Bạn cập nhật section languageOptions trong config như sau:

languageOptions: {
  parser: tsParser,
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: process.cwd(),
  },
}

Sau đó chạy lại npm run lint để xác nhận lỗi đã biến mất.

2. Lỗi Cannot read file ‘tsconfig.json’

Lỗi “Cannot read file ‘tsconfig.json'” xuất hiện khi TypeScript parser không đọc được file config TypeScript. ESLint cần file này để hiểu type checking và project structure. Bạn kiểm tra file tsconfig.json có tồn tại ở thư mục gốc project chưa. Bạn mở tsconfig.json và validate syntax bằng lệnh:

npx tsc --noEmit --skipLibCheck

Tiếp theo, bạn mở file config ESLint và kiểm tra dòng project. Đảm bảo đường dẫn trỏ đúng tới tsconfig.json:

parserOptions: {
  project: './tsconfig.json'
  // Hoặc nhiều file: project: ['./tsconfig.json', './tsconfig.build.json']
}

Bạn đóng VS Code hoàn toàn rồi mở lại. Bạn chạy lệnh npm run lint để kiểm tra lỗi đã hết chưa.

3. Lỗi import/no-unresolved

Lỗi import/no-unresolved báo rằng ESLint không resolve được đường dẫn module import. Nguyên nhân chính là module chưa cài đặt hoặc alias paths chưa config đúng.

Bạn kiểm tra module đã cài bằng:

npm ls lodash

Sau đó, bạn cài đặt nếu thiếu:

npm install lodash

Bạn mở tsconfig.json và thêm cấu hình paths nếu dùng alias:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

Bạn cài resolver cho ESLint:

npm install --save-dev eslint-import-resolver-typescript

Bạn thêm vào ESLint config:

{
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

4. Lỗi import/extensions

Lỗi import/extensions yêu cầu chỉ định đuôi file (.ts, .tsx) trong import statements. Rule này tránh ambiguous imports trong môi trường không tự resolve extensions. Bạn sửa code bằng cách thêm extension rõ ràng:

// Thay vì
import MyComponent from './MyComponent';
// Dùng
import MyComponent from './MyComponent.tsx';

Bạn config rule linh hoạt hơn trong .eslintrc.json nếu dùng bundler như Vite/Webpack:

{
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never", 
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

Bạn chạy npm run lint:fix để ESLint tự thêm extensions nếu config cho phép.

5. Lỗi import/named

Lỗi import/named xảy ra khi bạn import named export không tồn tại trong source file. ESLint kiểm tra statically để tránh runtime errors. Để sửa lỗi, bạn mở file source và kiểm tra export statements:

// File module.ts phải có:
export const MY_CONSTANT = 42;
export function myFunction() {}

Bạn sửa import statement cho đúng tên:

// Đúng
import { MY_CONSTANT, myFunction } from './module';
// Sai: import { myconstant } from './module';

Bạn chạy npm run lint:fix để ESLint highlight lỗi realtime trong VS Code.

6. Lỗi import/order

Lỗi import/order báo import statements không theo thứ tự chuẩn. Thứ tự đúng giúp code dễ scan và tránh circular dependencies. Để sửa lỗi, bạn sắp xếp import theo quy tắc:

• builtin (fs, path, process).
• external (react, lodash từ node_modules).
• internal (@app/components, ./utils).

Bạn config rule chi tiết trong ESLint:

{
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external", 
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "newlines-between": "always",
        "alphabetize": { "order": "asc" }
      }
    ]
  }
}

Bạn chạy npm run lint:fix để ESLint tự sắp xếp imports.

7. Lỗi import/prefer-default-export

Lỗi import/prefer-default-export cảnh báo khi module chỉ export 1 item nhưng dùng named export. Default export ngắn gọn hơn cho single exports. Đầu tiên, bạn refactor module sang default export:

// File module.ts
const myComponent = () => <div>Hello</div>;
export default myComponent;

// Import
import MyComponent from './module';thuê hosting website
{
  "rules": {
    "import/prefer-default-export": "off"
  }
}

Vietnix – Nhà cung cấp hạ tầng lưu trữ uy tín, đáp ứng đa dạng nhu cầu vận hành của doanh nghiệp

Vietnix là nhà cung cấp dịch vụ thuê hosting website và cho thuê server VPS hướng đến sự ổn định, hiệu năng và khả năng đáp ứng linh hoạt theo từng nhu cầu vận hành thực tế. Các giải pháp được xây dựng với mục tiêu tối ưu tốc độ xử lý, đảm bảo tính liên tục của hệ thống và hỗ trợ triển khai đa dạng từ website, ứng dụng đến các hệ thống backend phức tạp. Bên cạnh đó, Vietnix chú trọng vào bảo mật nhiều lớp và đội ngũ kỹ thuật hỗ trợ 24/7, giúp doanh nghiệp yên tâm trong suốt quá trình vận hành và mở rộng hệ thống. Liên hệ ngay!

Thông tin liên hệ:

• Website: https://vietnix.vn/
• Hotline: 1800 1093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh

Bài viết trên đã giúp bạn hiểu rõ hơn lợi ích, cách cài đặt, cấu hình ESLint với TypeScript, Prettier và Airbnb Style Guide, kèm các ví dụ và lệnh cụ thể. Bạn có thể dựa vào đó để thiết lập một workflow lint hoàn chỉnh, tự động kiểm tra và format code trong cả editor lẫn CI/CD. Khi nắm chắc các lỗi thường gặp và cách khắc phục, bạn sẽ giữ được codebase sạch, nhất quán và dễ mở rộng cho các dự án sau này. Cảm ơn bạn đã theo dõi bài viết!