ESLint and Prettier config

• First, install the package along with it’s peer dependencies:

  npx install-peerdeps --dev @verkstedt/eslint-config-verkstedt@latest

  … or if you use yarn

  npx install-peerdeps --yarn --dev @verkstedt/eslint-config-verkstedt@latest

• Then:

  • If your project uses TypeScript:

    npm install --save-dev "typescript@^5.4.3" "@typescript-eslint/eslint-plugin@^7.3.1" "@typescript-eslint/parser@^7.3.1"

    … or if you use yarn

    yarn add --dev "typescript@^5.4.3" "@typescript-eslint/eslint-plugin@^7.3.1" "@typescript-eslint/parser@^7.3.1"

  • If your project does not use TypeScript, but uses Babel:

    npm install --save-dev "@babel/core@^7.24.3" "@babel/eslint-parser@^7.24.1"

    … or if you use yarn

    yarn add --dev "@babel/core@^7.24.3" "@babel/eslint-parser@^7.24.1"

• In your EsLint config use one of those for extends:

  ↓ use this \ if your project uses →	Babel	TypeScript	React	Next.js
  @verkstedt/verkstedt/typescript-react1	☑ /✖️	☑	☑	✖️
  @verkstedt/verkstedt/typescript-next	☑ /✖️	☑	☑	☑
  @verkstedt/verkstedt/typescript	☑ /✖️	☑	✖️	✖️
  @verkstedt/verkstedt/next	☑ /✖️	✖️	☑	☑
  @verkstedt/verkstedt/react	☑	✖️	☑	✖️
  @verkstedt/verkstedt/babel	☑	✖️	✖️	✖️
  @verkstedt/verkstedt/vanilla	✖️	✖️	✖️	✖️

  E.g. make your .eslintrc.cjs the following:

  module.exports = {
    extends: ['@verkstedt/verkstedt/typescript-next'],
  }

• Add the following .prettierrc.json:

  "@verkstedt/eslint-config-verkstedt/prettier-config"

  You probably also want .prettierignore with something like:

  /.next/
  /node_modules/

  If you have any generated files (e.g. lingui locales), also add them in there.

• Add the following to stylelint.config.cjs:

  module.exports = require('@verkstedt/eslint-config-verkstedt/stylelint-config')

Use the same commands as in previous section.

After upgrading, review if all of your projects EsLint rule overwrites are still needed.

We recommend to use CoC with coc-eslint extension.

To get this working with VS Code, you will first need to install the Prettier - Code formatter extension.

Next, add the following values to global settings, or to to your per project folder settings (./.vscode/settings.json):

  // probably best to use these only in workspace or
  // folder config, and not in global settings:
  "prettier.useEditorConfig": false,
  "eslint.format.enable": true,
  // Per language settings:
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }

• dependencies — the usual

• peerDependencies — stuff that needs to be installed as a direct dependency of a project using this config. These are packages that provide binaries (eslint, prettier, stylelint) as well as some weird packages that don’t work as regular dependency cough eslint-plugin-prettier cough).

• devDependencies — stuff required to run npm run lint in this repository. It’s peerDependencies and optionalDependencies merged together