Skip to content

Update the ESLint section to flat config (eslint.config.js) #3995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1t1sCooL wants to merge 1 commit into
base: master
Choose a base branch
from
+20 −16
Open

Update the ESLint section to flat config (eslint.config.js) #3995

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions 1-js/03-code-quality/02-coding-style/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,30 +312,34 @@ Most linters are integrated with many popular editors: just enable the plugin in
For instance, for ESLint you should do the following:

1. Install [Node.js](https://nodejs.org/).
2. Install ESLint with the command `npm install -g eslint` (npm is a JavaScript package installer).
3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files).
2. Install ESLint in your project with the command `npm install --save-dev eslint` (npm is a JavaScript package installer).

@AKzar1el AKzar1el Nov 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The manual install command only declares eslint, but the sample at lines 322–323 imports @eslint/js and globals. Those should be explicit project dev dependencies rather than depending on how transitive packages happen to be hoisted. Could this step say npm install --save-dev eslint @eslint/js globals (and mention npm init -y first if there is no package.json)? ESLint's manual setup explicitly installs @eslint/js. The npm init @eslint/config@latest generator is an alternative path, but readers copying the manual example otherwise lack the declared dependencies.

3. Create a config file named `eslint.config.js` in the root of your JavaScript project (in the folder that contains all your files). Running `npm init @eslint/config@latest` generates one for you.
4. Install/enable the plugin for your editor that integrates with ESLint. The majority of editors have one.

Here's an example of an `.eslintrc` file:
Here's an example of an `eslint.config.js` file:

@AKzar1el AKzar1el Nov 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example uses ESM import/export in eslint.config.js. That file will not parse as an ES module in an existing project with "type": "commonjs" in package.json. Could the tutorial use eslint.config.mjs for the ESM example, or explain that eslint.config.js needs an ESM project (and that CommonJS projects can use require/module.exports)? ESLint documents this distinction in Configuration Files.


```js
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";

export default defineConfig([
js.configs.recommended,
{
languageOptions: {
globals: { ...globals.browser, ...globals.node },
},
rules: {
"no-console": "off",
indent: ["error", 2],
},
},
"rules": {
"no-console": 0,
"indent": 2
}
}
]);
```

Here the directive `"extends"` denotes that the configuration is based on the "eslint:recommended" set of settings. After that, we specify our own.
Here `js.configs.recommended` is the set of rules recommended by ESLint, which the configuration is based on. After that, we specify our own.

It is also possible to download style rule sets from the web and extend them instead. See <https://eslint.org/docs/user-guide/getting-started> for more details about installation.
It is also possible to download style rule sets from the web and extend them instead. See <https://eslint.org/docs/latest/use/getting-started> for more details about installation.

Also certain IDEs have built-in linting, which is convenient but not as customizable as ESLint.

Expand Down