DEV Community

buildlogmmd
buildlogmmd

Posted on

Configure ESLint and Prettier

Commit

chore: configure ESLint and Prettier
Enter fullscreen mode Exit fullscreen mode

Commands

npm install --save-dev eslint prettier \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Update your package.json to enable ECMAScript modules:

{
  "type": "module",
  ...
}
Enter fullscreen mode Exit fullscreen mode

Create ESLint config (ESLint v9+ compatible)

πŸ“„ eslint.config.js

import eslintPluginTs from "@typescript-eslint/eslint-plugin";
import parserTs from "@typescript-eslint/parser";
import prettier from "eslint-config-prettier";

export default [
  {
    files: ["**/*.ts"],
    languageOptions: {
      parser: parserTs
    },
    plugins: {
      "@typescript-eslint": eslintPluginTs
    },
    rules: {
      ...eslintPluginTs.configs.recommended.rules,
      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }]
    },
    ignores: ["dist/**", "node_modules/**"]
  },
  prettier
];
Enter fullscreen mode Exit fullscreen mode

Create Prettier config

πŸ“„ .prettierrc

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "es5"
}
Enter fullscreen mode Exit fullscreen mode

Update package.json scripts

"scripts": {
  "lint": "eslint 'src/**/*.ts'",
  "format": "prettier --write 'src/**/*.ts'"
}
Enter fullscreen mode Exit fullscreen mode

Verification

  1. Run ESLint
npm run lint
Enter fullscreen mode Exit fullscreen mode
  1. Run Prettier
npm run format
Enter fullscreen mode Exit fullscreen mode
  1. Optional: enable auto-formatting in VS Code πŸ“„ .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["typescript"]
}
Enter fullscreen mode Exit fullscreen mode

βœ… ESLint and Prettier are now integrated and ready to keep your code clean and consistent.

Next step:

chore: setup Express and add /health route

Top comments (0)