I'm currently using ESLint in my project, and have configured it to run inside VSCode, and enforce a custom ruleset. So far it is working as expected, and flagging lines in my code where violations occur. I now need to specify that the environment is browser (as suggested in the solution to this issue). How exactly do I do that, yet keep everything else about ESLint working as-is?

• That GitHub issue indicates I need to edit my .eslintrc file. But I don't see any such file in the root of my project. I do see .eslint files in several different dependencies, e.g.

C:\Users\snarl\development-snarl\development-wordpress\linting-wordpress\node_modules\is-callable

I could be wrong, but those don't seem related.

• I tried creating a new file--.eslintrc.json--in the root of my project, and adding to that file:

{ "env": { "browser": true } }

But when I did this, and re-checked ESLint inside VSCode, it stopped flagging the rules in my custom ruleset (examples), and actually flagged a new rule (screenshot). This seems to pletely supersede some of my existing ESLint settings, rather than supplement them.

Thanks.

I'm currently using ESLint in my project, and have configured it to run inside VSCode, and enforce a custom ruleset. So far it is working as expected, and flagging lines in my code where violations occur. I now need to specify that the environment is browser (as suggested in the solution to this issue). How exactly do I do that, yet keep everything else about ESLint working as-is?

• That GitHub issue indicates I need to edit my .eslintrc file. But I don't see any such file in the root of my project. I do see .eslint files in several different dependencies, e.g.

C:\Users\snarl\development-snarl\development-wordpress\linting-wordpress\node_modules\is-callable

I could be wrong, but those don't seem related.

• I tried creating a new file--.eslintrc.json--in the root of my project, and adding to that file:

{ "env": { "browser": true } }

But when I did this, and re-checked ESLint inside VSCode, it stopped flagging the rules in my custom ruleset (examples), and actually flagged a new rule (screenshot). This seems to pletely supersede some of my existing ESLint settings, rather than supplement them.

Thanks.

• javascript
• eslint
• eslintrc

• The file must be named .eslintrc. Not .eslintrc.json. Rename the file, remove the .json extension. – Jesper Commented Jan 8, 2020 at 11:35
• The suffix is fine, see the docs. I use the 'json' suffix for my config. @cag8f Where did you set your custom rules, if not in a config file? – hotpink Commented Jan 8, 2020 at 11:39
• @hotpink The custom rules are in a separate Node package (this one: npmjs./package/@wordpress/eslint-plugin/v/1.0.0), which is installed as a dependency in my project. So from the root directory of my project, that package is located in node_modules/@wordpress – cag8f Commented Jan 8, 2020 at 15:04

2 Answers 2

I posed this question to the ESLint Google Group (see here), and received a reply with the answer. If there is no ESLint config file in my project's root directory, ESLint falls back and looks for one in the user's root directory. I checked that directory on my puter, and there was indeed an ESLint config file there (.eslint.json). If I create a new config file in my project's root directory, that will supersede the config file in the user root directory. So the solution was to move the config file from my user root directory to my project's root directory, then to it, add the env lines:

"env": {
    "browser": true,
    "node": true
}

That resolved my issue. After, ESLint inside VSCode continued to lint my files, using the same custom rule set. Furthermore, ESLint seemed to understand that the env was browser. Although I didn't explicitly check that. I say that because the ESLint error that was previously reported, was no longer reported. And my assumption is that is occurring because the env has been properly set to browser (as per this issue).

Since eslint 8.21.0, a new config format was introduced: the flat config.

Before 8.21.0, the accepted answer that uses an env property solves the problem. After 8.21.0, you must use a flat config. Flat configs do not have an env property, which has been replaced with globals in the languageOptions property.

So instead of this:

env: {
    browser: true,
}

You would write:

languageOptions: {
    globals: {
        ...globals.browser,
    }
}

Note that you will need to install and import the globals package for this to work.

See eslint's migration guide for more informations : https://eslint/docs/latest/use/configure/migration-guide#configuring-language-options