Comprehensive Guide to EditorConfig, Prettier, ESLint, and TypeScript with Airbnb and Hooks Configuration

We all know the importance of code style guidelines and that tools are needed to enforce them. This guide introduces three essential tools—EditorConfig, Prettier, and ESLint—explains their roles, and shows how to integrate them with TypeScript, the Airbnb style guide, and React Hooks.

EditorConfig maintains consistent editor settings across different editors. Install the plugin for your editor (e.g., search "EditorConfig for VS Code" in VSCode) and add a .editorconfig file at the project root:

root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

Prettier enforces a uniform project‑wide formatting style. Install it globally and configure VSCode to format on save:

npm install -g prettier

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

If a .prettierrc file exists, its settings override the defaults. Example commands to create the file and format the code:

touch .prettierrc
npm install --save-dev prettier
prettier --write "**/*.js"

ESLint performs static analysis to catch code that does not follow the defined rules. Install it (locally or globally) and initialize the configuration:

npm i --save-dev eslint
npm i -g eslint
eslint --init

VSCode settings to run ESLint on save:

{
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

Add an npm script to lint the whole project:

{
  "eslint": "eslint --fix ./"
}

Combining TypeScript, ESLint, Prettier, Airbnb, and React Hooks

Install the required packages:

npm install --save-dev prettier
npm install --save-dev eslint
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install --save-dev eslint-config-airbnb-typescript
npm install --save-dev eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import
npm install --save-dev husky lint-staged

Create an .eslintrc configuration that extends the recommended TypeScript rules, Airbnb, and Prettier, and adds React‑Hooks rules:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "airbnb-typescript",
    "prettier"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "import/prefer-default-export": "off",
    "import/no-extraneous-dependencies": "off"
  }
}

Configure a pre‑commit hook with Husky and lint‑staged to run ESLint and Prettier only on staged files:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,ts,tsx}": [
      "eslint --fix --ext .ts,.tsx,.js",
      "prettier --write",
      "git add"
    ]
  }
}

Note that Prettier runs in the second stage of lint‑staged, so you do not need to enable the Prettier‑ESLint integration. You can skip the checks with git commit --no-verify if necessary.

Finally, the article provides reference links to the official documentation of EditorConfig, Prettier, ESLint, TypeScript‑ESLint, Airbnb JavaScript style guide, React Hooks rules, and other useful resources.