@promoboxx/eslint-config

JS Code styles for Promoboxx. Contrary to the name, it contains more than just eslint (eslint forces a naming convention).

Installation

pnpm install --save-dev eslint prettier @promoboxx/eslint-config

Now add this to your eslint.config.js:

import pbxxBase from '@promoboxx/eslint-config'
import pbxxReact from '@promoboxx/eslint-config/react'
import pbxxGraphql from '@promoboxx/eslint-config/graphql'
import pbxxVitest from '@promoboxx/eslint-config/vitest'
import pbxxPrettier from '@promoboxx/eslint-config/prettier'
import { defineConfig } from 'eslint/config'

const config = defineConfig([
  // Base config applies to all projects.
  ...pbxxBase,
  // If the project uses vitest:
  // ...pbxxVitest,
  // If the project uses react:
  // ...pbxxReact,
  // If the project uses graphql:
  // ...pbxxGraphql,
  // If the project uses prettier:
  ...pbxxPrettier,

  {
    languageOptions: {
      parserOptions: {
        graphQLConfig: {
          // If the project has a graphql config file you may end up with
          // multiple sources of truth for your graphql schema/documents. Either
          // uncomment this line, OR add this to your graphql config:
          //
          //     documents: './src/**/*.{graphql,js,ts,jsx,tsx}'
          //
          // skipGraphQLConfig: true,
          // If the project uses graphql, set the path/url to your schema below.
          // Alternatively, you can set this in your graphql config file.
          // schema: 'node_modules/@promoboxx/graphql-gateway-types/graphql.schema.json',
        },
      },
    },
  },
])

export default config

And this to your prettier.config.js:

import config from '@promoboxx/eslint-config/prettier.config'

export default config

Usage

Normal usage would be adding support for prettier and eslint to your editor, running them after every save.

VS Code

Install the Prettier and eslint extensions.

Add this to your settings:

  // Formatting
  "editor.formatOnSave": true,

  // Prettier
  "prettier.requireConfig": true,

  // Set default formatter to prettier for languages.
  // Note: Expect this to grow as more languages are supported.
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ESLint
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "graphql"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

Atom

Install the Prettier and eslint extensions.

In the settings for Prettier, make sure these match:

• [x] Format Files on save
• [x] Only format if a Prettier config is found

In the settings for eslint, make sure these match:

• [x] Fix errors on save

Vim / Neovim

ale supports both prettier and eslint.

Other Editors / Manual

Run these commands after a file is saved:

./node_modules/.bin/eslint --fix "$FILE"
./node_modules/.bin/prettier --write "$FILE"

Notes

There are multiple ways of getting eslint and Prettier working in harmony, and most of them involve using eslint to run Prettier. They work, but Prettier handles much more than just JavaScript, so it's best to use the two tools together, while disabling all eslint rules that Prettier takes care of.