ESLint config cascading rule not working as expected - eslint

My project is structured like this:
.eslintrc.json
prettier.config.js
module-1/
.eslintrc.json
module-2/
.eslintrc.json
The root .eslintrc.json is almost the same as config files in module-1/ and module-2/. So I prefer using a single config file. All the 3 config files has a "root": true. So I believe (according to doc https://eslint.org/docs/latest/user-guide/configuring/configuration-files#cascading-and-hierarchy) the file at root directory has no effect at all and only the 2 moduled config files are used now.
But when I remove those 2 files in module directories and run ESLint from one of the module directory, I was expecting the root config to be used. And since all configs are of the same content, the linting result should be the same. However this was not true. It seems that some extra rules (of prettier/prettier) were applied after the change, and I see errors that wasn't present before.
2 more facts:
If I replace the config files in module directory with a symlink pointing to the root config (instead of removing them), everything is fine.
Removing the prettier.config.js makes no difference.
What could cause location of config file (root or in module directory) to affect rules applied?
My config file looks like this:
{
"root": true,
"extends": [/* Some plugins here, possibly has something to do with prettier */],
"rules": {
/* Some rule configs here, nothing to do with prettier */
}
}

Related

Typescript Intellisense not working when using # path root directory imports

I have run into an issue where TypeScript/Intellisense cannot determine types when importing using # symbol in my compilerOptions set to my root directory:
Using ../ I can see types clearly:
I set compilerOptions parameters as follows, first in tsconfig.json and later i created a jsconfig.json file and set them there as well:
"baseUrl": ".",
"paths": {
"#/*": ["/src/*"]
}
I've updated /src/* to ./src/* and src/* with no success. To be clear the site still runs without issue, but i have lost the ability to take advantage of intellisense and typescript. Please advise, thank you.
The file was a .jsx ... yea i did lose a whole day to that but changing to .tsx worked for me

Suppress a specific ESLint warning: File ignored by default

Hopefully this is a reasonable question but it's possible I'm misunderstanding something. I get this warning raised on 9 seemingly random .js files in my project's node_modules dependency directory when I run ESLint from grunt. For example:
node_modules/cosmiconfig/node_modules/js-yaml/lib/js-yaml/type/js/function.js
0:0 warning File ignored by default. Use "--ignore-pattern '!node_modules/*'" to override
The docs say,
/node_modules/* and /bower_components/* in the project root are ignored by default
That's all well and good, but I don't want these warnings raised every time I lint my actual code.
I have tried explicitly adding the /node_modules/* pattern to the .eslintignore in my project root, which hasn't helped. Using the command line flag suggested just makes ESLint raise errors on my dependencies, which isn't what I want either.
Is there a way to tell ESLint that I explicitly don't want to lint my dependencies so that this warning won't be raised? Having a default that raises warnings and cannot be turned off seems pretty silly.
Thanks for any help. Here are some of the relevant configs (full code is in the repo but of course node_modules is not checked in):
https://github.com/jshields/joshuashields.com/blob/master/.eslintrc.js
https://github.com/jshields/joshuashields.com/blob/master/.eslintignore
https://github.com/jshields/joshuashields.com/blob/master/package.json
Can you try adding **/node_modules/* and **/bower_components/* to see if it solves the problem? (It might be that you have nested node_modules and bower_components).
Resulting .eslintignore:
/node_modules/*
**/node_modules/*
/bower_components/*
**/bower_components/*
My problem was the files that I was targeting in my Gruntfile.js. My task was reaching down into the node_modules instead of my own code. I changed '**/js/*.js' to simply 'js/*.js':
diff --git a/Gruntfile.js b/Gruntfile.js
index 6b549f7..872abb2 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
## -10,7 +10,7 ## module.exports = function(grunt) {
//configFile:
},
files: {
- src: ['Gruntfile.js', 'stylelint.config.js', '**/js/*.js']
+ src: ['Gruntfile.js', 'stylelint.config.js', 'js/*.js']
}
}
},

Brunch is ignoring files starting with an underscore when I build

brunch is ignoring a file "_redirects" in my assets folder when I build. What do I add to config to fix? I'm sure there is some way to specifically include this file.
Yes, you have to overwrite the default ignored convention as described in the Brunch docs
conventions: {
ignored: () => false, // override defaults for no ignored files
}

ESLint ignore specific rule for a specific directory

Is it possible with ESLint to ignore one specific rule for an entire directory?
In my case, I would like to ignore import/prefer-default-export for a directory named commonComponents
ESLint configuration (.eslintrc) files are hierarchical:
ESLint will automatically look for them in the directory of the file to be linted, and in successive parent directories all the way up to the root directory of the filesystem. This option is useful when you want different configurations for different parts of a project or when you want others to be able to use ESLint directly without needing to remember to pass in the configuration file.
You can disable the import/prefer-default-export rule for the commonComponents directory by creating a .eslintrc file with the following content in that directory:
{
"rules": {
"import/prefer-default-export": "off"
}
}
You can also use the "overrides" key to declare rules for different glob patterns.
Have a read of Configuration Based on Glob Patterns
Sometimes a more fine-controlled configuration is necessary, for example if the configuration for files within the same directory has to be different. Therefore you can provide configurations under the overrides key that will only apply to files that match specific glob patterns, using the same format you would pass on the command line (e.g., app/**/*.test.js).
I use this to remove the no-unused-expressions rule from my test files like so;
"overrides": [{
"files": [ "*.spec.js" ],
"rules": {
"no-unused-expressions": 0
}
}]
If there are multiple directories that you want to apply your rules to, then you can create different configs for different purposes. For example:
.eslintrc.json for common config
.eslintrc-main.json for main linting and run eslint -c .eslintrc-main src test
.eslintrc-comp.json for components and run eslint -c .eslintrc-comp commonComponents fooBarComponent
YAML version :
rules:
no-unused-expressions: true
overrides:
- files: *-tests.js
rules:
no-unused-expressions: false
cretae .eslintignore file and put inside it your exluded folders. example :
node_modules/
functions/
dist/

