Sửa lỗi: ESLint 'Cannot find module' trong VS Code

Kịch bảnBạn mở một dự án và nhận thấy mã nguồn của mình trông sạch sẽ một cách đáng ngờ. Không có các đường gạch chân đỏ xuất hiện, và các cảnh báo linting thông thường cũng không thấy đâu. Khi bạn kiểm tra bảng Output (chọn 'ESLint' từ menu thả xuống), bạn sẽ thấy thủ phạm:

Failed to load plugin. Cannot find module 'eslint'

Lỗi này thường xảy ra khi extension ESLint không thể xác định vị trí của gói eslint. Mặc dù lệnh này có thể hoạt động trong terminal của bạn, nhưng extension trên VS Code thường gặp khó khăn trong việc tìm kiếm file thực thi trong node_modules hoặc môi trường global. Điều này khiến trình soạn thảo của bạn không nhận diện được các vi phạm về style mặc dù các script build vẫn chạy hoàn hảo.

Tại sao lỗi này xảy raExtension ESLint của VS Code không phải lúc nào cũng chia sẻ cùng một môi trường với terminal của bạn. Shell của bạn sử dụng biến PATH của hệ thống, nhưng extension lại đặc biệt tìm kiếm bản cài đặt cục bộ tại thư mục gốc của workspace. Nếu bạn đang làm việc trong một monorepo, quên chạy npm install, hoặc vừa mới chuyển đổi phiên bản Node qua NVM, extension sẽ bị mất dấu.

Cách khắc phục nhanh: Cài đặt ESLint cục bộHầu hết các dự án hiện đại đều yêu cầu ESLint như một dependency phát triển cục bộ. Ngay cả khi bạn đã cài đặt một phiên bản global, extension VS Code vẫn ưu tiên node_modules cục bộ để đảm bảo sự đồng nhất về phiên bản giữa các thành viên trong nhóm. Việc thiếu gói cục bộ này là nguyên nhân của khoảng 80% các lỗi nói trên.

Chạy lệnh tương ứng trong thư mục gốc của dự án:

# For npm users
npm install eslint --save-dev

# For yarn users
yarn add eslint --dev

# For pnpm users
pnpm add -D eslint

Sau khi quá trình tải xuống khoảng 40MB đến 50MB các dependency hoàn tất, hãy tải lại cửa sổ. Nhấn Ctrl+Shift+P (hoặc Cmd+Shift+P trên Mac) và nhập "Developer: Reload Window" để khởi động lại extension server.

Cách khắc phục lâu dài 1: Cấu hình thư mục làm việc cho MonorepoCác thiết lập tiêu chuẩn thường thất bại trong các monorepo được quản lý bởi Lerna, Nx hoặc Turborepo. Nếu file package.json của bạn nằm trong /packages/ui/ nhưng bạn lại mở thư mục gốc trong VS Code, extension sẽ tìm kiếm sai chỗ. Nó mong đợi node_modules nằm ở cấp cao nhất.

Bạn có thể khắc phục điều này bằng cách xác định cấu trúc dự án trong .vscode/settings.json:

{
  "eslint.workingDirectories": [
    { "mode": "auto" }
  ]
}

Nếu chế độ auto không nhận diện được các thư mục con, hãy liệt kê chúng một cách rõ ràng để hướng dẫn extension:

{
  "eslint.workingDirectories": [
    "./apps/web",
    "./apps/api",
    "./packages/shared"
  ]
}

Cách khắc phục lâu dài 2: Căn chỉnh đường dẫn NodeExtension có thể đang cố gắng sử dụng phiên bản Node mặc định của hệ thống vốn thiếu các dependency của dự án. Điều này thường thấy nếu bạn sử dụng các trình quản lý phiên bản như asdf hoặc nvm. Nếu extension trỏ đến /usr/bin/node nhưng dự án của bạn cần v18.15.0, nó sẽ không tìm thấy các module.

Tìm đường dẫn Node đang hoạt động bằng cách nhập which node (macOS/Linux) hoặc where node (Windows) trong terminal. Sau đó, chỉ định chính xác file thực thi cho VS Code sử dụng:

{
  "eslint.nodePath": "/Users/username/.nvm/versions/node/v18.15.0/bin/node" 
}

Lưu ý: Việc hardcode đường dẫn này là giải pháp cuối cùng. Thường thì tốt hơn hết là đảm bảo môi trường shell của bạn được xuất chính xác sang VS Code.

Cách khắc phục lâu dài 3: Chạy từ TerminalCác biến môi trường có thể bị mất khi bạn khởi chạy VS Code từ phím tắt GUI hoặc dock. Nếu bạn sử dụng NVM, shell có thể chưa kịp khởi tạo đường dẫn Node trước khi extension bắt đầu. Điều này dẫn đến lỗi "module not found" vì extension đang tìm kiếm trong một môi trường trống.

• Đóng tất cả các cửa sổ VS Code.- Mở terminal và cd vào thư mục dự án của bạn.- Đảm bảo phiên bản Node chính xác đang hoạt động (ví dụ: nvm use 18).- Nhập code . để khởi chạy trình soạn thảo.Phương pháp này buộc VS Code kế thừa các biến môi trường từ phiên bản terminal đang hoạt động của bạn. Đây là một cách rất hiệu quả để giải quyết các xung đột về đường dẫn.

Cách xác minh việc khắc phụcXác nhận việc khắc phục bằng cách kiểm tra nhật ký nội bộ thay vì chỉ tìm các đường gạch chân. Làm theo các bước sau:

• Mở bất kỳ file .js hoặc .ts nào.- Truy cập View > Output.- Chọn ESLint từ menu thả xuống ở bên phải.- Tìm thông báo: ESLint server is running.Để kiểm tra thủ công, hãy thêm const x = 1; vào một file. Nếu bạn đã kích hoạt quy tắc no-unused-vars, một cảnh báo màu vàng sẽ xuất hiện ngay lập tức. Điều này xác nhận extension đang giao tiếp thành công với module ESLint.

Cục bộ và Toàn cục: Một cảnh báoBạn có thể muốn khắc phục điều này bằng cách chạy npm install -g eslint. Hãy tránh điều này. Việc cài đặt toàn cục tạo ra các lỗi kiểu "chạy được trên máy tôi". Khi đồng nghiệp clone repo của bạn, việc linting của họ sẽ thất bại vì họ không có thiết lập global giống bạn. Luôn giữ eslint bên trong devDependencies để đảm bảo dự án có tính di động và thân thiện với CI/CD.