[新版網址](https://rulerchen.github.io/RulerChen-Website/docs/Next.js/EslintPrettier)

1. use `npx create-next-app@latest <project_name>` to build a Next.js project.


2. remove `package-lock.json` and `node_modules`

3. add `package.json` and `eslintrc.json` as follows

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true,
        "trailingComma": "es5",
        "printWidth": 100
      }
    ],
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

{
  "name": "eslint",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.4",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.4.1"
  }
}

4. install Eslint extension in VScode


5. restart vscode

6. check eslint run on save


7. use eslint as default formatter


Finally, you can use eslint to format your Next.js project.