ESLint: 9.x.x Compatibility

In this article, I'll discuss ESLint, the tool that ensures your JavaScript code remains consistent and clean. I'll guide you through setting it up, customizing its behavior, and integrating it with Prettier and VS Code.

Introducing a new ESLint Flat Config ⚠️

If you used this tool at least once you might remember the .eslintrc file used for adjusting the tool behavior for your needs. What's interesting - it's deprecated now!

The latest big ESLint 9.0.0 introduced a significant change in how configurations are handled. The traditional standard configuration has been deprecated in favor of a new, default flat config. Be cautious when updating your packages, as not all configurations may transition smoothly - something I've personally encountered. There's an ongoing GitHub issue tracking support with the new flat config. Before upgrading, check this issue to ensure that the tools you are using are compatible with the new version.

Image


Standard JS compatibility with Flat Config 🛑

If you're watching this close to the upload date, I have some bad news about Standard JS too. The eslint-config-standard package is not yet compliant with the new flat config, so it doesn't work as expected, even though it's listed in the official documentation. There are some underlying issues within the Standard JS project itself that need to be handled before it can fully support the new configuration style.

Therefore, before you decide to upgrade or start using the latest version of ESLint, please make sure that the coding standards you plan to use are compatible with the new flat config. You can keep track of this issue on the official GitHub issue.

Image


Downgrading ESLint version in the project ⏪️

Since I still want to use the Standard JS style, I've opted to install a previous version of ESLint that supports the older .eslintrc configuration format. If you're interested in doing the same, you can follow the official instructions for the version 8.x.x. This way, you can continue using it while waiting for updates on compatibility.

npm init @eslint/config -- --config semistandard
{
  "root": true,
  "extends": ["semistandard", "prettier"],
  "rules": {
    "space-before-function-paren": ["error", "never"],
    "curly": ["error", "all"],
    "comma-dangle": ["error", "always-multiline"],
    "padding-line-between-statements": ["error", {
      "blankLine": "always",
      "prev": "*",
      "next": "return"
    }]
  }
}

I'll keep an eye on the changes related to Standard JS compatibility, and once there's an update, I'll create new material detailing the process. If you want to stay informed about these developments, make sure to subscribe to my channel if you haven't already. This way, you'll receive notifications as soon as the new content is available.

avatar

Looking for a developer who
truly cares about your business?

My team and I provide expert consultations, top-notch coding, and comprehensive audits to elevate your success.

Feedback

How satisfied you are after reading this article?