Configure ESLint

ESLint is an open source JavaScript linting tool that is used to find problematic patterns in JavaScript code. Ontario.ca Frontend provides an integrated ESLint experience out of the box. Each time you create a new Ontario.ca Frontend project, you will see a prompt like this:

Add and configure ESLint for finding and fixing code problems?Yes❯ No

When you select "Yes," Ontario.ca Frontend will automatically install eslint and @ongov/eslint-config-ontario-frontend as dependencies in your project and create an .eslintrc.js file in the root of your project that includes the default configuration for Ontario.ca Frontend projects.

You can run npm run lint every time you want to run ESLint to catch errors.

Add ESLint to an existing project

If you did not choose to install ESLint during the project creation process, you can add it using the ontario-add-package CLI command.

From your terminal, run the ontario-add-package command from your project's root directory:

npx @ongov/ontario-frontend-cli ontario-add-package

Then select @ongov/eslint-config-ontario-frontend from the list of packages:

? Select packages to add: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)❯◉ @ongov/eslint-config-ontario-frontend ◯ @ongov/prettier-config-ontario-frontend

This will install all related packages and configuration files.

Finally, add eslint --ext .js as a script to package.json:

{  "scripts": {    "lint": "eslint --ext .js"  }}

You can now run npm run lint from your terminal to lint the JavaScript files in your project.

Remove ESLint from an existing project

If you wish to remove ESLint from your project, you can do so using the ontario-remove-package CLI command.

From your terminal, run the ontario-remove-package command from your project's root directory:

npx @ongov/ontario-frontend-cli ontario-remove-package

Then select @ongov/eslint-config-ontario-frontend from the list of packages:

? Select packages to remove: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)❯◉ @ongov/eslint-config-ontario-frontend ◯ @ongov/prettier-config-ontario-frontend

This will uninstall all related packages and configuration files.

Customize ESLint

The default configuration (@ongov/eslint-config-ontario-frontend) includes everything you need to have an optimal out-of-the-box linting experience with Ontario.ca Frontend. However, there may be times where you want to modify or disable any default rules. You can directly change them using the rules property in .eslintrc.js:

{  "extends": "@ongov/eslint-config-ontario-frontend",  "rules": {    "no-unused-vars": "warn",    "semi": ["error", "never"]  }}