My working ESLint(8) config with "standard" in 2024 for vscode

in javascript, coding, ling, note to self

I like ESLint because it integrates nicely with vscode but recently it has become very tough to get a new setup up and running due to changes in version 9's config format and the struggle over who owns the "standard" package. Anyway, here's my step-by-step eslint 8 setup that should work with vscode and your package manager scripts:

bash

npm i -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-node eslint-plugin-promise

next, create a .eslintrc.cjs file in your project root with the following content:

module.exports = {
  env: {
    node: true
  },
  extends: 'standard',
  overrides: [
    {
      files: ['.eslintrc.cjs']
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  ignorePatterns: ['node_modules/', 'dist/', 'build/', 'coverage/']
}

Make sure you use the .cjs extension.

Next, in vscode uninstall the ESLint extension, then reinstall it: Press CTRL+P and enter ext install dbaeumer.vscode-eslint.

Next, open the command palette, search for user settings JSON, select Preferences: Open User Settings (JSON), then search for [javascript] and delete the following line:

json5

// ...
  "[javascript]": {
    "editor.defaultFormatter": "WHATEVER_YOU_HAVE_HERE",
    // ^ delete this line
  },
//...

go to a javascript document inside the current project and press CTRL+SHIFT+P and search for "format document". Select "ESLint" as the formatter when prompted.

That's it. You should now have a working ESLint setup with the "standard" config in 2024. "Format Document" should now work as expected and instantly apply the ESLint rules to your code.

I also use the error lens extension to get a visual representation of the errors in my code. It's a great extension and I can only recommend it.

Update 2024-10-13: Clear up some formatting, to make copy-pasting easier and made sure it still works 😃

Clicking this button loads third-party content from utteranc.es and github.com