vaadin/eslint-config-vaadin

ESLint shareable config for the Vaadin JavaScript coding style

eslint-config-vaadin

ESLint shareable config for the Vaadin JavaScript style guide

Installation

npm install --save-dev eslint-config-vaadin

or

yarn add --dev eslint-config-vaadin

Usage

After you have installed eslint-config-vaadin, you should be able to extend the following configs in the extends section of your ESLint configuration.

Available Configs

vaadin/javascript

A config that contains the JavaScript linting rules.

This config requires vaadin/prettier which must be added after any other configs.

{
  "extends": [
    "vaadin/javascript",
    // ... other project configs
    "vaadin/prettier"
  ]
}

vaadin/typescript

A config that extends vaadin/javascript with the TypeScript linting rules.

This config requires vaadin/prettier which must be added after any other configs.

{
  "extends": [
    "vaadin/typescript",
    // ... other project configs
    "vaadin/prettier"
  ]
}

vaadin/typescript-requiring-type-checking

A config that extends vaadin/typescript with the TypeScript linting rules that require type information.

Please note that adding this config to your project can significantly affect linting performance since it requires TypeScript to build the whole project before ESLint can do its linting.

This config requires tsconfig.json at the project root with the include section that includes all the files that are referenced in your project. If your tsconfig.json is located somewhere other than the project root, you can use the parserOptions.project property.

This config requires vaadin/prettier which must be added after any other configs.

{
  "parserOptions": {
    "project": "path/to/your/tsconfig.json"
  },
  "extends": [
    "vaadin/typescript-requiring-type-checking",
    // ... other project configs
    "vaadin/prettier"
  ]
}

vaadin/lit

A config that contains the linting rules for tagged Lit templates.

This config is designed on top of the eslint-plugin-lit plugin.

This config is supposed to be used in combination with vaadin/javascript or vaadin/typescript.

{
  "extends": [
    "vaadin/lit"
  ]
}

vaadin/imports

A config that contains the linting rules for imports.

This config is designed on top of the eslint-plugin-import plugin. Please note that adding this config to your project can significantly affect linting performance.

This config is supposed to be used in combination with vaadin/javascript or vaadin/typescript.

{
  "extends": [
    "vaadin/imports"
  ]
}

vaadin/testing

A config that overrides some linting rules and sets up the eslint-plugin-chai-friendly plugin for test files.

This config is supposed to be used in combination with vaadin/javascript or vaadin/typescript.

{
  "extends": [
    "vaadin/testing"
  ]
}

vaadin/sort

A config that enables alphabetical sorting for objects, enums, JSX props, and exports. It serves as a substitute for the ESLint sort-keys rule, which lacks an auto-fixer. Please be aware that the ESLint team has a significant reason for not implementing an auto-fixer for this rule (see here). Use the config with caution.

{
  "extends": [
    "vaadin/sort"
  ]
}

Examples

Lit + JavaScript

{
  "extends": [
    "vaadin/javascript",
    "vaadin/lit",
    "vaadin/testing",
    "vaadin/prettier"
  ]
}

Lit + TypeScript

{
  "extends": [
    "vaadin/typescript",
    "vaadin/lit",
    "vaadin/testing",
    "vaadin/prettier"
  ]
}

Or, you can use a more strict config that requires type information:

{
  "extends": [
    "vaadin/typescript-requiring-type-checking",
    "vaadin/lit",
    "vaadin/testing",
    "vaadin/prettier"
  ]
}

License

Apache License 2.0

eslint-config-vaadin's Issues

Conflicting rules for getters and setters pairs ordering

Description

After #29 we now have conflicting rules for getters and setters:

• @typescript-eslint/member-ordering requires all the getters to be placed before all the setters in the same class,
• @typescript-eslint/adjacent-overload-signatures and grouped-accessor-pairs require them to be grouped.

Steps to reproduce

