Why VS Code

My first code editor was Notepad. Yep, that old school Windows program that you can use to write a quick note. Making simple websites with HTML and CSS was a breeze. I could write my code, save it, and open it in my browser to see the results. It was a great way to learn the basics of web development.

But, Notepad++ was my first real code editor. It was a free download that allowed me to write code in a more organized way. I could write my code in different colors, and it had a built-in preview that would show me what my code would look like in the browser.

When I was learning Java, I got into IDEs like BlueJ and Eclipse.

In college, I used Emacs and fell in love with the simplicity. I would run into Vim users who would tell me that I should switch to Vim. I tried it, but I just couldn’t get into it. But I understood the power of Vim with its key bindings and shortcuts.

Text ediotrs made me realize the power of simplicity combined with a few plugins, it could be as powerful as an IDE yet lighter and faster.

I’ve tried a lot of different code editors over the years. I’ve used Sublime Text, Atom, Brackets, and even Visual Studio. But, I always loved VS Code. It’s simple, lightweight, and has a ton of extensions that make it a great code editor.

Getting Started

The first thing is to install Visual Studio Code. You can download it from the Visual Studio Code website.

I also typically like signing in with my Microsoft account. This allows me to sync my settings across all my devices.

Extensions

Extensions are what make VS Code integral in my workflow. I have a few extensions that I use on a daily basis. Here are the ones that I use

Databases

• MongoDB for VS Code

• Prisma

Docker

• Docker

• Dev Containers

HTML and CSS

• Auto Rename Tag

• HTML CSS Support

• IntelliSense for CSS class names in HTML

• PostCSS Intellisense and Highlighting

• PostCSS Language Support

• Tailwind CSS IntelliSense

Linting

• ESLint

Markdown

• Markdown All in One

• markdownlint

• MDX

• MDX Preview

NPM

• npm Intellisense

Python

• isort

• Pylance

• Python

React Native / Expo

• Expo Tools

Ruby/Rails

• endwise

• ERB Formatter/Beautifier

• ERB Helper Tags

• Rails

• Ruby

• ruby-robocop

• Ruby Solargraph

• Slim

• vscode-gemfile

• VSCode Ruby

Workflow, Config, Other

• GitHub Copilot

• GitLens

• Path Intellisense

• Prettier - Code formatter

• YAML

Themes

I like to switch up my themes every now and then. Usually dark themes are my prefernce but, I do occasionaly like a lighter one.

• Cobalt2 Theme Official

• Community Material Theme

• Dracula

• Material Theme

• Material Theme Icons

• vscode-icons

Settings

You can customize VS Code to fit your needs with settings as well.

You can access the settings in two ways — JSON and UI. And you can apply your settings for your user or a specific project/workspace.

To visit your settings, you can go to File > Preferences > Settings. Or you can use the keyboard shortcut CMD + , on Mac or CTRL + , on Windows.

Another way is through the Command Palette. You can open the Command Palette with CMD + SHIFT + P on Mac or CTRL + SHIFT + P on Windows. Then type settings and select Preferences: Open Settings (JSON) or Preferences: Open Settings (UI).

Here’s an example of the JSON settings I have for Typescript

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "typescript.preferences.importModuleSpecifier": "relative",

Conclusion

VS Code is a powerful tool that can be used as alternative to IDEs. I like to keep things simple and clean, occasionaly checking my extensions and removing ones I don’t use anymore. I hope this post helps you get started with VS Code and find some extensions that you like.