Cách tôi nâng cấp ESLint từ 8 => 9 cùng combo TypeScript + StandardJS

Các dự án frontend viết bằng Vite hoặc Nextjs của tôi bây giờ thường sẽ đòi hỏi combo TypeScript + ESLint + StandardJS. Tôi thích Standard vì nó khiến cho code trở nên sạch hơn tương tự như Python - ngôn ngữ tôi đã làm việc suốt 20 năm qua.

Khi dùng standard nó không cho phép thay đổi rule linh hoạt, có vài người sẽ thấy nó cứng nhắc. Nhưng đó lại là điểm mạnh khi bạn áp dụng nó vào làm việc nhóm. Nó đảm bảo code base của bạn được chuẩn chỉnh và hạn chế các sai sót do lỗi cú pháp cơ bản. Thêm nó vào git pre-commit hook để không ai có thể commit nếu chưa sửa xong lỗi eslint.

Từ 2025, chuyển qua phiên bản ESLint 9.x, cấu hình file eslint.config.mjs trở nên đơn giản và dễ hiểu hơn rất nhiều:

import neostandard, { plugins, resolveIgnoresFromGitignore } from 'neostandard'  
import stylisticTs from '@stylistic/eslint-plugin-ts'  

export default [  
  ...neostandard({  
    ignores: resolveIgnoresFromGitignore(),  
    ts: true  
  }),  
  plugins['@stylistic'].configs['disable-legacy'],  
  {  
    plugins: {  
      '@stylistic/ts': stylisticTs  
  },  
    rules: {  
      '@typescript-eslint/array-type': 'error',  
      '@typescript-eslint/no-explicit-any': 'off',  
      '@typescript-eslint/strict-boolean-expressions': 'off',  
      '@typescript-eslint/no-misused-promises': 'off',  
      '@typescript-eslint/explicit-function-return-type': 'off',  
      '@typescript-eslint/no-confusing-void-expression': 'off',  
      '@typescript-eslint/no-floating-promises': 'off',  
      '@typescript-eslint/no-unused-vars': 'warn',  
      '@typescript-eslint/consistent-type-imports': 'warn',  
      '@stylistic/ts/space-before-blocks': 'error',  
      '@stylistic/ts/type-annotation-spacing': 'error',  
      '@stylistic/ts/object-curly-spacing': ['error', 'always']  
    }  
  }  
]

Bạn phải cài đặt các gói liên quan:

pnpm add -D neostandard typescript @eslint/js @stylistic/eslint-plugin-ts

Lưu ý: bạn có thể neo phiên bản ESLint và neostandard lại để tránh các cập nhật lớn dẫn đến project mất ổn định.

Tôi sử dụng neostandard thay vì standard gốc, do bản gốc không hỗ trợ TypeScript. Muốn dùng phải có plugin @typescript-eslint khiến việc cài đặt trở nên dài dòng. Tôi không để neostandard tự bật sẵn các rule mặc định, tôi chủ động tắt (disable-legacy) rồi cài lại plugin @stylistic/eslint-plugin-ts, để tự kiểm soát rule nào thực sự cần dùng cho TypeScript.

stylistic cũng là 1 gói tuyệt vời được tách ra từ chính ESLint phiên bản cũ, đảm bảo giữ các rule truyền thống nhưng vẫn hữu ích và được nhiều người yêu thích. neostandard đóng vài trò là chương trình đứng ra cài đặt chung cho mọi thứ như TypeScript, ESM, JSX, React...

Cuối cùng, chúng ta thử nghiệm với 1 file mẫu viết rất cẩu thả như sau:

import React from 'react';  



const _EslintTest = () => {  
  return (  
    <div className={"my-4"}>  
  my text  
    </div>  
  );  
};  

export default EslintTest;

Kết quả như ảnh bên dưới:

Hầu hết các IDE nổi tiếng như VS Code, Webstorm đều hỗ trợ ESLint rất tốt. Hãy nâng cấp lên bản ESLint 9 để cải thiện trải nghiệm coding nhé!