@agrovista/eslint-config v1.28.0

@agrovista/eslint-config

An Agrovista ESLint plugin which provides lint rules for TypeScript codebases.

Setup

1) Install this package (and peer dependencies)

yarn add -D @agrovista/eslint-config --install-peers

If the peerDependencies in this repository's package.json are not installed by the above command for some reason, manually install the peerDependencies as devDependencies in your repository, for example:

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

2) Configure ESLint

Within your ESLint config file:

Note: Simply extending '@agrovista' is supported, however, it is much clearer to be explicit with a scoped eslint-config.

extends: [
+  "@agrovista/eslint-config"
]

For React codebases instead extend:

extends: [
+  "@agrovista/eslint-config/react"
]

3) Configure the ESLint TypeScript parser

This config requires knowledge of your TypeScript config.

In your ESLint config, set parserOptions.project to the path of your tsconfig.json.

For example:

{
  extends: [
    "@agrovista/eslint-config"
  ],
+ parserOptions: {
+   project: "./tsconfig.json"
+ }
}

4) Run ESLint

Open a terminal to the root of your project, and run the following command, changing the path to your code location, for example:

yarn eslint 'resources/js/**/*.{ts,tsx}'

ESLint will lint all found files, and output results to your terminal.

An example of a package.json lint script is below, which can then be ran inside a CI pipeline against pull-requests:

{
  "scripts": {
    "lint": "tsc --noEmit && eslint 'resources/js/**/*.{ts,tsx}' && eslint 'tests/cypress/**/*.cy.ts'"
  },
}

5) Lint within your editor

You can also get results in realtime inside most IDEs via a plugin, in addition to automatically fixing fixable issues on-save.

For vscode, it's recommended to use: dbaeumer.vscode-eslint in combination with the below settings, which can be placed within a repository .vscode/settings.json file, for all maintainers to use.

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

FAQ

I get this error when running ESLint: "The file must be included in at least one of the projects provided"

If the file should not be linted:

A file can be excluded from linting by either method:

• Via the eslintrc.json -> "ignorePatterns" array
• By adding the file location to a root .eslintignore file

If the file should be linted:

This means you are attempting to lint a file that tsconfig.json doesn't include.

The simplest solution is to include it in the "include" array.

A slightly more complex common fix is to create a tsconfig.eslint.json file, which extends your tsconfig.json file and includes all files you are linting.

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]
}

Update your ESLint config file:

parserOptions: {
-  project: "./tsconfig.json"
+  project: "./tsconfig.eslint.json"
}