jspm bundle code in subdirectory that is served as root

I am trying to create a self-executing bundle of an application, but jspm can't find what it's looking for.
I have the following folder structure
The src directory contains all of the JavaScript, but it is hosted by node as if it were the root. jspm_packages is hosted as if it were inside the root, making normal module import without a path possible (ie import React from 'react')
The app runs just fine, but when I try to build it fails because it doesn't know to look in the src directory and the jspm_packages directory for modules. Is there a way to fix this without changing the folder structure or the root-hosting?
I am ok with moving the system.config.js file into src if that makes this possible)
EDIT
This is easy if you move jspm_packages into src.
in package.json
"jspm": {
"directories": {
"baseURL": "src"
},
"configFile": "src/system.config.js"
}
This will put both system.config.js and jspm_packages in src (don't use a baseUrl in system.config.js), and bundling will work. The major drawback here is the src folder no longer contains only the project code; it now also contains library code. Performing folder searches becomes harder, and I just prefer the idea of a folder with all of my code in it.
EDIT2
After thinking about this problem more, I guess what I am really after is a method to specify an alternate path configuration during bundling. Based on my reading of the docs, this appears to be unsupported.
You can set your baseUrl to be the root (i.e. "/") and then set the path for your source code on the paths property like this:
System.config({
baseURL: "/",
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
}
})
Full working example can be seen here.
Furthermore, if you need to change you paths just for bundling you could use the jspm-cli in a gulp task and override your builder configuration like this:
var jspm = require('jspm');
gulp.task('task', function () {
var builder = new jspm.Builder();
builder.loadConfigSync('pathToYourConfigFile');
builder.config({
paths: {
'*': 'pathToYourCode'
}
});
builder.bundle('yourOptionsHere');
}

Resources