Linting & Formatting

Our templates come with pre-configured ESLint and Prettier setups to ensure consistent code style and catch potential issues early.

ESLint Configuration

The template uses a modern ESLint configuration with Next.js and TypeScript support. You can find the configuration in eslint.config.mjs:

We use the following eslint plugins and presets.

• next/core-web-vitals,
• next/typescript,
• eslint:recommended,
• plugin:@typescript-eslint/recommended,
• plugin:import/recommended,
• plugin:import/typescript,
• plugin:prettier/recommended,
• next,
• plugin:jsx-a11y/recommended,

We autoformat and sort imports.

Prettier Configuration

Code formatting is handled by Prettier. The configuration is in .prettierrc:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 80,
  "jsxSingleQuote": false,
  "plugins": ["prettier-plugin-tailwindcss"],
}

We autoformat Tailwind CSS class order.

VS Code / Cursor Integration

Install the recommended VS Code extensions:

• ESLint
• Prettier

The template includes a .vscode/settings.json file to enable format on save and auto-fix linting issues.

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Running Linting Manually

npm run lint