Khi ứng dụng front-end ngày càng phức tạp, việc duy trì chất lượng code trở nên quan trọng hơn bao giờ hết. Hai công cụ thiết yếu trong bộ công cụ của lập trình viên NextJS hiện đại là ESLint và Prettier. Khi được cấu hình đúng cách, chúng hoạt động cùng nhau để phát hiện lỗi, thực thi các tiêu chuẩn code và đảm bảo định dạng nhất quán trong toàn bộ codebase của bạn. Trong hướng dẫn này, bạn sẽ học cách thiết lập ESLint và Prettier trong dự án Next.js để đảm bảo chất lượng, tính nhất quán và khả năng bảo trì của code.
Tại sao nên sử dụng ESLint và Prettier?
Trước khi bắt đầu cài đặt, hãy tìm hiểu về giá trị của những công cụ này:
- Prettier: Một công cụ định dạng code theo quy chuẩn, đảm bảo phong cách code nhất quán trong toàn bộ codebase.
- ESLint: Một công cụ linting giúp phát hiện lỗi cú pháp, thực thi các best practices và duy trì chất lượng code.
Cả hai bổ sung cho nhau: Prettier xử lý định dạng, trong khi ESLint tập trung vào chất lượng code và các pattern.
Hãy bắt đầu quá trình cài đặt!
Tạo ứng dụng Next.js với eslint
npx create-next-app@latest my-next-app
# hoặc
npx create-next-app@latest "next-app" --ts --no-turbopack --no-interactive --typescript --eslint --tailwind --app --src-dir --import-alias "@/*"
cd my-next-app
Cài đặt dependencies
Chạy lệnh sau để cài đặt Prettier và các plugin cần thiết khác:
# cho next eslint có sẵn
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
prettier: Công cụ định dạng code để đảm bảo phong cách nhất quán.eslint-config-prettier: Vô hiệu hóa các rule của ESLint xung đột với Prettier.eslint-plugin-prettier: Tích hợp Prettier vào ESLint để các lỗi định dạng được đánh dấu.
Cập nhật eslint.config.mjs trong thư mục gốc
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.config({
extends: ["next/core-web-vitals", "next/typescript", "prettier"],
plugins: ["prettier"],
rules: {
//
"prettier/prettier": "error",
},
}),
];
export default eslintConfig;
Tạo tệp cấu hình Prettier (.prettierrc)
Thêm cấu hình Prettier sau vào tệp .prettierrc:
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": false,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf"
}
printWidth: Giới hạn độ dài tối đa của mỗi dòng code.tabWidth: Số khoảng trắng cho mỗi level thụt đầu dòng.useTabs: Sử dụng khoảng trắng thay vì ký tự tab.semi: Không thêm dấu chấm phẩy ở cuối câu lệnh.singleQuote: Ưu tiên sử dụng dấu nháy đơn.trailingComma: Thêm dấu phẩy ở cuối các phần tử. Ví dụ:{ foo: bar, }jsxSingleQuote: Sử dụng dấu nháy kép trong JSX. Ví dụ:<Component prop="value" />bracketSpacing: Thêm khoảng trắng giữa dấu ngoặc nhọn. Ví dụ:{ foo: bar }arrowParens: Luôn sử dụng dấu ngoặc đơn cho tham số của arrow function.endOfLine: Sử dụng LF (Line Feed) cho việc xuống dòng.
Bỏ qua các tệp
Tạo .prettierignore trong thư mục gốc
build/
public
node_modules/
package-lock.json
yarn.lock
.yarn/
.next
Cập nhật package.json của bạn với các script hữu ích:
Chỉnh sửa package.json để bao gồm các script hữu ích sau:
{
"scripts": {
...
"lint": "next lint",
"lint:fix": "next lint --fix --ext .js,.jsx,.ts,.tsx",
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
Demo
Tạo src/app/about/page.tsx trong thư mục gốc
export default function About() {
let x =10
return (
<div className=""><h1 className="">About</h1>
</div>
)
}
Có một số lỗi trong đoạn code trên:
let x =10nên làconst x = 10<h1 className="">About</h1>nên xuống dòng mới
Chạy ESLint & Prettier
- Chạy
npm run lintđể kiểm tra lỗi linting. - Chạy
npm run lint:fixđể tự động sửa lỗi linting. - Chạy
npm run formatđể định dạng code của bạn. - Chạy
npm run format:checkđể kiểm tra xem các tệp đã được định dạng đúng chưa.
Chạy Build
npm run build
# Creating an optimized production build ...
# Linting and checking validity of types ...
Bạn sẽ thấy lỗi sau:
Failed to compile.
./src/app/about/page.tsx
2:7 Error: 'x' is never reassigned. Use 'const' instead. prefer-const
2:7 Error: 'x' is assigned a value but never used. @typescript-eslint/no-unused-vars
2:10 Error: Insert `·` prettier/prettier
4:23 Error: Insert `⏎······` prettier/prettier
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules
Như vậy, khi build dự án, eslting và linting sẽ chạy để kiểm tra tính hợp lệ của các kiểu bao gồm các rule của eslint và prettier.
(Tùy chọn) Thiết lập tích hợp VSCode
Cài đặt các Extension của Vscode
- ESLint (
dbaeumer.vscode-eslint) - Prettier - Code formatter (
esbenp.prettier-vscode)
Sau khi cài các extention trên, các lỗi về ESLint và Prettier sẽ được hiển thị trong VSCode, giúp bạn dễ dàng sửa lỗi và định dạng code.
Định dạng và sửa lỗi linting thủ công:
Cmd + Shift + P- Format Document with Prettier
- Fix all auto-fixable Problems
Bật Format on Save:
Mở VSCode Settings (settings.json) và hoặc tạo .vscode/settings.json trong thư mục gốc
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": false,
"eslint.validate": [
"javascript",
"typescript"
],
"prettier.disableLanguages": [
"vue"
],
"json.format.enable": false
}
Kết luận
Việc thiết lập ESLint và Prettier trong dự án Next.js/React sẽ giúp đảm bảo code của bạn nhất quán, dễ đọc và dễ bảo trì. Làm theo các bước trên sẽ giúp bạn và team viết code sạch hơn với ít lỗi hơn. 🚀