Bare minimum setup on VSCode to work on TS/JS projects

brenoalves

Breno Alves

Posted on October 6, 2022

Bare minimum setup on VSCode to work on TS/JS projects

There are plenty of VSCode Extensions on the marketplace but which one is necessary when it comes to working with TS/JS projects?

I'll cover the bare minimum extensions to work on a well-established TS/JS project and some extras which I find very helpful in my day-to-day tasks.


Eslint

When it comes to working with others developers in environments where we need to keep consistent code, we need to have something to make sure everyone is following certain rules and Eslint does exactly this.

To use this extension you need to install Eslint on your project as a development dependency and a configuration file.

npm i -D eslint
Enter fullscreen mode Exit fullscreen mode

you can find some good examples of configuration files at Eslint docs

Prettier and EditorConfig

Those two tools work alongside Eslint to help developers format and follow all patterns established.

To use Prettier you need to install it as a developer dependency and create a prettier config file (docs)

npm i -D prettier
Enter fullscreen mode Exit fullscreen mode

and for EditorConfig you will need to create an editorConfig file as well (docs)


Extras

Package Json Upgrade

This extension is very helpful when you need to easily visualize which package you can upgrade and which versions are available

Package upgrade view

Dev Containers

Dev containers is very helpful when working with docker containers.

Github Copilot

I can't put in a few words how much this is helpful nowadays... if you are not aware of what copilot is please check out some videos on youtube about it.

💖 💪 🙅 🚩
brenoalves
Breno Alves

Posted on October 6, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related