Set up Linter and Prettier for your Cypress project (Flat config)

#0 What we will need:

1. Eslint config that lets us know if JS rules are violated (like no-unused-vars) or if any developer on the team forgets to delete console.log
2. Cypress Eslint Plugin to warn us about Cypress specific rules like no-unnecessary-waiting or any other rule from the official list
3. Prettier to format our code so there’s singleQuote everywhere and no trailingComma
4. add script to format code later in the CI/CD run
5. add settings.json based on Prettier and Eslint to Vscode preferences and share it with the team
6. verify configuration is working

#1 Eslint Flat Config

This is a new cypress project* , so we will be using ESM modules and Eslint Flat config.

> in the root of the project run:
npm init @eslint/config@latest

you will be asked to give yes/no (Y/N)

? How would you like to use ESLint?
❯ To check syntax and find problems
What type of modules does your project use? …
❯ JavaScript modules (import/export)
? Which framework does your project use? …
React
Vue.js
❯ None of these
? Does your project use TypeScript? …
❯ No
Yes
? Where does your code run? 
✔ Browser

> once questions answered, Eslint will install the needed libs and you gonna see them in package.json, also it will automatically create eslint.config.js with such contents:

import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
];

This config already includes recommended rules for JS. But we are also using Cypress, so we would need to extend this config a bit further.

#2 Cypress plugin:

> in the root of the project run:
npm install eslint-plugin-cypress --save-dev

After installation we need to modify eslint.config.js by adding pluginCypress:

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginCypress from 'eslint-plugin-cypress/flat'

export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  pluginCypress.configs.recommended,
];

Recommended linting rules are already included in pluginCypress.configs.recommended so you don’t need to specify them one by one.

Now, we want our code to be not only highlighted in case of problems, but automatically formatted. Let’s install Prettier and Prettier plugin and configure Vscode for automatic format.

#3 Prettier for Formatting

> install prettier:
npm install --save-dev --save-exact prettier

> create .prettierrc in the root of the project:
touch .prettierrc

> add formatting rules into .prettierrc:

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "none"
}

> Eslint also has formatting rules so that could end up in conflicts with Prettier’s rules. To turn off all rules that are unnecessary or might conflict we are adding Prettier plugin for Eslint flat config:

npm install --save-dev eslint-config-prettier

> update eslint.config.js with eslintConfigPrettier:

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginCypress from 'eslint-plugin-cypress/flat'
import eslintConfigPrettier from 'eslint-config-prettier'

export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  pluginCypress.configs.recommended,
  eslintConfigPrettier,
];

#4 Add script for auto-formatting

> add script into package.json to format your files by running one command:

{
  "scripts": {
    "prettier-format": "prettier --config .prettierrc '**/*.js' --write"
  },
  ...
}

'**/*.js' - includes all files ending with .js including cy.js for cypress files.

> now we are able to format all our files just by running:
npm run prettier-format and can use it later in setting CI/CD workflows

this is how it looks for me:

It would be nice to not run npm run prettier-format every time, but to have your files formatted every time you save the file. For this we will need to add prettier configuration into vscode settings and add formatOnSave rule.

#5 Update Vscode Settings

> find settings.json in Vscode (command + P) or this way:

VS Code provides two different scopes for settings:
User Settings — Settings that apply globally to any instance of VS Code you open (colorTheme)
Workspace Settings — Settings stored inside your workspace and only apply when the workspace is opened

> add these in addition to your existing settings:

{
  "editor.formatOnSave": true,
  "eslint.useFlatConfig": true,
  "eslint.validate": ["javascript", "javascriptreact"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": ".prettierrc"
  "editor.formatOnPaste": false,
  "prettier.useEditorConfig": false,
}

Now, each developer on the team can have their own settings and a good practice is to share the shared ones :). Here is the perfect article about it -> https://dev.to/receter/sharing-recommended-vscode-settings-in-your-project-repository-2l74

#6 Do my settings work?

> open your cy.js test and paste (keep indentation):

describe('Verify configuration', () => {

  it('checks linter rules are applied', () => {
                let i
                cy.wait(400)
    console.log(Cypress.env())


  })
})

> save file. Upon save you should see:
- file has been formatted correctly by Prettier according to .prettierc (and onSave settings in Vscode)
- linter highlighted violation of our rules we added in eslint.config.js

Verification that all we did works!

Thanks for reading and giving it a like ;)

nb1
A New cypress project meaning:
- a project with node version higher than 16 (v22.4.1),
- "type":"module" in its package.json

This means that you wont be able to use require and module.exports (Common JS) in your files, but import and export(ESM modules)

nb2
If you want to be warned about using console.log — you can remove globals from file. So, to the final look of esling.config.js:

import pluginJs from '@eslint/js'
import pluginCypress from 'eslint-plugin-cypress/flat'
import eslintConfigPrettier from 'eslint-config-prettier'

export default [
  pluginJs.configs.recommended,
  pluginCypress.configs.recommended,
  eslintConfigPrettier,
  {
    rules: {
      'prefer-const': 'error',
      'no-console': 'warn',
      'cypress/no-unnecessary-waiting': 'error'
    }
  }
]