[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

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

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

name	description	options	example
@cypress/dev/arrow-body-multiline-braces	Enforces braces in arrow functions ONLY IN multiline function definitions	[`[always	never] always set this to 'always'`]
@cypress/dev/skip-comment	Enforces a comment (// NOTE:) explaining a .skip added to it, describe, or context test blocks	{ commentTokens: [array] tokens that indicate .skip explanation (default: ['NOTE:', 'TODO:', 'FIXME:'])}	'@cypress/dev/skip-comment': ['error', { commentTokens: ['TODO:'] }]
@cypress/dev/no-return-before	Disallows return statements before certain configurable tokens	{ tokens: [array] tokens that cannot be preceded by 'return' (default: ['it', 'describe', 'context', 'expect'])}	'@cypress/dev/no-return-before': ['error', { tokens: ['myfn'] }]

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

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.