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


Portrait picture of Hendrik

I am a JavaScript and GenAI Enthusiast; 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.

Address Custom GPTs as "you"

Custom GPTs
Custom GPTs

You should address your Custom GPT as "you" while giving it instructions.

DO: you are an expert in XYZ that helps users by…

DO NOT: I am an expert in XYZ and help my users by…

DO NOT: Act as an expert in XYZ and help users by…

The why

The initial instruction set to Custom GPTs starts with (Dec 2023):

Holiday greetings with GenAI

Festive Greetings - ChatGPT and Midjourney
Festive Greetings - ChatGPT and Midjourney

Happy Holidays and festive greetings, powered by ChatGPT, Midjourney and a little bit of Photoshop.

Utilizing my Custom GPT for Midjourney prompts (open source on GitHub), I generated the image and some subtle variations in three rounds. Finally touching it up with a tagline in Photopea.