ESLint + Prettier (team standard)#

In the ZEUS frontend we don't argue about style — the tooling does it for us. The division of roles is simple: Prettier formats, ESLint guards quality and errors. Together they produce uniform, safe code without disputes at review.

Prettier — formatting only#

Prettier handles appearance: quotes, semicolons, line breaks, indentation. It has no logical rules.

{
  "semi": true,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "all"
}

// before — manual, inconsistent
const probe={id:'dc01',host : "dc01.corp",forest:'corp'}

// after `prettier --write`
const probe = { id: "dc01", host: "dc01.corp", forest: "corp" };

ProfessNet standard: printWidth: 100, trailingComma: "all". Prettier runs on save in the editor and as prettier --check in CI.

ESLint — quality and errors#

ESLint catches real problems: unused variables, missing hook dependencies, any, unsafe patterns. We use the flat config (eslint.config.mjs).

import js from "@eslint/js";
import ts from "typescript-eslint";

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommendedTypeChecked,
  {
    rules: {
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-floating-promises": "error",
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  },
);

ProfessNet standard: no-floating-promises is an error for us — every Promise must be await-ed or deliberately marked void. This eliminates a whole class of silent async failures.

React / Next.js rules#

We additionally install a plugin for hooks and Next.js:

import reactHooks from "eslint-plugin-react-hooks";

export default ts.config({
  plugins: { "react-hooks": reactHooks },
  rules: {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
});

Why Prettier and ESLint together, not separately#

ESLint used to format style too, which led to conflicts with Prettier. Today we separate responsibilities — ESLint does not handle formatting.

Tool	Responsible for	Example
Prettier	code appearance	indentation, quotes, line breaks
ESLint	correctness	unused variables, any, floating promises

Scripts and CI#

{
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --max-warnings=0",
    "typecheck": "tsc --noEmit"
  }
}

npm run format && npm run lint && npm run typecheck

Tip: --max-warnings=0 in CI means that even warnings block the merge. This way warnings don't accumulate for years.

---

Prettier formats, ESLint guards quality, both run on save and in CI. Review then focuses on logic and architecture, not on semicolons.