@agrovista/eslint-config

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

Setup

1) Install this package (and peer dependencies)

npm install -D @agrovista/eslint-config

The peerDependencies in this repository's package.json should be automatically installed if your npm version is up to date. If you are not using NPM, consult your package manager's documentation or install into your repository as devDependencies:

npm install -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:

npx eslint . --ext .ts
npx eslint 'resources/js/**/*.{ts,tsx}'
# etc

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

Examples of package.json lint scripts are 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'"
    // or
    "lint": "eslint . --ext .ts",
  },
}

These package.json scripts can be ran with:

npm run lint

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": "explicit"
  },
  "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"
}