[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.

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

1. install the following devDependencies:

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

# if you have coffeescript files
@fellow/eslint-plugin-coffee
babel-eslint

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

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

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-json-format
@typescript-eslint/parser
@typescript-eslint/eslint-plugin

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

requires you to install the following devDependencies:

eslint-plugin-mocha

React and JSX-specific configuration and rules.

requires you to install the following devDependencies:

babel-eslint
eslint-plugin-react

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

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
    },
    {
      "language": "coffeescript",
      "autoFix": false
    },
  ],
}

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.

Install ESLint-Formatter, then set the following settings:

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

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

Changelog