Code Editor

In app projects, linting and formatting are reliability tools, not style accessories.

Goal

You want to achieve three outcomes:

1. Catch errors early.
2. Keep team conventions consistent.
3. Reserve reviews for architecture and behavior.

1. Install tools

2. Configure ESLint

Create eslint.config.js:

Copyconst js = require('@eslint/js')
 
module.exports = [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'commonjs',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'off',
      eqeqeq: ['error', 'always'],
    },
  },
]

Why eqeqeq matters: implicit coercion often causes event flow bugs.

3. Add Prettier

Create .prettierrc.json:

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

4. Add scripts in package.json

Copy{
  "scripts": {
    "lint": "eslint src",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

5. Daily workflow

Use this sequence consistently:

1. run npm run lint before commit.
2. run npm run format for file consistency.
3. run npm run lint again before push.

This lowers integration noise across branches.

6. Rule focus for app projects

Extend rules intentionally:

1. warnings for unused values,
2. strict equality checks,
3. no silent promise failures,
4. no uncontrolled global state.

Add plugins gradually as your codebase grows.

7. Editor integration

For VS Code, these settings are useful:

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

8. Add a pre commit guard

Optional but recommended:

Then configure .husky/pre-commit:

This prevents broken quality checks from entering the repository.