We Keep Coding

How do I configure parcel to exit build with an error if eslint does not validate

I'm building a react app with parcel. I have an eslint config set up that I like, and use VSCode tools to catch eslint errors and fix them as I code. The app builds correctly as of now. So all that is fine.
However, as an added precaution, I would like to set up parcel to run eslint, using my config, and to halt the build process and output an error when I havent followed the eslint rules, either when running dev server or building for production.
I'm aware of this npm package from googling, but the package doesnt have a readme, and i can't find setup instructions in the parcel docs: https://www.npmjs.com/package/#parcel/validator-eslint
For reference I am using parcel 1.12.3 but would be open to changing to parcel 2.x.x if that is neccesary.
Thanks!

In parcel v2, you can use the #parcel/validator-eslint plugin to accomplish this. Here's how:
Install eslint and #parcel/validator-eslint in your project. Note that this plugin will currently only work with eslint v7 or earlier due to this bug (which hopefully we can fix soon ;-))
yarn add -D eslint#7 #parcel/validator-eslint
Add an .eslintrc.json file to your project with your configuration. It's best to use a static config file (like .json or .yaml) rather than a dynamic one (like .js) if you can, because that helps parcel's caching be more efficient and faster (see docs). Here's a basic file example that works, but you can extend this to suit your needs by checking out the eslint docs:
{
"env": {
"browser": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
}
}
Tell configure parcel to use the plugin for javascript files by adding a .parcelrc file at the root of your project (or modify your existing .parcelrc file to include the "validators" entry below):
{
"extends": "#parcel/config-default",
"validators": {
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"#parcel/validator-eslint"
]
}
}
Now, if you have an eslint error, it should bubble up through parcel like this:
🚨 Build failed.
#parcel/validator-eslint: ESLint found 1 errors and 0 warnings.
C:\Users\ansteg\Projects\parcel-eslint-example\src\index.js:2:7
1 | // This unused variable should trigger an ESLint error.
> 2 | const unusedVar = "Hello!";
> | ^^^^^^^^^^ 'unusedVar' is assigned a value but never used.
3 |
See this github repo for a working example.

How to setup pathMapping in VSCode to debug a Snowpack application

I'm evaluating Snowpack for building my JavaScript project. However, VSCode and the Debugger for Chrome extension cannot match the scripts on the dev server to the local source files. Because of this, breakpoints don't work. I'm not using any source maps because I'm not bundling/transforming anything, just using vanilla ES modules.
I'm using the following template: https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-lit-element
A simplified directory layout of the project is:
public/
index.html
src/
index.js
Now when I start the Snowpack dev server it serves the files using the following layout, which is quite different:
index.html
dist/
index.js
I tried the following launch configuration in VSCode, but it does not work, i.e., it cannot match the javascript files:
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/",
"webRoot": "${workspaceFolder}/public",
"pathMapping": {
"/dist": "${workspaceFolder}/src"
}
}
The pathMapping property has very scant documentation, and I'm wondering whether it's working at all.
Any ideas?
Update:
The lit-element example seems to use babel for transpiling, but even with transpiling disabled the problem persists. This is more a VSCode problem, not a Snowpack problem.

To create an output you would like to have please configure mount option for snowpack config, experiment with this config to get the result you need.
mount: {
public: '/',
src: '/src',
},

Disable Babel cache in babel.config.json file for development purposes?

I'm using babel-node to transpile on the fly for my development. Babel however does not pickup my changes to JS files loading older versions of the file, to say the least it is quite irritating. I'm guessing caching is the culprit here.
I can't however find a simple property to set in the babel.config.json to disable this, or how is one supposed to setup Babel for dev purposes!
My config:
{
"presets": [["#babel/preset-env", { "targets": { "node": "current" } }]],
"plugins": []
}

webpack javascript in one line

I am running an Angular 4 project with Webpack 2.4.
For some reason, some of the third party Javascript plugins files are being modified after compilation, and they are shown in the browser's debugger as a very long, one line string:
This is very inconvenient because I can't use Chrome / FF debugger, as I am unable to set up any breakpoint in there.
Following some of the already posted questions in this site and many others, I extracted the webpack.config.js file by executing ng eject
The section where the js files are imported look as follows:
{
...
"scripts": [
...
"script-loader!./node_modules/handsontable-pro/dist/handsontable.full.js",
...
],
"styles": [
...
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
}
The file handsontable.full.js does not look like that in my project's folder. It seems to be pretty structured. It seems to suffer some kind of modification when the application is built and served.
More puzzling, many other files in the node_modules folder do not have the same problem.
Now, I tried to tweak the webpack.config.js, as suggested in many forums, specifically SourceMapDevToolPlugin, but with very little luck.
So, several questions arise here:
What is happening here? The transformed file doesn't seem to be a minified file, or a hashed file... What is it?
How can I prevent this from happening, so I can set up breakpoints in that file and use the browser's debugger for tracing, var inspect, etc.

Check the devtool: property in the Webpack config object. If it's set to eval, cheap-eval-source-map (or something like it, don't remember all the eval options), try changing it to source-map or cheap-source-map.
Full list of options here: https://webpack.js.org/configuration/devtool/

Project-wide Intellisense in VS Code?

I'm using Visual Studio Code, currently working on a web project using PHP, HTML, CSS, JS. I've found the intellisense features (e.g. auto-completion and go-to definition) useful, particularly in JS. However, it only seems to scan open files, not the entire project to detect variables and functions. Since my code is split among various files with global items, is there any way (via setting or extension) to get it to scan the entire project?

See our JavaScript Docs for help getting started. You likely need to create a jsconfig.json file at the root of your workspace:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
This tells VSCode to treat all JS files in your workspace (even unopened ones) as part of the same project