#RevTWIL: Visual Studio (VS) Code Extensions

At Revelry, we believe in sharing and learning from one another (beliefs that are rooted in our Core Values). Among the many things we do to encourage internal knowledge exchange is to have a different team member present at each week’s Engineering Meeting. These presentations don’t have to be lengthy, formal, or complicated; in fact, many are brief, but also powerful in that they teach our Revelers something new, inspire conversation, and encourage collaboration.

In the spirit of sharing, we share our This Week I Learned presentations (aka RevTWILs”) here. We hope you find them helpful.

THIS WEEK: Front-end software developer Ross Garfield shares some of his favorite VS code extensions:

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