Skip to main content

Configure ESLint

ESLint is an open source JavaScript linting tool that is used to find problematic patterns in JavaScript code. Frontend provides an integrated ESLint experience out of the box. Each time you create a new 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," 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 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 setup process, you can still add it to your project.

From your terminal, install the necessary ESLint dependencies:

# First install the necessary ESLint dependenciesnpm install --save-dev eslint @ongov/eslint-config-ontario-frontend

Once the packages have been installed, create a new file at the root of your project named .eslintrc.js:

# Create a config file for ESLinttouch .eslintrc.js

Then add the following content to .eslintrc.js to extend the @ongov/eslint-config-ontario-frontend configuration:

{  "extends": "@ongov/eslint-config-ontario-frontend"}

This tells ESLint to use the @ongov/eslint-config-ontario-frontend rules for your project.

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.

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 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"]  }}