question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Apply two eslintrc.json files for one workspace, possible?

See original GitHub issue

I have the following folder strucure:

branches
|---.vscode
	|---settings.json
|---dev-branch
	|---node_modules
	|---src
		|---lib
			|---Tools.build.js
			|---Tools.src.js
		|---index.js
	|---test
		|---dependencies
		|---html
			|---js
		|---js
		|---.eslintignore
		|---.eslintrc.json
		|---automatedTest.test.js
		|---automatedTestWithinBrowser.test.js
		|---indexForManualTesting.html
	|---.eslintignore
	|---.eslintrc.json
	|---package-lock.json
	|---package.json
	|---README.MD

.vscode/settings.json does look like this:

{
	"eslint.workingDirectories": ["./", "./branches/dev-branch", "./branches/dev-branch/test"]
}

branches/dev-branch/.eslintrc.json looks like this:

{
    "env": {
				"browser": true,
        "commonjs": true,
        "es6": false
    },
    "parserOptions": {
        "ecmaVersion": 6
    },
    "rules": {
        "indent": [
            "error",
						"tab",
						{ "SwitchCase": 1 }
				],
				"no-mixed-spaces-and-tabs":"error",
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single",
						{
							"avoidEscape": true,
							"allowTemplateLiterals": true
						}
        ],
        "semi": [
            "error",
            "always"
				],
				"no-param-reassign": [
					"error", 
					{ "props": false }
				]
    }
}

branches/dev-branch/.eslintignore looks like this:

# path/to/project/root/.eslintignore
# /node_modules/* and /bower_components/* in the project root are ignored by default

test/**/*.test.js
/**/*.build.js

branches/dev-branch/test/.eslintrc.json looks like this:

{
		"env": {
			"node": true
		},
		"globals": {
		
		},
		"parserOptions": {
			"ecmaVersion": 8
		},
    "rules": {
        "indent": [
            "error",
						"tab",
						{ "SwitchCase": 1 }
				],
				"no-mixed-spaces-and-tabs":"error",
        "linebreak-style": [
            "error",
            "windows"
				],
				"quotes": [
						"error",
						"single",
						{
							"avoidEscape": true,
							"allowTemplateLiterals": true
						}
				],
        "semi": [
            "error",
            "always"
				],
				"no-param-reassign": [
					"error", 
					{ "props": false }
				]
    }
}

branches/dev-branch/test/.eslintignore looks like this:

# path/to/project/root/.eslintignore
# /node_modules/* and /bower_components/* in the project root are ignored by default

**/*.js
!**/*.test.js

As you can see I need different configurations, because the test is written in node and the other code runs in the browser, even some code within test/ runs in the browser in particular test/js and test/html/js.

Now the problem is that branches/dev-branch/test/.eslintrc.json has no business with *.js files, because they are ignored within branches/dev-branch/test/.eslintignore. But why do branches/dev-branch/.eslintrc.jsons rules not apply for my .js files in branches/dev-branch/test/js/? It seems to me that one workspace an only respects one .eslintrc.json (the nearest one) and everything else around is is void. This is a directory-structure which is fairly common, is there any way to support it correctly? I currently use the workaround of copying branches/dev-branch/.eslintrc.json and branches/dev-branch/.eslintignore into both branches/dev-branch/test/js and branches/dev-branch/test/html (which is kind of weird and redundant) and instead of the above .vscode/settings,json I use this one:

{
	"eslint.workingDirectories": ["./", "./branches/dev-branch", "./branches/dev-branch/test", "./branches/dev-branch/test/js", "./branches/dev-branch/test/html"]
}

When I want to lint my whole folder I use the following to npm scripts and that works perfectly fine and I do not need four config files, but only as expected two config files:


"scripts": {
		"eslint": "eslint \"./**/*.js\" --ignore-path \".eslintignore\"",
		"eslintNodeTestCode": "eslint \"./test/**/*.test.js\" --config \"test/.eslintrc.json\" --ignore-path \"test/.eslintignore\"",
}

I digged into the documentation, but I could not find anything to support this IMO fairly common folder-structure, because many programs will have a test in them and therefore need a .eslintrc.json specific for nodejs and the test also may have folders in it with .js files which are executed within the browser (for example GUI-tests or in case you want to execute the test within a browser and not nodejs, for example via puppeteer) and therefore for these ones a .eslintrc.json should apply which has specific configuration for browsers.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
dbaeumercommented, Sep 3, 2019

.eslintignore files are not resolve relative to the file validated. They are resolve relative to the working directory. This is native ESLint behavior. To make this work you need to tell the ESlint extension to do a change directory by using the following syntax for the workind directory entries:

   { "directory": "./branches/dev-branch", "changeProcessCWD": true }

If this doesn’t solve your problem can you please provide me with a GitHub repository I can clone that demos the problem you are seeing.

0reactions
iniatsecommented, Nov 7, 2019

Can you please not close a issue after 2 days… I’m busy until next month at the moment. I will respond as soon as I can.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Configuration Files - ESLint - Pluggable JavaScript Linter
There are two ways to use configuration files. The first way to use configuration files is via .eslintrc.* and package.json files.
Read more >
VSCode Eslint configuration for a two projects workspace
I want to open both projects at the same time, and being able to use eslint to check and format code in both....
Read more >
Eslint Basic Configuration
The practical way ... Let's do some demo example of configuring ESLint for a simple project. ... This utility will walk you through...
Read more >
Multi-root Workspaces in Visual Studio Code
The File > Add Folder to Workspace command brings up an Open Folder dialog to ... With multiple root folders in one workspace,...
Read more >
Reduce maintenance effort with shared ESLint and Prettier ...
Making ESLint and Prettier configurations available in a separate ... an npm workspaces project with two packages, one for each ESLint and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found