ESLint is reading other configurations - javascript

I have a simple .eslintrc:
{
"extends": [
"twilio"
]
}
But when I run my eslint, I get
The config "standard" was referenced from the config file in
"/Users/MyAccount/Projects/my-sample-app/node_modules/cipher-base/.eslintrc".
I even tried to make the eslint to ignore and used the following:
➜ ./node_modules/.bin/eslint --config .eslintrc --ignore-pattern node_modules/ ./jest.setup.js
but it's still giving me the same error. Why is eslint trying to read this other config file?

You can run eslint with --debug flag to see why a config is being loaded. You can also run with --print-config flag to see how your config looks like once all of the extends and cascading completes. ESLint by default will cascade configs (as in, it will walk directory structure from the current folder to the top to find all configs) and combines them all for linting. Most likely, one of the parent folders have eslint config that extends standard. --debug flag should tell you where it's coming from.

Try running it from an npm script, like this
"scripts": {"eslint": "eslint --config .eslintrc --ignore-pattern node_modules/ ./jest.setup.js"} and then running npm run eslint
What I think is happening is, when running it from the terminal like ./node_modules/.bin/eslint --config .eslintrc --ignore-pattern node_modules/ ./jest.setup.js, eslint looks for the first .eslintrc file it can find relative to it's own location node_modules/.bin in this example. When you run it in an npm script, it should look for the first .eslintrc file relative to the package.json file.

Related

Run script that is in package.json of a dependency

I have this app structure:
root
whatever
node_modules
module_A
package.json
The package.json of module_A has some scripts. Let's say:
"scripts": {
"first_script": whatever
}
How to run first_script from the terminal?
One solution is:
npm explore module_A -- npm run first_script

How to Share Build Scripts In Lerna Packages

I have a lerna repo that contains multiple packages organised in the usual structure:
package.json
/packages
- alpha
package.json
- bravo
package.json
- charlie
package.json
I need to transpile all packages, and I currently have the following scripts in each package's package.json:
"build": "npm run build:noWatch -- --watch --verbose",
"build:noWatch": "babel src --out-dir lib --root-mode upward --ignore '**/*.test.js','**/__tests__'",
"prebuild": "rimraf lib/*"
I currently run a build using:
lerna run build --stream --parallel
However I don't want to duplicate these scripts for every package. I would like to define the scripts in a single place, but use them from all packages. I currently have linting scripts and testing scripts in my root package which make sense there as they are effectively traversing the whole monorepo looking for tests, or files to lint. It doesn't seeem to make sense to move the build scripts up there as well as they are scoped to the individual packages, and I like the fact that I get different colour output for each package when I use lerna run.
An unsatisfying solution is to create some shell scripts in the root of the monorepo and call them from the packages' package.json files:
In root/packages/example/package.json:
"scripts": {
"build": "../../scripts/build.sh",
"build:noWatch": "../../scripts/build.sh",
"prebuild": "../../scripts/prebuild.sh"
},
Then in root/scripts/build.sh:
#!/bin/sh
babel src --out-dir lib --root-mode upward --ignore '**/*.test.js','**/__tests__' --watch --verbose
Whilst this works, it doesn't feel right: it still involves duplication between the packages and requires setting permissions on the shell scripts (which complicates CI).
Is there a better way to share these commands amongst all my packages?
Package all the build scripts into their own module and then use lerna --hoist to host the common module so it is installed once but available to all the other packages.

How webpack.config.js work in react project?

I saw react + express project code here, start project just using this codes.
rm -rf build public/bundle.js
./node_modules/.bin/babel server --out-dir build
./node_modules/.bin/webpack --progress
node ./build/main.js"
But I can't find how to read/execute webpack.config.js command. Who read this code? and how it works?
Webpack reads webpack.config.js by default, unless you explicitly tell it to read another config file by using the --config argument, e.g.:
webpack --config another.config.js
In your case, this command reads the webpack.config.js:
./node_modules/.bin/webpack --progress
You don't execute webpack.config.js. It is a configuration file that webpack will refer to and use when webpack is run. See this page for more info.
The build and start scripts in the package.json file for the project you linked to both run webpack. Webpack will then create a bundle.js file according to the information in webpack.config.js.

Why store dist in github repo and npm?

I saw many repo, that contains dist folder. Why? I think repo should store only source code, without any builds and so on.
Let's look at follow example with ES6 code.
package.json
{
"files": [
"dist",
"lib"
],
"scripts": {
"build:lib": "<transform ES6 to ES5 and put it to ./lib folder>",
"build:umd": "<make a umd module and put it ./dist folder>",
"build": "npm run build:lib && npm run build:umd",
"postbuild": "<make minify code>"
"prepublish": "npm run build"
}
}
I think this is a good way. And I saw several repo that do the same. In this situation github repo would store only src and npm repo only lib and dist.
And now another question. Why store dist and lib in npm? Most libraries can be installed by executing npm install command. And how we know prepublish script runs on local npm install (npm-scripts).
So after package have installed we have lib and dist folders.
I don't understand why store this code in npm if only source code is enough?
It appears that repositories include dist directories in order to enable other projects to use them as direct dependencies via git. Compare package.json docs, though as of now this doesn't mention that artefacts need to be present.
Compare NPM: Missing dist and src directories when trying to install directly from a github url for the problem that arises if the dist directory is not checked in.
Alternatively, it is also possible to install from a Git repository directly as long as a prepare stage which builds the package is provided:
{
...
"scripts": {
...
"prepare": "npm run build"
},
...
}
This way, you won't have to store /dist folder in the repository itself

Do ESLint on a console to check if all files of a project are fine

I just installed ESLint and created a package.json for my project (which is an meteor project).
npm install -g eslint
Now I would like to test all my *.js-files in my project folder. How do I do that?
I tried to do
cd project
eslint -c package.json *.js
But nothing is happening.
At the end I want to do a test, if all files are ok, so I can do a merge / deploy or what so ever.
eslint app-directory/
The -c lets you define a config file, though the package.json won't serve as a valid eslint config.
This is a example eslint conifg: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js
You just can create a .eslintrc file from where you execute your eslint command and it will use it as a default config (without you specifying it via -c)

Categories

Resources