Ein Baum und seine Abenteuer



Utilizing ESLint rules to format JavaScript in VS Code

Today we will take a quick look at how to configure VS Code to automatically format your code according to your ESLint rules every time you save a file.

Let's add some style to our code, like color to a canvas, just easier.
Let's add some style to our code, like color to a canvas, just easier.

This assumes that you already have some ESLint rules in place. If not the airbnb rules are a good place to get you started.

Once you have rules setup and are hacking away in VS Code, the editor will start to complain every time you forget that "you should indent x" or whatever extraordinary rule your company might use. Especially if you are regularly engaged with different companies using different styles this becomes quite cumbersome. Luckily there are two plugins that can help us get around this.

Go ahead and install ESLint and Prettier. The first is a plugin you probably have installed already to help you see errors in your code-style. The later is a tool generally used to format code.

With prettier you can achieve great things, even format your code on commit which can greatly help to streamline coding-style across the team. For today we will only use it every time we save a file in our editor. To achieve this we simply add two lines to our VS Code settings.json.

"editor.formatOnSave": true,
"prettier.eslintIntegration": true

You can find your settings.json by using Preferences: Open User Settings from your Command Palette (⇧+⌘+P | ⇧+CTRL+P).

And now every time you save a file Prettier will format it according to your ES Lint configuration.

Art Palette Emoji
Art Palette Emoji

Author

Hendrik

I am a JavaScript Enthusiast and developer for the fun of it!
Here I write about webdev, technology, personal thoughts and anything I finds interesting.

More about me

Read next

Automate click-through testing with Puppeteer

Today we will test websites as real users would.
Today we will test websites as real users would.

Testing is one of the essential steps in software development. Yet, testing and especially manual testing that clicks through the application is a tedious job that we often shy away from. But it doesn't have to be. With great tooling coming out over the past couple of years we now have what it takes to automate click-through testing in our build process. In this post, we will look at why manual or click-through tests are important and how to turn this tedious and bothersome task into a fun one that drives our development forward.

Trying my hands at Deno v1.0

Denos awesome Dinosaur logo.
Denos awesome Dinosaur logo.

Following the release of Deno v1.0 I got excited to try my hands at it. These are my first experiences writing a simple tool in Deno.

A super fast introduction to Deno: Deno is the spiritual successor of Node trying to fix design mistakes that were made early on but recognized only late into the project. Deno supports TypeScript out of the box and relies on web-standards. In Deno you can import ES modules from any URL and use fetch like you would in the browser. To help unify the community on processes and workflows Deno provides a wide array of stdLibs and has build in solutions for bundling, testing and code formatting. You can read more in the Deno v1 release post.

Generative AI is here to stay!

"A path into the AI future" - generated using Midjourney
"A path into the AI future" - generated using Midjourney

Some reflections on what 2022 showed us about the future.

Generative AI describes AI that takes a prompt and generates something from it. Prime examples include Copilot which takes code or comments as a prompt to complete the code I want to write, ChatGPT which takes a chat message and replies with a human-like answer and Stable-Diffusion (or Dall-E, or Midjourney) which takes a prompt and returns a fitting image. All of these AIs made massive progress in 2022!