Ok so as a member of a team that use both Vscode and Webstorm and someone who likes to jump between them himself I really wanted a nice easy way to spin up a simple Javascript project that would let me use all the nice new features from ES6 (particularly the imports / modules and other syntactic sugar).
The best way to do this is weith Babel
Initialise npm and a package.json. Using -y
will skip all the questions and adding details manually you can go back and modify later.
$ npm init -y
Install the dependencies needed.
$ npm i dotenv @babel/cli @babel/core @babel/node @babel/preset-env nodemon
Create a folder called /src
with another folder called /modules
in it. In the /src
folder create a new file called index.js
. Then in the modules folder create another file called maths.js
. The final structure should look like something below.
// /src/index.js
import 'dotenv/config';
import { sumAll } from './modules/maths';
const result = sumAll(1, 1);
console.log(result);
// /src/modules/maths.js
let sumAll = (a, b) => { return a + b; }
let subtractAll = (a, b) => { return a - b; }
let divideAll = (a, b) => { return a / b; }
let multiplyAll = (a, b) => { return a * b; }
let findModulus = (a, b) => { return a % b; }
export { sumAll, subtractAll, divideAll, multiplyAll, findModulus };
The tricky part is this bit. If you try to run this project with out babel you will end up with the following error.
c:\dev\Learning\nodejs\babel-es6-debugging\src\index.js:1
import 'dotenv/config';
^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at Module._compile (internal/modules/cjs/loader.js:721:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
SOOOOOOO.. To get this rocking we do this bit o magic. Stick a file called .babelrc
in the root folder of the project. Use the following snippet to kick up the presets and make it produce sourMaps
// .babelrc
{
"presets": [
"@babel/preset-env"
],
"sourceMaps": true
}
Then in the package.json
file add the following to the "scripts"
section.
"scripts": {
"start": "nodemon --exec babel-node src/index.js"
},
Running
$ npm run start
Should produce this. Showing that we have managed to transpile and run the script
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node src/index.js`
2
[nodemon] clean exit - waiting for changes before restart
BUT WHAT ABOUT DEBUGGING
Yes, don't worry I hadn't forgot, this was the bit that actually caused me some realy head scratching. I could add lots of links to the numerous StackOverflows, blogs, videos and issues I've plodded through in order to get this working but I think I'll just give you the solutions as once it works it works.
Start by adding @babel/register
this is a little touch of hot sauce that means you can run the babel files in memory rather than having to do the whole. Build into dist folder thang.
$ npm i --save-dev @babel/register
Then create a babel.config.js
file in the root of the project. The file contents needs to look like.
module.exports = {
presets: [
[
'@babel/preset-env',
{
// sourceMaps: true,
targets: {
node: 'current',
},
},
],
],
};
VSCode
SO next in vscode go to the configuration / debug section and make the launch.json
file look like.
The most interesting parts are the args
for the working folder. This needs to pint at the correct file for the debugging. IN this case and index.js
. Then the runTimeArgs
are needed to transpile the babely babel stuff in-memory rather than with a dist folder.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch",
"args": [
"${workspaceRoot}/src/index.js"
],
"restart": true,
"protocol": "inspector",
"stopOnEntry": false,
"runtimeArgs": [
"--nolazy",
"--require",
"@babel/register"
],
"sourceMaps": true
}
]
}
From here you should be able to hit F5
with a breakpoint in place and have it hit that.
Webstorm
In webstorm the easiest way to do this is to open the index.js
and use a right click Debug File
. This will give you a configuration in the config manager.
In there it will end up looking like
In the Node parameters
field add
--nolazy --require @babel/register
Make sure the configuration is saved, close the dialog and hit the little red debug button with a breakpoint added.
Bonus
next few tips are just to finish the boiler plate off
I personally like using commitizen to make sure there is a structure to my commits this allows a number of other things to be done at a later stage. Start by adding the dependencies.
$ npm i --save-dev commitizen cz-conventional-changelog
Next add the following section to the bottom of the package.json
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
Then add the following to the "script"
section of the package.json
file:
"cm": "git add -A && git cz",
Next to stop us committing a load of rubbish that we don't need create a file in the root directory called .gitignore
add the following into it.
node_modules/
.idea/
.vscode/
dist/
.env
This will stop the directories being added to source control as we don't want them up there.
Finally you can run
$ npm run cm
This will add all the files to git staging and trigger the commitizen template and ask you a number of questions about the commit.
? Select the type of change that you're committing: (Use arrow keys)
> feat: A new feature
fix: A bug fix
improvement: An improvement to a current feature
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
This will allow you to enter details about the commit and push if you need to.
Round up
Ok so after alllllllll this you should be able to debug ES6 javascript in Vscode and Webstorm. If thrown together a repo on github with all the files in.
https://github.com/AndrewAllison/babel-es6-debugging andy feedback is much appreciated.
Top comments (1)
This perfectly saved my time a lot and thanks again for posting all the steps.