VS Code Extensions Our Software Engineers Can’t Live Without

VS Code extensions help software developers streamline and accelerate their workflow process; they enable additional languages, themes, commands, debuggers, and more. We recently asked our Revelry product dev experts to share their favorite, “must have” VS Code extensions. Check out their responses below:

Ross Garfield

Productivity:

• GitLens – Visualize author contributions with git blame
• GitHub Copilot – GitHub’s GPT-3 powered pairing partner
  • Write unit tests
  • Turn comments into functional code
• Better Comments – Categorize and differentiate annotations
• Color Highlight – Preview colors via hex code highlighting
• Live Share – Pair virtually, remote control access to codebase
• Clipboard Manager – Store history of copied/cut items
  • Try Maccy (mac app)

Shortcuts:

• Open in Github… – Open current file in browser
• Project Manager – Easily switch between repos
• **Auto Close Tag & Auto Rename Tag** – Quickly manage html tags
• Auto Add Brackets in String Interpolation – (Aptly named)

Formatting / Legibility:

• Prettier – “Opinionated” code formatter
• indent-rainbow – Make indentations more readable
• Error Lens – ID bugs more quickly with error highlighting
• Code Spell Checker – ID typos faster
• DotENV – Syntax highlighting for your .env

Elixir / Phoenix:

• ElixirLS – Code completion, debugging, formatting, etc.
• Phoenix Framework – Syntax highlighting support for HEEx
• Elixir Templates Formatter – Formats EEx files with htmlbeautifier
• Elixir Mix Formatter – Mix format’s elixir!

React / JavaScript / TypeScript:

• VS Code ES7 – React/Redux/React-Native/JS snippets
• vscode-styled-components – Syntax highlighting

Quinn McCourt

• Git Blame – Great to be able to see the context of the pr where a line of confusing/possibly buggy code
• ElixirLS – ElixirLS does a lot, but I personally recommend turning on format on save `

ElixirLS gives VS Code the ability to run the Elixir formatter on demand. To trigger and see what the keyboard shortcut is: View > “Command Palette…” then type “format”. My shortcut is ctrl + shift + I.

Using the Command Palette to launch the formatter. Shows the shortcut. Note: It can’t format a file when the project doesn’t compile.

You can configure VS Code to auto-format on save. To do this, go to Settings. You can get there using File > Preferences > Settings or ctrl + ,

Type “format” to filter the settings and towards the top it’s called “Editor: Format on Save”. Check that option. Now when you save a file, provided it compiles, it will be auto-formatted.

If you work on a team, make sure everyone is okay adopting the Elixir formatter. Otherwise, making one small edit to a large file reformats the entire file. Your small change gets lost in the noise of a format change. It may upset your team members.

Daniel Andrews

• Phoenix Framework for VS Code 
• Indent Rainbow
• Elixir Mix Formatter
• Auto Add Brackets
• GitLens
• Auto Close Tag

Jason Pollentier

• Project Manager 
• Open in GitHub, Bitbucket, GitLab 
• Markdown Preview
• Code Spell Checker

Matt Cain

• Daniel already listed this one, but it’s good: Auto Tag Close
• This is its little brother: Auto Rename Tag 

Readability/Quality:

• Error Lens
• Prettier
• Better Comments
• Color Highlight
• Code Spell Checker

React/JS:

• Snippets
• Comment Tagged Templates
• Styled Components

HotKey:

• Expand Selection to Scope

Creating your own custom snippets for repetitive stuff helps a lot, too. I console.log a bunch so I have:

"Print to console": {

"prefix": "log",

"body": [

"console.log('$1');",

"$2"

],

"description": "Log output to console"

}

It’s mapped to ctrl+shift+l and will place whatever the selected text is inside it.

You can actually make pretty impressive multi-step stuff with the carret.

Dan Murphy

Throwing out there that Emmet, which is baked into VSCode, is amazingly powerful, and you can add heex files to the config so that you can use it in templates.

fka Dan Horne

• Cody AI – Like CoPilot, but IMO, better – and it has a free version. Generate tests, explain code, document code, find code smells, or converse about what you want your code to do. Explain the whole app if you want. Natural language search your code.
• Alphabetical Sorter – Sort selection alphabetically. Great for use/alias/imports
• Bookmarks – Bookmark parts of your code and navigate quickly between them
• Bracketeer – Swap bracket/quote types, replace bracket/quotes with, remove them or select their content. Works on multiple selections.
• Dash – Open the documentation for the currently selected text in the Dash API documentation browser. Also supports Zeal and Velocity. Supports metric tons of docsets.
• Path Intellisense – Autocomplete filenames/paths
• Spaces Inside Braces – Does what it says on the tin: Adds spaces inside braces.

---

Elixir GitHub JavaScript JSON React VS Code