DEV Community

Cover image for Setup Next.js 14 project with Eslint + Prettier + Tailwind CSS
JSDev Space
JSDev Space

Posted on

49

Setup Next.js 14 project with Eslint + Prettier + Tailwind CSS

To set up a Next.js 13 project with ESLint and Prettier, you can follow these steps:

Step 1: Create a Next.js Project

npx create-next-app my-nextjs-app
Enter fullscreen mode Exit fullscreen mode

Replace my-nextjs-app with the name of your project.

Step 2: Install ESLint and Prettier

Navigate to your project directory and install ESLint, Prettier, and required plugins:

cd my-nextjs-app
npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

Enter fullscreen mode Exit fullscreen mode

Step 3: Create ESLint Configuration

Create an ESLint configuration file named .eslintrc.js in your project root:

module.exports = {
  extends: ['next', 'next/core-web-vitals', 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  plugins: ['react', '@typescript-eslint'],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    // Add your custom ESLint rules here
  },
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Create Prettier Configuration

Create a Prettier configuration file named .prettierrc.js in your project root:

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  plugins: ["prettier-plugin-tailwindcss"],
};
Enter fullscreen mode Exit fullscreen mode

Step 5: Configure VSCode (Optional)

If you're using Visual Studio Code, you can install the ESLint and Prettier extensions for automatic linting and formatting.

Step 6: Add Scripts to package.json

Add the following scripts to your package.json file:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Run ESLint and Prettier

npm run lint     # Run ESLint
npm run format   # Format code with Prettier
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (2)

Collapse
 
ilumin profile image
Lumin

You have to use eslint@^8 since eslint@9 might have breaking changes.

Collapse
 
wldrocha profile image
Wladimir Rocha

There is already a command inside that helps you with migration

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay