Member-only story
Under-the-hood of VSCode auto formatters (e.g Prettier)
VSCode has become a staple for many developers local environment. One of the reasons is the powerful extensions which can be run from within the IDE itself, from type checking to code auto formatting. Here we will take a look at an overview of VSCode and then dig into how the auto formatting works. The final task will be to build a small version of Prettier (or eslint — fix) which can run as a VSCode extension. The goal is to understand the mechanics at work inside this kind of extension and some key differences with other types of extensions.
This is part of my “under-the-hood of” series:
- Web bundlers (e.g. Webpack)
- Type systems (e.g. TypeScript)
- Test runners (e.g. Mocha)
- Source maps
- React hooks
- Apollo
A video for this post can be found here. A part of my “under-the-hood of” video series.
The article today will be broken down into 3 parts:
- Electron
- VSCode extensions
- Our own Prettier extension
Electron
Under the hood VSCode is built with Electron. Electron is a software framework which allows for the development of desktop GUI applications using web technologies. It combines the Chromium rendering engine and the Node.js runtime. It was recently added to the OpenJS Foundation.
