ESLint and Prettier - spryker-projects/cypress-boilerplate GitHub Wiki

Overview

This page explains the integration of ESLint and Prettier in the Cypress-Boilerplate project. ESLint and Prettier are tools that help maintain code quality and consistency by enforcing coding standards and formatting rules.

What are ESLint and Prettier?

ESLint

ESLint is a static code analysis tool that identifies and fixes problems in code. It enforces coding standards and helps catch syntax errors, potential bugs, and other problematic patterns.

Prettier

Prettier is an opinionated code formatter that ensures consistent code style by automatically formatting your code. It supports multiple languages and integrates well with various editors and tools.

Integration and Configuration

ESLint

Installation

ESLint is already integrated into the Cypress-Boilerplate project. If you need to integrate it into your project, you can install it using npm:

npm install eslint --save-dev

Configuration

ESLint is configured using a .eslintrc file. Here’s the actual configuration from the Cypress-Boilerplate project:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:cypress/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    "@typescript-eslint/no-inferrable-types": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

  • root: Indicates that this is the root configuration file.

  • parser: Specifies the parser to be used, in this case, @typescript-eslint/parser for TypeScript.

  • plugins: Specifies the ESLint plugins to be used.

  • extends: Extends the configuration from recommended sets of rules from ESLint and plugins.

    • eslint:recommended: Recommended rules from ESLint.
    • plugin:@typescript-eslint/eslint-recommended: Disables a few of the recommended ESLint rules that are already covered by TypeScript.
    • plugin:@typescript-eslint/recommended: Recommended rules from @typescript-eslint.
    • plugin:cypress/recommended: Recommended rules from the Cypress plugin.
    • plugin:prettier/recommended: Integrates Prettier with ESLint.

  • parserOptions: Specifies the parser options.

    • ecmaVersion: Specifies the ECMAScript version to lint.
    • sourceType: Specifies the source type as module.
    • project: Specifies the path to the TypeScript configuration file.

  • rules: Specifies custom rules.

    • @typescript-eslint/no-inferrable-types: Disallows explicit type declarations for variables or parameters initialized to a number, string, or boolean.
    • @typescript-eslint/explicit-function-return-type: Disables the rule that requires explicit return types on functions and class methods.
    • @typescript-eslint/no-explicit-any: Disables the rule that disallows usage of the any type.

Additionally, a .eslintignore file can be used to exclude files and directories from being analyzed by ESlint. Here’s an example:

node_modules

Running ESLint

You can run ESLint using the following command:

eslint .

This will check your code for linting errors and display them in the terminal.

Automatically Fixing ESLint Errors

Many ESLint errors can be automatically fixed by running the following command:

eslint . --fix

Prettier

Installation

Prettier is also integrated into the Cypress-Boilerplate project. If you need to integrate it into your project, you can install it using npm:

npm install prettier --save-dev

Configuration

Prettier is configured using a .prettierrc.json file. Here’s the actual configuration from the Cypress-Boilerplate project:

{
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}
  • semi: Controls the use of semicolons.
    • false: No semicolons except in a few scenarios.
  • tabWidth: Sets the number of spaces per indentation level.
    • 2: Two spaces per indentation level.
  • useTabs: Controls whether to use tabs for indentation.
    • false: Use spaces instead of tabs.
  • singleQuote: Controls the use of single quotes.
    • true: Use single quotes instead of double quotes.
  • trailingComma: Controls the printing of trailing commas.
    • es5: Print trailing commas wherever possible in ES5 (objects, arrays, etc.).
  • bracketSpacing: Controls the printing of spaces inside object literals.
    • true: Print spaces between brackets in object literals.
  • arrowParens: Controls the use of parentheses in arrow functions.
    • always: Always include parentheses.
  • endOfLine: Controls the end of line character.
    • auto: Maintain existing line endings.

Additionally, a .prettierignore file can be used to exclude files and directories from being formatted by Prettier. Here’s an example:

node_modules

Running Prettier

You can check your code style using the following command:

prettier . --check

This will check your code for code style errors and display them in the terminal.

Automatically Fixing Prettier Errors

Many Prettier errors can be automatically fixed by running the following command:

prettier . --write

This will format your code according to the rules defined in the .prettierrc.json file.

Reference Links