When I started Grit I was excited to find out that the Electron team is shipping types with Electron which expose the Electron API in your tooling. Since I am a fan of TypeScript I set up my dev environment to write my code in TypeScript as well.
After a few days of writing TS code to transpile it for my app, I started to get annoyed with the fact that I am transpiling code. And here is the reason:
After years of dealing with Babel and TypeScript, writing ES2015+ code directly for the browser feels very freeing.
No source maps to decode, no types to manage.
Losing the types would be a little annoying though. For me personally, in this one-man-project, I enjoy the types especially because they enhance the tooling.
Thankfully there is VSCode!
VSCode has introduced something that is called
jsconfig.jsonis a descendent of
tsconfig.json, which is a configuration file for TypeScript.
"allowJs"attribute set to true.
Setting up jsconfig.json For Electron
In order to get it to work satisfyingly for my Electron setup, I had to configure a few things. jsconfig.json is just a tsconfig.json so the options are the same.
First of all, I excluded
node_modules since I don’t want VSCode to type check all my dependencies.
compileroptions property, I set the
checkJs property to
Because I (have to) use CommonJS Modules in Electron I had to set the
module property to
commonjs so that
index.js files are resolved CommonJS-style.
And last but not least in order to be able to write ES2015+ code without warnings I set the
target property to
You can have a look at my config file right here.
Adding A Type Definition For HyperHTMLElement
default property on the required module. This is the code in question:
const HyperHTMLElement = require('hyperhtml-element').default;
I went to the trouble to actually add all the class properties in the definition which gives me the sweet sweet code completion feature in VSCode. If you need it you can pick it up from here.