Running eslint command every time you save - npm

I have my package.json script set up like this:
"scripts": {
"lint": "eslint src webpack.config.js || exit 0"
},
How can I have this lint command run every time I save a file so I don't have to run npm run lint every single time?

eslint-watch looks like it would do this:
"scripts": {
"lint-watch": "esw --watch src webpack.config.js"
}

Related

package.json npm node scripts not minifying css; not excluding files

Here are my package.json scripts...
"scripts": {
"build:sass": "sass --no-source-map src/assets/scss:dist/assets/css",
"build:js": "uglifyjs-folder ./src/assets/js -o ./dist/assets/js/main.js",
"copy:assets": "copyfiles -e .src/assets/scss/**/* -e .src/assets/js/**/* -u 1 ./src/assets/**/* dist",
"copy:html": "copyfiles -u 1 ./src/*.html dist",
"copy": "npm-run-all --parallel copy:*",
"watch:assets": "onchange \"/src/assets/**/*\" -- npm run copy:assets",
"watch:html": "onchange \"src/*.html\" -- npm run copy:html",
"watch:sass": "sass --no-source-map --watch src/assets/scss:dist/assets/css",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server dist --files dist",
"start": "npm-run-all copy --parallel watch serve",
"build": "npm-run-all copy:html build:*",
"postbuild": "postcss dist/assets/css/*.css -u autoprefixer cssnano -r --no-map"
}
For this line, I want to exclude the sass and js directories since they are handled by other scripts, but the exclusion isn't working, its still copying all the files in those directories.
"copy:assets": "copyfiles -e .src/assets/scss/**/* -e .src/assets/js/**/* -u 1 ./src/assets/**/* dist",
And for this line, the css file is updated but it is not minified
"watch:sass": "sass --no-source-map --watch src/assets/scss:dist/assets/css",
The build script works. The issues above happen with the start script.
Any help would be greatly appreciated.
Well I was able to find a work around, sort of. Here is what I did.
I installed the recursive-copy npm package.
npm i recursive-copy --save-dev
I created a copyfolder.js file in my utils folder with the following contents.
import copy from 'recursive-copy';
import { argv } from 'node:process';
const args = process.argv;
const src = args[2];
const dest = args[3];
var options = {overwrite: true,};
try {
const results = await copy(src, dest, options);
console.info('Copied ' + results.length + ' files');
} catch (error) {
console.error('Copy failed: ' + error);
}
then i put the following script in my package.json file. Notice it has the arguments that are passed to the copyfolder.js script which are the source and destination directories. Instead of trying to copy all folders with exclusions as I stated in the op, I created a script for each folder I wanted copied. For example I would use it for a Vendors or local bootstrap folder perhaps. My scss/css, images, and js folders are handled by the minifyers/compilers. The copyfolder is used for any other content I want to put in my dist or public builds.
"copyfolder:utils": "node utils/copyfolder.js ./src/assets/test ./dist/assets/test"
I also put a script in the package.json file that uses the npm onchange package to run the above copyfolder:utils script when anything in the source folder changes.
"watch:utils": "onchange \"src/assets/test/**/*\" -- npm run copyfolder:utils"

How to generate a coverage report with vscode extension tests

I'm implementing a VSCode extension. I set up the project following this link.
It generates a starter project with a src/test/runTest.ts file:
import * as path from 'path';
import { runTests } from '#vscode/test-electron';
async function main() {
try {
// The folder containing the Extension Manifest package.json
// Passed to `--extensionDevelopmentPath`
const extensionDevelopmentPath = path.resolve(__dirname, '../../');
// The path to test runner
// Passed to --extensionTestsPath
const extensionTestsPath = path.resolve(__dirname, './suite/index');
// Download VS Code, unzip it and run the integration test
await runTests({ extensionDevelopmentPath, extensionTestsPath });
} catch (err) {
console.error('Failed to run tests');
process.exit(1);
}
}
main();
And a command in the package.json:
{
"compile": "tsc -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
}
Is there a way to generate a coverage report with it?
VSCode extension unittesting uses Mocha under the hood. You can generate coverage reports like in any other Typescript/Javascript project using one of the many available frameworks, e.g. c8, jest, istanbul, etc.
Install the framework of your choice, here I use c8
npm i --save-dev c8
and add to scripts
"scripts": {
"compile": "tsc -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js",
"coverage": "c8 --check-coverage npm run test"
}
Depending on your extension you might need to create a configuration file with the files you want to check for coverage. Here we are checking the compiled .js files placed under the out/ dir and we also excluding the files responsible for unittesting i.e. out/test/ (usually).
.c8rc
{
"all": true,
"include": ["out/**"],
"exclude": ["**/node_modules/**", "out/test/"],
"reporter": ["html", "text"]
}
Run the coverage script and you should get an output of your coverage
npm run coverage

