npm package: @lightspeed/eslint-config
Description: ESLint shareable config and rules for Lightspeed web apps
Latest version: 7.0.5

# `@lightspeed/eslint-config`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Feslint-config.svg)](https://badge.fury.io/js/%40lightspeed%2Feslint-config)

## Introduction

[**ESLint**](https://eslint.org/docs/developer-guide/shareable-configs.html) static analysis shareable configs and rules for Lightspeed web and node applications.

### Included

For both `web` and `node` environments:

- [ECMAScript 6+](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)
- [TypeScript](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)
- [Prettier](https://github.com/prettier/eslint-plugin-prettier)

For `web` only:

- [React (through Airbnb's config)](https://www.npmjs.com/package/eslint-config-airbnb)
- [Cypress](https://github.com/cypress-io/eslint-plugin-cypress)

### Opt-in

- [Jest](#jest)
- [GraphQL](#graphql)

## Quick start

### Install

Install dependencies in your app:

```sh
yarn add -D eslint @lightspeed/eslint-config
```

#### Prettier

You need [Prettier](https://prettier.io/) installed so linting can pick up your configuration as rules:

```sh
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](#prettier-in-a-monorepo).

### Configure ESLint

Consume the base ESLint configuration in the [`extends`](http://eslint.org/docs/user-guide/configuring#extending-configuration-files) section of your [ESLint configuration](http://eslint.org/docs/user-guide/configuring).

For `web` (front-end) projects:

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

For `node` (back-end) projects:

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

Optionally, extend the configuration as you see fit.

```js
// .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:

```js
// .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:

```sh
"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:

```json
"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](https://github.com/jest-community/eslint-plugin-jest) attempts to [locate Jest to determine its version](https://github.com/jest-community/eslint-plugin-jest#jest-version-setting) 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:

```js
// .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](https://github.com/apollographql/eslint-plugin-graphql):

```sh
yarn add eslint-plugin-graphql -D
```

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

```js
// .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:

```js
// .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](https://github.com/apollographql/eslint-plugin-graphql#example-config-for-apollo) for all options.