Why VS Code?
There are a lot of IDE and text editor options out there, but Visual Studio Code (VS Code) has become the editor of choice among developers. Introduced by Microsoft in 2015, it quickly surpassed old standards like Atom, Sublime and my personal favorite, NetBeans.
Commonly referred to as VS Code to avoid confusion with its full-featured IDE cousin Visual Studio, it’s highly configurable via JSON files and has a rich ecosystem of extensions. Its integrated terminal makes managing Node.js and git processes a breeze. You can also sync your settings to keep the same familiar environment if you work on multiple machines and platforms. Did I mention that it’s free?
Extending VS Code
VS Code is particularly well suited for web development. According to Why VSCode, it “includes enriched built-in support for Node.js development with JavaScript and TypeScript, powered by the same underlying technologies that drive Visual Studio. VS Code also includes great tooling for web technologies such as JSX/React, HTML, CSS, SCSS, Less, and JSON.” It has an integrated terminal for managing Node processes and many other features.
Here is my current suite of VS Code extensions, grouped by category. I am always trying new things and tweaking my workflow, but these are the ones that have stood the test of time.
Utilities
These extensions help me to view and navigate within VS Code, regardless of file type or language.
- Bookmarks: Allows you to bookmark lines of code. Handy if you need to jump back and forth between lines of code that dozens or hundreds of lines may separate.
- Do not copy empty: Ever accidentally hit “copy” (cmd+c / ctl+c) when you meant to hit paste (cmd+v / ctl+v)? Yeah well, call me an idiot, but I do that all the time. This tool prevents me from blowing away my clipboard when I meant to use paste.
- Docker: Helps with setting up Docker containers.
- File Utils: A convenient way of creating, duplicating, moving, renaming and deleting files and directories. This extension is a must-have if you want to avoid mouse dependency!
- GitLens: Tells me the Git history of a file or line of code. Helpful when you want to view change history in a file while working on it.
- Open in browser: Let’s you right-click on a file and open it in the web browser. Handy for previewing simple HTML files.
- Print: For those rare occasions when you might actually want to print a document from VS Code, this prints fully rendered Markdown.
- Sort lines: The name says it all, and yes, you need an extension to sort lines.
- vscode-icons: Adds file-type icons to the VS Code Explorer sidebar. I know some of you think of the sidebar as a crutch that slows you down, but I still use it a lot.
Code Completion and Linting
Forget a semicolon? Don’t remember a built-in function name or method? These extensions help write and debug your code. They cut down on your visits to Stack Overflow, W3Schools and WordPress Codex.
Since my focus is web development, I deal primarily with web server and browser technologies, including HTML, CSS, JavaScript and PHP. I also depend on Extensions to support whatever Node libraries and JS frameworks are currently in style, such as React, Vue, Angular, jQuery, etc.
- Auto Close Tag: Automatically adds HTML/XML close tag.
- Auto Rename Tag: Automatically renames paired HTML/XML tag.
- ESLint: Yells at me if I mess up JavaScript.
- HTML Boilerplate: When you need to generate a valid HTML page quickly. I usually use this for testing.
- HTML CSS Support: HTML id and class attribute completion.
- IntelliSense for CSS classnames in HTML: Provides CSS class name completion.
- Live Server: For testing PHP and React apps, and when you don’t feel like spinning up a Docker container.
- npm Intellisense: Autocompletes npm modules in import statements.
- PHP Intelephense: Php code completion.
- SCSS IntelliSense: Scss code completion, hover tips.
- Stylelint: Keeps CSS clean and functional.
- Vetur: For working on Vue.js projects.
WordPress Snippets: WordPress currently holds the top spot in CMS marketshare and continues to grow. It is the CMS we most often offer our clients, and it is nearly impossible to work in an agency environment without regularly working on WordPress themes and customization. Plus, with WordPress 5x’s commitment to Gutenberg, VS Code support for ReactJS is a must.
Formatting
Can’t find the closing tag for a block of code? Have trouble figuring out where nested blocks end and the parent block continues? Unable to make sense out of someone else’s jumbled or minified code? These extensions help you format your code and make it human-readable.
- Beautify: Formats javascript, JSON, CSS, Sass and HTML.
- Prettier: Disabled. I occasionally work on files that are formatted with Prettier, and I switch this on when I want to stay consistent with the current project.
Inactive, but there when I need them:
I have several extensions that I only activate when I need them. I don’t work on Drupal sites very often, but when I do, I switch on Drupal and Twig extensions. Same with ViewJS or huge HTML files.
- Apache Conf: Opens and formats Apache configuration files.
- Code Runner: For personal projects. Primarily used for Python.
- Drupal & Twig Snippets: For those rare occasions when I need to work on a Drupal site.
- Excel View: Opens Excel spreadsheets and CSV files.
- Highlight Matching Tag: For when you need to debug endlessly nested tags.
- Python: For personal projects. We don’t use Python for production sites.
- Twig: Again, for Drupal sites.
Bonus: Keyboard Shortcuts*
While it is possible to work in VS Code and never touch your mouse, I have found it difficult to remember the plethora of keyboard shortcuts to wean myself off the Explorer sidebar. Here is my current cheat sheet that I am slowly committing to memory.
- cmd+shft+p: command palette
- cmd+d: search
- cmd+p: search for files
- cmd+opt-c: toggle case-sensitive search
- ctrl+tab: navigate between files
- ctrl+w: navigate between windows
- cmd+alt-arrows: switch between tabs
- cmd+w: close files
- cmd+shft+p: create, move, duplicate files
- html: asks if you want to use a template in HTML
- p*4>lorem: Emmet shortcuts in HTML
- li*5>p.item*3>lorem10: Emmet shortcuts in HTML
- ctl+shft+u: change selection to uppercase
- ctl+shft+up: change selection to lowercase
- git stash clear: For some reason, I always type “git clear stash.” This is an attempt to reprogram my neural pathways visually. So far, it isn’t working.
- cmd+k, then O: open file in new window
- ctrl+g: go to line #
*Note: I do most of my coding on a mac, so you may need to look up Windows equivalents for some of these.
Summary
I am constantly testing and comparing new extensions and trying to improve my workflow. Several other extensions didn’t make this list that I am still evaluating. Want to know more? Explore the Visual Studio Marketplace and build an extension library that works for you!
Check out some of our other great developer articles on the Envano blog! Not finding what you’re looking for? Fill out our contact form and let’s chat!