My Environment

I’ve been meaning to share my development setup for a while now, and I figured it’s finally time. I primarily use VS Code for my projects, and I’ve customized it quite a bit to fit my workflow. This post will cover the VS Code extensions I rely on and other important settings.

VS Code Extensions

These are the extensions I find essential for my daily development:

  • Live Server: Launch a development local Server with live reload feature for static & dynamic pages.
  • Code Runner: Run scripts directly in your VSCode.
  • Auto Rename Tag: Keeps your HTML and JSX tags in sync when renaming. A real time-saver!
  • Change Case: Quickly switch between different naming conventions (camelCase, snake_case, etc.).
  • Choose A License: Easily add a license file to your projects. Important for open-source work!
  • ES6 String HTML: Provides syntax highlighting and other goodies for HTML within JavaScript strings.
  • Multiple Cursor Case Preserve: Makes working with multiple cursors even better by preserving case.
  • Prettier: My go-to code formatter. Keeps everything consistent and readable.
  • Symbols: Better icon theme for VS Code.

VS Code Settings

Currently, the only setting I’ve significantly customized is the font. I use the excellent Cascadia Code font for my VS Code editor. It’s highly recommend it and it’s my favorite code font too!

Custom Theme: Demon

I’ve created my own VS Code theme called “Demon” by customizing the popular GitHub Theme. You can find the theme files on GitHub: demon-vscode-theme.

Installation

  1. Install the GitHub Theme: First, install the GitHub Theme from the VS Code Marketplace and set it to the “Dark default” theme.

  2. Copy the Theme Code: Go to the demon-vscode-theme repository. Copy the entire code from the theme.json file.

  3. Locate the GitHub Theme Files: Open your file explorer and navigate to the .vscode directory. Inside, find the folder for the GitHub Theme extension. The exact path might vary slightly depending on your operating system. Look for a folder with a name similar to github.github-vscode-theme-[version].

  4. Replace the dark-default.json file: Inside the GitHub Theme extension folder, you should find a dark-default.json file. Make a backup of this file first! Then, replace the contents of dark-default.json with the code you copied from the theme.json file in the “Demon” repository.

  5. Restart VS Code: Restart VS Code for the changes to take effect.

If everything is set up correctly, your VS Code should now be sporting the “Demon” theme!

My VS Code Setup

There’s another theme that I like a lot, which is the Aura Spirit Dracula Theme. It’s a really good one!