@lightspeed/eslint-config

Introduction

ESLint static analysis shareable configs and rules for Lightspeed web and node applications.

Included

For both web and node environments:

• ECMAScript 6+
• TypeScript
• Prettier

For web only:

• React (through Airbnb's config)
• Cypress

Opt-in

• Jest
• GraphQL

Quick start

Install

Install dependencies in your app:

yarn add -D eslint @lightspeed/eslint-config

Prettier

You need Prettier installed so linting can pick up your configuration as rules:

yarn add prettier -D

Note for monorepos: you do not need to install Prettier if it's installed at the root, see Prettier in a monorepo.

Configure ESLint

Consume the base ESLint configuration in the extends section of your ESLint configuration.

For web (front-end) projects:

// .eslintrc.js
module.exports = {
  extends: '@lightspeed/eslint-config/web',
};

For node (back-end) projects:

// .eslintrc.js
module.exports = {
  extends: '@lightspeed/eslint-config/node',
};

Optionally, extend the configuration as you see fit.

// .eslintrc.js
module.exports = {
  // Additional, per-project plugins and rules...
  extends: ['@lightspeed/eslint-config/node', '...']
  rules: {
    // ...
  },
};

Prettier in a monorepo

In a monorepo context where Prettier is installed at the root, configure ESLint to pick the top-level configuration:

// .eslintrc.js
module.exports = {
  // ...
  rules: {
    // We need to point to our root prettier config since it's bubbled up there
    prettier: [2, '../../prettier.config.js'],
  },
};

Add script

Create an npm script in your package.json to run linting:

"lint": "eslint '**/*.{js,jsx,ts,tsx}'",

VSCode setup

If using VSCode and your repo has a .vscode/settings.json file, we recommend adding the following settings to get a better developer experience:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"tslint.enable": false

Jest

Jest linting is opt-in. Since eslint-plugin-jest attempts to locate Jest to determine its version for some rules, our ESLint configuration will error out if jest isn't installed in your package.

We already include the plugin in this package's dependencies, but you'll need to manually turn on the shared configuration in your project:

// .eslintrc.js
module.exports = {
  extends: [
    '@lightspeed/eslint-config',
    // Extend our Jest shared configuration
    '@lightspeed/eslint-config/shared/jest',
  ],
};

GraphQL

GraphQL linting is opt-in. You will first need to install the ESLint plugin:

yarn add eslint-plugin-graphql -D

Then, in your ESLint configuration file, add the following:

// .eslintrc.js
module.exports = {
  extends: ['@lightspeed/eslint-config', '@lightspeed/eslint-config/shared/graphql'],
};

By default, we tell eslint-plugin-graphql to look for one of these schema files in your project:

• src/__generated__/graphql-schema.graphql
• src/__generated__/schema.graphql
• schema.graphql

When one is found, GraphQL queries will be linted against that schema.

Custom schema location

If your schema path is different than the above, configure this way:

// .eslintrc.js
const fs = require('fs');

module.exports = {
  extends: ['@lightspeed/eslint-config', '@lightspeed/eslint-config/shared/graphql'],
  rules: {
    'graphql/template-strings': [
      'error',
      { schemaString: fs.readFileSync('custom/path/to/schema.graphql', 'utf-8') },
    ],
  },
};

Options

See eslint-plugin-graphql's example config for all options.