how to change "npm scripts" directory

"scripts": {
...
...
"puppeteer": "cd test/UI-tests/src && set BROWSER=chrome && mocha test.js"
}
I want to wrap all the commands in "puppeteer", so once I type npm run puppeteer, it can set the browser and run the test.js file.
The way I write it does not work.

Watches not working in vscode? (Vuejs)

It took me a while to get the debugger to work within Visual Studio Code. Now the program breaks on set breakpoints inside of .vue files/components. But none of the watches seem to work. They are either undefined or unavailable, even when the variables have been created.
The settings I use in launch.json :
{
"name": "chrome debug",
"type": "chrome",
"request": "launch",
"port": 3000,
"url": "http://localhost:3000/admin",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true
// "sourceMapPathOverrides": {
// "webpack:///src/*": "${webRoot}/*"
// }
}
I build my app through npm run build or npm run devbuild which, by my knowlegde, 'compiles' the .vue components into Javascript files. And then start the app with either npm start or nodemon index.js.
Package.json
"scripts": {
<...>
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"devbuild": "cross-env NODE_ENV=development webpack --progress --hide-modules",
<...>
},
Have you ever tried add a new script with nodemon? Something like this:
"newScript": "nodemon -L -e ts,json --watch . --exec \"npm run build
|| npm run devbuild\""
-L = Though this should be a last resort as it will poll every file it can find.
-e = By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so: nodemon -e js,jade
--watch . = To watch all the changes on the path, in this case all the code on the current path.
(I got all of this information from the documentation.
then, run the command:
npm run newScript

How can I avoid "No test specified" errors in npm?

I'm using npm#5.6.0 on Mac High Sierra. I want to run tests that were setup in this Stratum client project. I have run npm install successfully. But when I try and run individual tests, I get the error:
no test specified
What gives? I am in the root project directory and the tests are in my "test" folder. Here is what happens:
localhost:stratum-client-master davea$ npm install
up to date in 0.381s
localhost:stratum-client-master davea$ npm test test/callbacks.js
> stratum-client#1.0.1 test /Users/davea/Documents/workspace/stratum-client-master
> echo "Error: no test specified" && exit 1 "test/callbacks.js"
Error: no test specified
sh: line 0: exit: too many arguments
npm ERR! Test failed. See above for more details.
Try replacing
"scripts": {
"test": "mocha"
},
in your package.json.
You're outputting exactly what the package.json file was told to output. Take a peek under scripts.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"int-test": "mocha --require babel-core/register --recursive test"
},
Try int-test, the other command in there.
Update: The package link has changed to the following and mocha should be the default test suite. You can run the other script with npm run bump-version; the original script above can be run with npm run int-test.
"scripts": {
"test": "mocha --recursive test",
"bump-version": "npm version patch"
},
You didn't specify which testing framework you're using such as Jest or Mocha.
In case of Jest, add this in your package.json:
"scripts" : {
"test" : "jest"
}
In the case of mocha refer to #Divyeshpal's answer.
The error can be for "exit 1"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
Change it to this:
"scripts": {
"test": "echo \"No test specified\""
},
This change works because exit 1 creates an error.
if you are using Jest and enzyme for unit testing and you have a jest.config.json config file, you can update your package.json under scripts to the following:
"scripts":{
"test": "jest --config=./jest.config.json --coverage",
}
The error can be for "exit 1"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
Change it to this:
"scripts": {
"test": "echo \"No test specified\""
},
This change worked for me because exit 1 created the error.
find and make changes in your package.json
"scripts":{
"test":"mocha"
}
add this on your packages.json file:
"scripts":{
"test": "mocha --ui tdd tests/callbacks.js",
}
then npm test on the console.
Replace
echo \"Error: no test specified\" && exit 1
in your
package.json
with
mocha.