Next.js Discord

Discord Forum

setuping prettier and eslint with next

Unanswered
Aditya Kirad posted this in #help-forum
Open in Discord
Aditya KiradOP
hey folks here is my eslint config and prettier config I'm using with the t3-app
/** @type {import("eslint").Linter.Config} */
const config = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "plugin:prettier/recommended",
    "plugin:@next/next/recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
  ],
  rules: {
    // These opinionated rules are enabled in stylistic-type-checked above.
    // Feel free to reconfigure them to your own preference.
    "prettier/prettier": ["error"],
    "@typescript-eslint/array-type": "off",
    "@typescript-eslint/consistent-type-definitions": "off",

    "@typescript-eslint/consistent-type-imports": [
      "warn",
      {
        prefer: "type-imports",
        fixStyle: "inline-type-imports",
      },
    ],
    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
    "@typescript-eslint/require-await": "off",
    "@typescript-eslint/no-misused-promises": [
      "error",
      {
        checksVoidReturn: { attributes: false },
      },
    ],
  },
};

module.exports = config;

/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options} */
const config = {
  plugins: ["prettier-plugin-tailwindcss"],
};

export default config;

and with this I do get the eslint and prettier warning when I do something wrong I have attached the image also when I save the file it does automatically formats the file but the problem is when I use same config with new next-app I do not get any warning nor it formats when I save the file here are the prettier and eslint packages I'm using in the t3-app
@next/eslint-plugin-next,
@types/eslint,
@typescript-eslint/eslint-plugin,
@typescript-eslint/parser,
eslint,
eslint-config-prettier,
eslint-plugin-prettier,
prettier,
prettier-plugin-tailwindcss,

31 Replies

Aditya KiradOP
also I don't have the prettier extension installed it works with only eslint extension installed
cougarb8
I see errors
it looks like eslint is working
'redirect' is decalred but never read
@Aditya Kirad
@cougarb8 'redirect' is decalred but never read
Aditya KiradOP
It's in the t3-app whereas I'm talking about setuping ina fresh next app
cougarb8
can you show the tsconfig
@cougarb8 can you show the tsconfig
Aditya KiradOP
Yeah sure give me a second
cougarb8
do you have a specific reason for not using the eslint-config-prettier with the next config?

//.eslintrc.json
{
  "extends": ["next", "prettier"]
}


https://nextjs.org/docs/app/building-your-application/configuring/eslint#usage-with-other-tools
Aditya KiradOP
@cougarb8
this is t3-app tsconfig where prettier & eslint are working
{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,

    /* Bundled projects */
    "lib": ["dom", "dom.iterable", "ES2022"],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "incremental": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

and this is next-app tsconfig where prettier & eslint aren't working I have tweaked this config to match the t3-app config
{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "ES2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,
    "lib": [
      "dom",
      "dom.iterable",
      "ES2022"
    ],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
cougarb8
and you have prettier installed as a dev dependency?
in your package.json
cuz i dont see anything wrong with ur eslint config
or ur tsconfig
@cougarb8 and you have prettier installed as a dev dependency?
Aditya KiradOP
yup you can see in the attached image
cougarb8
//.eslintrc.json
{
  "extends": ["next", "prettier"]
}


What happens if you change ur eslint config to this and rename it to .eslintrc.json does it work
@cougarb8 json //.eslintrc.json { "extends": ["next", "prettier"] } What happens if you change ur eslint config to this and rename it to `.eslintrc.json` does it work
Aditya KiradOP
currently I'm using a commonjs file as per t3-app but I have tried it converting it to json file also it didn't worked out
cougarb8
oh yeah that might cause some issues
here's my setup
//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"],
      "auth": ["./auth"]
    }
  },
  "include": [
    "process.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

//.eslintrc.json
{
  "extends": ["next", "prettier"]
}

//.prettierrc
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}
//package.json
{
 
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^1.0.14",
    "@hookform/resolvers": "^3.3.4",
    "@prisma/client": "^5.7.1",
    "@prisma/extension-accelerate": "^0.6.2",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.3",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "lucide-react": "^0.274.0",
    "next": "latest",
    "next-auth": "beta",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.49.3",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^18",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "autoprefixer": "^10.4.15",
    "eslint-config-next": "^14.0.4",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8.4.29",
    "prettier": "^3.1.1",
    "prisma": "^5.7.1",
    "tailwindcss": "^3.3.3",
    "ts-node": "^10.9.2",
    "typescript": "^5.2.2"
  }
}
this works for me
Aditya KiradOP
@cougarb8 can you once try creating a t3-app and use the config I provided and see why it's working there and then creating a new next-app and use the config to check why it's not working in new fresh next-app I think it will help better us finding in the why config is not working
Aditya KiradOP
@cougarb8 you there were you able ton find the problem
Wood Sandpiper
@cougarb8 , I dont see any prettier related scripts in your package.json .

How are you running style check and corrections on your changes?

I ran into this post while seaching for an answer my above question. Following nextjs doc on Eslint don't get to a working prettier solution. (https://nextjs.org/docs/app/building-your-application/configuring/eslint)
In my editor I do a prettier on each save
In vscode it’s in the settings format on save
In intelliJ/webstorm the setting is actions on save
https://nextjs.org/docs/app/building-your-application/configuring/eslint#usage-with-other-tools all I did was this and then add a .prettierrc to customize format
Also I’m not throwing errors due to formatting style