Next 14 App

npx create-next-app@latest

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin husky lint-staged prettier-plugin-tailwindcss @commitlint/{cli,config-conventional} eslint-plugin-import-helpers

Development Dependencies for Next.js with TypeScript

--save-dev: Saves dependencies only for the development environment.

eslint: Tool to analyze and find problems in JavaScript and TypeScript code.

prettier: Code formatter that ensures a consistent style throughout the project.

eslint-config-prettier: Disables ESLint rules that might interfere with Prettier.

eslint-plugin-prettier: Integrates Prettier with ESLint to show formatting errors.

@typescript-eslint/parser: Parser that allows ESLint to understand TypeScript.

@typescript-eslint/eslint-plugin: Set of specific TypeScript rules for ESLint.

husky: Tool to create Git hooks, helping automate tasks before committing.

lint-staged: Runs linters on staged files in Git.

prettier-plugin-tailwindcss: Plugin for Prettier that automatically sorts Tailwind CSS classes.

@commitlint/cli, @commitlint/config-conventional: Tools to ensure commit messages follow a conventional standard.

eslint-plugin-import-helpers: ESLint plugin to automatically order imports.

Eslint Config

Generate a

.eslintrc.js

file with the following content:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:@next/next/recommended', 'prettier' ],
  plugins: ['@typescript-eslint', 'prettier' , 'eslint-plugin-import-helpers'],
  rules: {
    'prettier/prettier': ['error'],
    'react/react-in-jsx-scope': 'off',
    "react/prop-types": "off",
    'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }], 
    "import-helpers/order-imports": [
      "warn",
      {
        newlinesBetween: "always",
        groups: [
          ["/^next/", "module"],
          "/@styles/",
          "/@components/",
          "/@lib/",
          ["parent", "sibling", "index"],
        ],
        alphabetize: { order: "asc", ignoreCase: true },
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Prettier Config

Generate a

prettier.config.js

file with the following content:

module.exports = {
  "useTabs": false,
  "singleQuote": false,
  "plugins": ["prettier-plugin-tailwindcss"]
};

Commitlint Config

Generate a

commitlint.config.js

file with the following content:

module.exports = { extends: ["@commitlint/config-conventional"] };

Husky

Execute a

npx husky install

Generate in a husky folder the file

pre-commit

npx lint-staged

Generate in a husky folder the file

commit-msg


npx --no -- commitlint --edit

Package.json

Add in

package.json

file with the following content:

"format": "prettier --write .",
"lint": "eslint --fix . --ext .js,.jsx,.ts,.tsx",
"prepare": "husky install"

Lint Staged Config

Add in

.lintstagedrc

file with the following content:

{
	"**/*.{js,jsx,ts,tsx}": ["npm run format", "npm run lint"]
}

Ignore Eslint

Add in

.eslintignore

file with the following content:


dist
package-lock.json
husky
configs
env
public
server.js
jsconfig.json
package.json
public
README.md
.eslintrc
.eslintrc.json
.eslintrc.js
.prettierrc.json
.eslint*
commitlint.config.js
next-env.d.ts
postcss.config.js
prettier.config.js

Ignore Prettier

Add in

.prettierignore

file with the following content:


dist
package-lock.json
configs
env
husky
public
server.js
jsconfig.json
package.json
public
README.md
.eslintrc
.eslintrc.json
.eslintrc.js
.prettierrc.json
commitlint.config.js
next-env.d.ts
postcss.config.js
commitlint.config.js
prettier.config.js