This is my personal ESLint config. I try to avoid rules which are purely stylistic and based on personal opinions. I'm tryin to keep it non-intrusive and aimed towards catching actual errors.

The config includes these plugins by default:

• @typescript-eslint/eslint-plugin
• eslint-comments
• import
• jest
• prettier
• react
• react-hooks
• react-native

The config uses the overrides feature of ESLint to automatically adjust the config based on the filename. For example, typescript support is enabled for .ts and .tsx files, the jest environment is set for test files and more.

Prettier is used for formatting.

First, install the required packages:

yarn add --dev prettier eslint eslint-config-satya164

If you're using TypeScript, also install the TypeScript compiler:

yarn add --dev typescript

Now extend the config in .eslintrc.json:

{
  "extends": "satya164"
}

To lint your files, you can add the following script to your package.json:

"scripts": {
  "lint": "eslint \"**/*.{js,ts,tsx}\""
}

To show lint errors in your editor, you'll need to configure your editor. To configure VSCode, add the following in settings.json:

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

On Mac OS, you can open settings.json file from Code > Preferences > Settings or via the keyboard shortcut ⌘,.

This config sets autoFix to true to automatically fix lint errors on save. You can set it to false if you don't want this behaviour.

Happy linting 🎉