ESLint

ESLint

Presentation : ESLint is a statuc code analysis tool for JS and TS.

Key benefits for this project are

• dev experience: early error catching before compilation
• code quality: more exhaustive than syntax checks. Can also point to runtime errors. Shared across the team.
• type safety: ensure along tsconfig that unsafe types are not too widely used.

Installation and configuration

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Configuration

Note

ESLint should not check format (risk of conflict with Prettier).

We can base our config on

{
  "extends": ["plugin:prettier/recommended"]
}

Important

Currently no shared configuration. We could try to have a root configuration .eslintrc.js extended within each service.

module.exports = {
  extends: '../../.eslintrc.js', // root file
...
}

Rules to consider

• '@typescript-eslint/no-explicit-any': 'warn' Using any defeats the purpose of using TypeScript : compiler won't stop us from accessing properties that don't exist, potentially causing crashes.

• 'no-console': 'warn' In production, log statements clutter server logs and can leak sensitive info. We should use Fastify's logger which handles log levels (eg debug for temporary logs)

• @typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }] We can acknowledge that a var needed by function prototype is not used by prefixing it with _

• eqeqeq Strict equality checks. We should use === over == to prevent natural JS type coercion (eg 0 == '0')

• @typescript-eslint/no-floating-promises We ensure that async functions are called with await. Otherwise, it could create race conditions.

• @typescript-eslint/await-thenable Ensure that we only await Promises.

Readability

• @typescript-eslint/naming-convention Enforce consistent naming. For instance
  • classes in PascalCase
  • boolean variables prefixed with is or has ..

cf doc

• no-shadow Ensure that two variables in embedded scopes don't share the same name

• @typescript-eslint/consistent-type-imports Performance as it helps Vite optimize bundling.

Use cases

Run linter manually

Add a script in package.json and possibly a Makefile target

"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix"

then npm run lint

Run linter before each commit

cf Husky

Run linter in VSCode

• ESLint extension
• update settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Do's & Don'ts

✅ Do	❌ Don't
Run ESlint before pushing	Push code with linting errors (may cause a fail CI check)
Configure ESLint to work alongside Prettier	Use ESLint for stylistic formatting (indentation, max-len) as we use Prettier.

Resources

Type	Ressource	Notes
📄	Official doc	-
📄	TS ESLint	-

Legend: 📄 Doc, 📘 Book, 🎥 Video, 💻 GitHub, 📦 Package, 💡 Blog