ESLint producing different output when run with npm run-script - npm

When I lint my code with eslint scripts/**/*.js I see two linting errors:
» eslint scripts/**/*.js
/Users/user/dev/scripts/application.js
3:8 error "React" is defined but never used no-unused-vars
/Users/user/dev/scripts/components/Header.js
24:2 error Unnecessary semicolon no-extra-semi
✖ 2 problem (2 error, 0 warnings)
That's fine. When I put that command into "scripts" in my package.json then I only get one error.
// package.json
// ...
"scripts": {
"lint": "eslint scripts/**/*.js"
}
// ...
» npm run lint
/Users/david.tuite/dev/ui/scripts/components/Header.js
24:2 error Unnecessary semicolon no-extra-semi
✖ 2 problems (2 errors, 0 warnings)
What's happening to the other linting error?
edit
I'm starting to suspect this is a globbing problem. The missing linting error is in a file which isn't in a subdirectory of scripts.

Globs work differently in the package.json file.
The trick is to wrap the path matchers in single quotes to have them expanded at the shell level before they're passed to eslint.
// package.json
// ...
"scripts": {
"lint": "eslint 'scripts/**/*.js'"
}
// ...

Sounds like David's answer solved the problem he was encountering. However, I had an identical symptom to the problem described.
In my case the problem was that npm was using the node_modules in the project directory which had a different version of the plugin than the global npm folder had.
Running eslint from command line was using the global version. Reconciling those versions resolved the issue in my case.

Related

Lint-staged aborts check with the first failing file; "Error: Unknown argument"

With "lint-staged": "^13.0.3" and the following .lintstagedrc config:
{
"src/**/*.{ts,html}": [
"ng lint"
],
"src/**/*.scss": [
"npx stylelint **/*.scss"
]
}
I'm trying to run npx lint-staged -q on the following files (all of them have lint problems that would come up with the individual lint command):
Running ng lint and npx stylelint **/*.scss directly will bring up the problems (detailed) and would not fail on the first file:
ng lint
npx stylelint **/*.scss
I'd like lint-staged's output to show all of the problems from the individual lint commands. What's wrong here?
Thanks
Ok, after further investigation;
The partial output problems seem to be introduced to lint-staged on versions >= 12.2.0, see on github. I've downgraded to "lint-staged": "12.1.7" and the problem seems to be gone.
Regarding the Unknown argument thing, it resolves by calling eslint instead of ng lint on the configuration file.

Why does package.json script behave differently than identical terminal command

In my npm project, in my package.json file, I have the following lines of code:
"scripts": {
"build": "webpack"
},
While in my terminal, if I run npm webpack, I get the error message:
Unknown command: "webpack"
But if I run npm run build, I get a prompt from webpack saying I need webpack-cli... so the command is obviously recognized.
I'm confused about the different behavior of these two commands. In this case, isn't running npm run build identical to running npm webpack in my terminal? Why does one command fail and one succeed? What is actually happening when I run npm run build?
If we look at the documentation,
Environment
Package scripts run in an environment where many pieces of information are made available regarding the setup of npm and the current state of the process.
path
If you depend on modules that define executable scripts, like test suites, then those executables will be added to the PATH for executing the scripts.
Maybe this is the reason webpack is not recognized by the command line.

Failed to load plugin 'import' declared in '... » eslint-config-standard': Cannot find module 'eslint-plugin-import'

