[Internal] Cypress Developer ESLint Plugin

Common ESLint rules shared by Cypress packages.

⚠️ This package for internal development of Cypress. Here's the Official Cypress ESLint Plugin meant for users of Cypress.

Installation

npm install --save-dev @cypress/eslint-plugin-dev

Usage

⚠️ Currently does not support ESLint version 9

For Eslint 8, use version 6.x.x

For Eslint 7 and below, use version 5.x.x

1. install the following devDependencies:

@cypress/eslint-plugin-dev
eslint-plugin-json-format
@typescript-eslint/parser
@typescript-eslint/eslint-plugin
eslint-plugin-mocha
eslint-plugin-import

# if you have react/jsx files
eslint-plugin-react
@babel/eslint-parser

2. add the following to your root level .eslintrc.json:

{
  "plugins": [
    "@cypress/dev"
  ],
  "extends": [
    "plugin:@cypress/dev/general"
  ]
}

Note: also add "plugin:@cypress/dev/react", if you are using React

Note: if you have a test/ directory, you should create a .eslintrc.json file inside of it, and add:

{
  "extends": [
    "plugin:@cypress/dev/tests"
  ]
}

3. add the following to your .eslintignore:

# don't ignore hidden files, useful for formatting json config files
!.*

4. (optional) Install and configure your text editor's ESLint Plugin Extension to lint and auto-fix files using ESLint, detailed below

5. (optional) Install husky and enable the lint pre-commit hook:

package.json:

  "husky": {
    "hooks": {
      "pre-commit": "lint-pre-commit"
    }
  },

Note: the lint-pre-commit hook will automatically lint your staged files, and only --fix and git add them if there are no unstaged changes existing in that file (this protects partially staged files from being added in the hook).
To auto-fix all staged & unstaged files, run ./node_modules/.bin/lint-changed --fix

Presets

general

Should usually be used at the root of the package.

• The majority of the rules.
• auto-fixes json files and sorts your package.json via eslint-plugin-json-format

requires you to install the following devDependencies:

eslint-plugin-import
eslint-plugin-json-format
@typescript-eslint/parser
@typescript-eslint/eslint-plugin

tests

Test-specific configuration and rules. Should be used within the test/ directory.

requires you to install the following devDependencies:

eslint-plugin-mocha

react

React and JSX-specific configuration and rules.

requires you to install the following devDependencies:

@babel/eslint-parser
eslint-plugin-react

Configuration Examples

Change some linting rules:

// .eslintrc.json
{
  "extends": [
    "plugin:@cypress/dev/general"
  ],
  "rules": {
    "comma-dangle": "off",
    "no-debugger": "warn"
  }
}

Stop your package.json from being formatted:

{
  "settings": {
    "json/sort-package-json": false
  }
}

Custom Rules:

Editors

VSCode

Use plugin ESLint by Dirk Baeumer to lint and auto fix JS files using ESLint.
After installing, add the following to your User or Workspace (.vscode/settings.json) settings:

{
  "eslint.validate": [
    { 
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    },
    {
      "language": "json",
      "autoFix": true
    }
  ],
}

Atom

Install package linter-eslint (and its dependencies) to enable linting. Go into the settings for this package and enable "Fix on save" option to auto-fix white space issues and other things.

Sublime Text

Install ESLint-Formatter, then set the following settings:

{
  "format_on_save": true,
  "debug": true
}

License

This project is licensed under the terms of the MIT license.

Changelog

Changelog