ESLint with VSCode, Prettier, Husky and React Typescript

If you’re a developer working with JavaScript, especially in the context of a React app using TypeScript, you know how important it is to maintain clean and consistent code. One tool that can help with this is ESLint, a popular linting tool that helps identify and fix coding errors and style issues.

One way to use ESLint is by integrating it with your code editor, such as Visual Studio Code (VSCode). This allows you to see linting errors and warnings directly in your editor, making it easy to fix issues as you work. In this post, we’ll show you how to set up ESLint with VSCode, and we’ll also introduce some additional tools that can help improve your workflow even further.

To get started, you’ll need to install the following packages:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier husky

This installs the necessary packages for linting TypeScript code in a React app, using the Airbnb style guide and the Prettier code formatter.

Next, create an .eslintrc configuration file at the root of your project. This file should contain the following:

{
  "parser": "@typescript-eslint/parser",
  "extends": ["airbnb", "prettier"],
  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
  }
}

This configuration tells ESLint to use the TypeScript parser and to extend the Airbnb style guide, as well as the Prettier configuration. It also specifies some additional rules for linting React code.

Now, open up your VSCode settings and add the following lines:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "typescript", "autoFix": true },
  { "language": "typescriptreact", "autoFix": true }
]

This tells VSCode to automatically fix any fixable ESLint issues every time you save a file.

Finally, add the following configuration to your package.json file to set up a Husky pre-commit hook that runs ESLint:

"husky": {
  "hooks": {
    "pre-commit": "eslint --fix"
  }
}

With these steps, you should now be able to use ESLint with VSCode, following the Airbnb style guide and using Prettier for code formatting. The Husky pre-commit hook will ensure that your code is always linted before it’s committed to your Git repository, helping you maintain clean and consistent code.