eslint-config-frontend

Shareable ESLint config for frontend codebases

Using this config

Install the config in your repo:

npm add -D eslint @lokalise/eslint-config-frontend

Then add the following to .eslintrc.json in the root of your project:

{
  "extends": "@lokalise/eslint-config-frontend"
}

Finally, add a package script in your package.json as follows:

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.jsx,.tsx,.cjs"
  }
}

Feel free to customize the --ext CLI arg according to your project needs.

Note that this shareable config needs to know where your tsconfig is located in order to be able to parse TypeScript code. By default it will assume that your tsconfig is in the same directory as your eslint config. If that's the case, it'll work without any additional configuration. However if that is not the case, you will need to explicitly tell it where the tsconfig in your repo is. For example:

{
  "extends": "@lokalise/eslint-config-frontend",
  "parserOptions": {
    "project": "../tsconfig.json"
  }
}

Modular Configuration

The default config assumes that you have a stack including:

• TypeScript
• React
• Vitest

However you can pick and choose just the parts you like.

The following modular configs are available:

• @lokalise/eslint-config-frontend/core
• @lokalise/eslint-config-frontend/typescript
• @lokalise/eslint-config-frontend/react
• @lokalise/eslint-config-frontend/vitest
• @lokalise/eslint-config-frontend/localisation
• @lokalise/eslint-config-frontend/testingLibrary

We recommend you always pick core, but suppose the only other one you need is typescript, then you would add the following to your eslint config:

{
  "extends": [
    "@lokalise/eslint-config-frontend/core",
    "@lokalise/eslint-config-frontend/typescript"
  ]
}

Support Us

lokalise-npm-package-template was created by Lokalise Engineering Team. Support our work by keeping this line in your README.