Visual Studio Code
February 26, 2019
Getting to know Visual Studio Code better over the last couple of years lead me down some new and interesting learning paths when it comes to finding ways to deploy web applications, UI and other front-end related items hassle-free.
Coming from Visual Studio 2015 and before that Eclipse, I was used to having my IDE do most, if not all, of the work when it comes to the running of a CI/CD pipeline. Thankfully those dev-shops having already setup environments/configs allowed me hassle-free on-boarding and deployments. The senior and principle developers already had a tried and tested workflow to follow and making sure other developers followed it was important.
Now that I’ve started to look into doing more full-stack work for my own projects I wanted an easy, hassle-free way to set up deployments using some built-in Extensions for Visual Studio Code (VSC) to achieve the same feel and flow like in those dev-shops of projects past.
The Microsoft Azure extensions for VSC along with Microsoft’s free Azure offering for new devs ($200USD credit and free tiers in the USA) made it the perfect opportunity for trying out. Just make sure to stick with the free tierwhen deploying apps – otherwise Azure will burn through that $200 fast!
If you’re unfamiliar with Azure’s roster of products, here is the comparison between Azure and AWS and between Azure and Google Cloud. This helped me learn the equivalent service from one to the other.
Azure Extensions List
This was going to be a long list of extensions but the Azure Tools extension coupled with Azure Repos and Azure Pipelines does the heavy lifting you’ll need and uses other azure extensions to facilitate various aspects of the features mentioned.
Get web site hosting, SQL and MongoDB data, Docker Containers, Serverless Functions and more, all on Azure, all from VS Code, in this one extension from Microsoft.
This is a must have that replaces several individual Azure extensions and adds the Azure Explorer inside Visual Studio Code. This lets you easily navigate around your Azure portal resources and can manage most items right here.
- The Azure App Service extension lets you quickly create sites, deploy them, view logs, and even set environment variables (such as a Connection String), right from within VS Code.
- If you use SQL Server or Azure SQL Databases to store data for your applications, the SQL Server extension enables SQL database connectivity directly within VS Code. With handy commands for connecting to database servers or instances, in-editor query results views, and IntelliSense completion for SQL, you’ll be able to validate your code is manipulating your data properly without leaving VS Code.
- Have a static site you want to host? You can use Azure Storage to host your site quickly and inexpensively. The Storage service also provides massive scale blob, file, and document storage with low latency and high throughput. VS Code’s Storage support lets you deploy static sites, browse and edit Blob Containers, File Shares, Tables, and Queues.
- Store your Docker images in private Container Registries using the Azure Container Registry, and run them in the cloud using App Service. VS Code’s support for Docker helps you author Dockerfile and docker-compose files with rich completions (IntelliSense), syntax highlighting and checking, and linting support. The Explorer view makes it easy to build, run, and manage your local and remote containers and images.
- The Azure CLI extension makes it easy to manage all of your Azure resources from a terminal. If you write CLI scripts, VS Code’s support provides syntax highlighting and completions (IntelliSense) for the CLI commands as well as your resources in Azure. You can execute one or more commands and even see the results in richly formatted JSON, document.
- You can also automate the management of Azure resources using Azure Resource Manager (“ARM”) templates. VS Code’s support for ARM makes it easy to author these JSON documents with rich editing and navigation experiences for deployment templates and template language expressions, including completions (IntelliSense) for TLE function names, parameter references, signature help, Go to Definition, Peek Definition, and Find All References (Shift+F12) as well as Errors and Warnings.
- Develop and connect your IoT applications to Azure using the Azure IoT Toolkit. With this extension, you can interact with an Azure IoT Hub, manage connected devices, and generate code for your Azure IoT applications.
This is a small extension that is critical for me when automating front-end deployments. Basic YAML validation is built into VS Code, but now you can have syntax highlighting that’s aware of the Pipelines YAML schema. This means that you get red squigglies if you say
tasks: where you meant
task:. IntelliSense is also schema-aware.
This extension allows you to connect to Azure DevOps Services and Team Foundation Server and provides support for Team Foundation Version Control (TFVC). It allows you to monitor your builds and manage your pull requests and work items for your TFVC or Git source repositories.
So there you have it, with these 3 extensions you can gain pretty good coverage over the most used Azure services to quickly and easily deploy your applications. In another post, we’ll deep dive into how to lift a local application to become a production-ready Web Application.
Use different Azure extensions, or got some tips and tricks to using the ones I mentioned above? Let me and others know in the comments!
Originally posted on dev.to
February 25, 2019
I’ve noticed several VS Code extension posts and have been thoroughly disappointed with the mentioned extensions with the exception of a couple so I thought I’d compile my list of plugins that I personally use.
I think these are helpful for any primarily front-end developer who wants to get the most out of using Visual Studio Code. Some of these you’ll already have – as they’re the most recommended extensions on the platform – but others you may not.
Make VS Code Easy to Read
- Beautify – Makes HTML, CSS and JS very easy to read by de-minifying and properly spacing your horrendous markup.
- Better Comments – Create more human-friendly comments in your code. I use this all. the. time. It’s a mandatory extension for our dev team.
- Bookmarks – It helps you to navigate in your code, moving between important positions easily and quickly. I use this in conjunction with MetaGo to be almost mouse-free while coding.
- MetaGO – Wicked fast cursor movement/selection for a focus on keyboard usage. This changed how I use VS Code forever. Seriously.
- Log File Highlighter – Just as it sounds, gives VSCode .log file support so you can actually read those log dumps without your eyes bleeding.
- Guides – Now you don’t have to collapse and open all you’re freaking elements to figure out nesting. This works really great with Beautify mentioned above and Rainbow Brackets, below.
- Rainbow Brackets – Highlights the current bracket-set you’re in and colours the rest differently for very easy location identification. If you’re a heavy JS developer this is a great extension.
- Image Preview – Shows an image preview in the gutter and on hover. So key for checking if I just referenced the correct image/icon.
- GitLens – One of the most used extensions for sure; Gitlens is a must have for VS Code and just makes the Git experience so much better all around. Pair this with the .gitignore and .diff extensions for good coverage.
Faster Coding inside VS Code
- CSS Peek – Inspired by a similar feature in Brackets called CSS Inline Editors. One of my favourite Bracket features now in VS Code.
- stylelint – We lint our JS, so why not our LESS/SASS/CSS too? Great for quickly cleaning up sloppy CSS.
- Live Sass Compiler – Sure, you got Gulp, Webpack, NPM, Grunt but sometimes you want to compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload. This does just that.
- Live Server – Best local development Server with live reload feature for static & dynamic pages (even PHP!).
- Version Lens – Update dependencies/devDependencies to latest version for specified package.json. Recommended by: Mihail
- DotENV – Adds support and highlighting for .env files – something I rely on heavily pushing to Heroku, Netlify, etc…
- Polacode – Highlight code, snap a really nice screenshot with your code theme’s colours. Great for tutorials or documentation and you want to provide code examples.
Multiple Instances of VS Code
- Settings Sync – Uses a private gist to save a setting file so you can sync Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions between multiple VS Code instances. I use this to keep my Laptop, Work Desktop and Home Desktop all in sync with two simple commands.
- EditorConfig – Override user/workspace settings with settings found in .editorconfig files. I use this to enforce specific rules for the development team on a per-project basis.
So there you have it, while I have lots of other plugins more specific to the environments I use (Front-End Web + Azure Cloud) hopefully you’ll find these extensions useful in your daily use of VS Code!
Let me know if you already use them and if you love or hate them. Or, some extensions I might have missed and should try out!
After getting some feedback in the comments of you guys showing me some of your favourite VS Code extensions here are some new ones that I think are solid enough to also include:
- Import Cost – Shows the filesize cost of importing. – Recommended by: miku86
- Window Colors – Run multiple instances of VS Code? Have each window uniquely coloured so you don’t lose track of which project is in what window. – Recommended by: Jefry Pozo
- Prettier – Very “Pretty” markup cleaner. Used by Stackoverflow to display nice code snippits. But, doesn’t handle HTML inside
.js/.ejs/.jade/.pugtemplates so not the best if working with many static site generators.
This post was originally written on, dev.to