I've been trying to use ESLint along with Standard and I haven't been able to get it to work. I've tried setting it up through eslint --init, uninstalling eslint globally and having all the packages locally, installing each package manually npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node, reinstalling ESLint extension and nothing so far. I'm perfectly able to run ./node_modules/.bin/eslint --fix ... in order to fix/check errors but it doesn't work with the VSCode extension by any meanings. I don't have prettier so it isn't related to it either.
Output:
[Info - 12:33:20 AM] ESLint server is running.
[Info - 12:33:23 AM] ESLint library loaded from: c:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\node_modules\eslint\lib\api.js
[Error - 12:33:25 AM]
Failed to load plugin 'import' declared in 'graphql-prisma\.eslintrc » eslint-config-standard': Cannot find module 'eslint-plugin-import'
Require stack:
- C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\__placeholder__.js
Happened while validating C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\src\resolvers\index.js
This can happen for a couple of reasons:
- The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
- If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
- If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.
.eslintrc:
{
"env": {
"es6": true,
"node": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
I've seen other questions in SO related to this issue but none of the solutions worked, unfortunately.
I had the same issue for many weeks and finally found this thread and comment on Github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372
My issue turned out to be related to subdirectories. As soon as I made the project the only open project with an .eslintrc.js file, all of my linting issues went away.
Hopefully this works for you.
To fix the dependency tree, try following these steps in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
Also, be sure, that you have latest version of "eslint-plugin-import" plugin, as in my case, for example i had this error with "2.20.1" version, but latest "2.25.3" solved this issue
I had the same error caused by the eslint-plugin-import dependency and in my case, I got rid of the error by increasing to the latest version of the package.
For those having the following error with flutter firebase cloud functions after running firebase init functions and trying to run firebase deploy --only functions:
ESLint: 8.9.0
Error: Failed to load plugin 'import' declared in '.eslintrc.js': Cannot find module 'es-abstract/2021/RequireObjectCoercible'
Require stack:
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\ExportMap.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\rules\named.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\index.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\#eslint\eslintrc\dist\eslintrc.cjs
This was solved by:
delete node_modules in functions folder
delete package-lock.json in functions folder
cd .\functions\ in the terminal to get into functions folder, run npm i, cd ../
firebase deploy --only functions
I am having this issue too which was why I checked this post but did not see any answer that work for me. After searching online, I stumbled into this code which solves my problem.
npm i -D eslint #typescript-eslint/eslint-plugin
In my case, i was not using jest at all.
So i had to downgrade de eslint dev dependency:
"eslint": "^7.32.0",
as it say here: https://github.com/eslint/eslint/issues/15149#issuecomment-939501275

Build npm-package from private git on install

I got a private bitbucket repo A that I install via npm in my project B.
npm install git+ssh://git#bitbucket.org....git
That works with no problems.
But now I would like to run a build in A after installing it.
npm in default comes with a lot of scripts for stuff like that https://docs.npmjs.com/misc/scripts
I tryed postinstall, prepare, prepublish, preinstall in my package.json in A:
...
"scripts": {
"prepublish": "npm run build",
"build": "...",
...
On installing my package A in B I get npm Error: npm ERR! premature close
I would like to run the build on install to remove build files from git (A).
In this case the build runs webpack + babel compile.
Project B is made with create-react-app.
I don't want to eject create-react-app, setup webpack or compile all node_modules packages.
Any experience with this workflow?
There is no need to eject Project B just adding your Project A as a dependency in package.json is enough. And for Project A please use "preinstall" it will run before every npm install including when you run npm install on Project B. And in my case I just tested it it working perfectly in my machine. If you encountering issue I think it might be because of the way you building it maybe? So can you show us the build script?
Use prepare since according to the NPM docs it will install dependencies and devDependencies before the package is packaged and installed.
Which is helpful if you are compiling using Typescript, or doing transforms.
...
"scripts": {
"prepare": "npm run build",
"build": "...",
...
Note: If your dist/build directory is ignored in .gitignore. Add an empty .npmignore file to your repository; otherwise the prepare script won't build the directory.
Ref: https://docs.npmjs.com/cli/install

What does npm run bundle do?

I'm trying to understand and follows https://github.com/DMPRoadmap/roadmap/wiki/Installation
But I don't understand something they use.
What does these do?
1) npm run bundle
I know it equals to npm run-script bundle as according to npm doc about run script but I don't really understand where the bundle come from; in other words, I don't understand what npm doc about run script mean by
an arbitrary command from a package's script object
2) npm run bundle -- -p
Since I don't know where the bundle come from, I don't know how to work out the meaning of -- -p option. I want to find its documentation and see the details.
I'm not sure if npm doc about bundle is related, but it seems to be replaced by install as documented in npm doc about install.
And why is this option got so many - characters (3 in this case) before p? I normally see 2 - for long option name and 1 - for abbreviated option name
Any time you see npm run [x] anywhere it means that it's executing a command located in the scripts section of the package.json file. Therefore npm run bundle runs the bundle command located here: https://github.com/DMPRoadmap/roadmap/blob/master/lib/assets/package.json#L8 which in this case looks like all it's doing is running webpack
"scripts": {
"test": "./node_modules/.bin/karma start",
"bundle": "./node_modules/.bin/webpack",
"lint": "./node_modules/.bin/eslint --ext .js --cache ./javascripts/ || true"
}