1. Clone the project https://github.com/web-padawan/test-eslint-config-vaadin
2. Run npm install & npm run lint

Input

test-1.js

export class FooBar {
  get foo() {
    return this.__foo;
  }

  set foo(foo) {
    this.__foo = foo;
  }

  get bar() {
    return this.__bar;
  }

  set bar(bar) {
    this.__bar = bar;
  }
}

test-2.js

export class FooBar {
  get foo() {
    return this.__foo;
  }

  get bar() {
    return this.__bar;
  }

  set foo(foo) {
    this.__foo = foo;
  }

  set bar(bar) {
    this.__bar = bar;
  }
}

Output

/Users/serhii/cf/test-eslint/test-1.js
  10:3  error  Member bar should be declared before all public instance set definitions  @typescript-eslint/member-ordering

/Users/serhii/cf/test-eslint/test-2.js
  10:3  error  All foo signatures should be adjacent                          @typescript-eslint/adjacent-overload-signatures
  10:3  error  Accessor pair getter 'foo' and setter 'foo' should be grouped  grouped-accessor-pairs
  14:3  error  All bar signatures should be adjacent                          @typescript-eslint/adjacent-overload-signatures
  14:3  error  Accessor pair getter 'bar' and setter 'bar' should be grouped  grouped-accessor-pairs

Update rule "lit/quoted-expressions"

Since eslint-plugin-lit 1.5.0 there are few changes in the default rules.

Notably lit/quoted-expressions defaults to 'error' which means that expressions in Lit templates need to be unquoted. Consider overriding this rule to "lit/quoted-expressions": ["error", "always"] so that the expressions need to be quoted which is the style we also try to follow in Vaadin Docs because that works better for syntax highlighters (that show code snippets in the browser).

See this internal Slack thread: https://vaadin.slack.com/archives/C0168FAKA8H/p1617025824119800

On a related note, the vaadin/flow CI build (which uses eslint-config-vaadin) started to fail because of this rule after eslint-plugin-lit released version 1.5.0. Maybe also consider pinning the minor version of that dependency?

Add new preset for React to be used with React Vaadin components

Description

1. Create a new preset vaadin/react to be used by our React / Hilla projects,
2. Update React Vaadin components to use the config with the new preset.

ESLint 8+ is available

Currently the package uses ESLint peer dependency ^7.0.0. However, now the latest version is 8, so it requires an update. Also, @typescript-eslint/parser and @typescript-eslint/eslint-plugin have two major versions since the current configuration.

Dogfooding the new ESLint config in our repos with JS and TypeScript

Description

Let's adopt the new ESLint config in the following projects:

Top priorities

• https://github.com/vaadin/web-components
• https://github.com/vaadin/docs (latest branch)

Other projects

• https://github.com/vaadin/docs (hilla branch)
• https://github.com/vaadin/start (private repo)
• https://github.com/vaadin/hilla
• https://github.com/vaadin/flow-components

Add options to enable ESLint config to Vaadin Start, `@vaadin/cli` and `@hilla/cli`

Description

Depends on #43

Once we have a beta / stable release of the config, we should consider adding it to new projects:

1. Add option to enable ESLint config to @vaadin/cli (could ask "enable Lit templates?"),
2. Add option to enable ESLint config to @hilla/cli (with a proper preset for Lit / React),
3. Add a checkbox to https://start.vaadin.com equivalent to the corresponding CLI flag.

Then we could also document TS style guide in Vaadin / Hilla - I'll create a separate issue for it.

Upgrade the ESLint configuration to breathe new life into it

The current Vaadin ESLint configuration seems to be out of date and it would be good to breathe new life into it.

The basic plan is to provide several built-in configurations which can be used by our internal projects:

• vaadin/base
• vaadin/typescript
• vaadin/typescript-lit

It is planned to build the configurations mainly with regard to internal demands, although they are also meant for external use (for any project built with Vaadin)