Edit serverless YAML templates in VSCode like a pro
Tags: serverless, aws, vscode, cloudformation
Published: 2019-09-26 11:16:52

---
title: Edit serverless YAML templates in VSCode like a pro
published: true
description: Writing serverless and Cloudformation YAML templates is hard. This VSCode extension will save you hours and make your life easier 
tags: serverless, AWS, VSCode, CloudFormation
canonical_url: https://serverless-ide.com/blog/07-09-2019/edit-serverless-yaml-templates-in-vscode-line-a-pro
cover_image: https://images.unsplash.com/photo-1493946740644-2d8a1f1a6aff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2268&q=80
---

I am a huge fan of serverless technologies and AWS Lambda in particular. It is just incredible how simple it is to build reliable and scalable infrastructures so fast.

But there is a problem. No matter if you work with [Serverless Framework](https://serverless.com/) or [AWS SAM](https://github.com/awslabs/serverless-application-model) you have to deal with YAML and CloudFormation.

And working with YAML is hard...

How does the typical serverless application development cycle look like?

Initialization
You start with `serverless create` or `sam init` to put together a template.

## Configuration

Then add a couple of lambda functions, DynamoDB table maybe. Oh, you probably forgot how to create a DynamoDB stream or how to enable server-side encryption. So you need to open docs.

Go to google.com, type `DynamoDB Cloudformation` hit `I'm Feeling Lucky` open AWS Docs, and do a few `CMD+C/CMD+V` into your template file.

## Deployment

And now you are ready to deploy.

At this stage, the deployment framework will compile your code, put everything together into a zip archive and then send it over a network to AWS. It is a quite time-consuming task and might take a while.
Once everything is done you get the message about invalid CloudFormation template.

![Oh snap!](https://i.kym-cdn.com/photos/images/original/000/918/810/a22.jpg)

And you have to go to step 2 again.

I have been struggling with it for a while. I explored multiple options and VSCode plugins but could not find a solution that will satisfy my needs.
So I decided to build my own VSCode plugin.

## Solution

I want to introduce you to [Serverless IDE](https://marketplace.visualstudio.com/items?itemName=ThreadHeap.serverless-ide-vscode). The most advanced VSCode plugin for AWS [CloudFormation](https://aws.amazon.com/cloudformation/) and [SAM](https://docs.aws.amazon.com/lambda/latest/dg/serverless_app.html).

The project started as a hard fork of [vscode-yaml](https://github.com/redhat-developer/vscode-yaml), that eventually was mainly rewritten and tuned for better support of CloudFormation.

The main capabilities are:

## Smart autocompletion

In addition to properties and values completion, the plugin supports smart snippets for AWS resources. It handles the `Globals` template section in AWS SAM, so it will exclude fields that are already defined.

![ServerlessIDE autocompletion](https://raw.githubusercontent.com/threadheap/serverless-ide-vscode/master/packages/vscode/demo/autocomplete.gif)

## Go-to definitions and references

You can navigate between resources by `CMD+hover` over `!Ref` intrinsic function references.

## Validation

Serverless IDE validates your template and highlights potential problems, including invalid resources references.
In addition to that, it supports [cfn-lint](https://github.com/aws-cloudformation/cfn-python-lint).

![ServerlessIDE validation](https://raw.githubusercontent.com/threadheap/serverless-ide-vscode/master/packages/vscode/demo/validation.gif)

## AWS documentation at glance

This one is my favorite. You can get easy access to AWS documentation right in the editor.

![ServerlessIDE documentation](https://raw.githubusercontent.com/threadheap/serverless-ide-vscode/master/packages/vscode/demo/documentation.gif)

## Limited [Serverless Framework](https://serverless.com/) support

The plugin provides limited serverless framework support but its external imports are not supported just yet, and some use-cases with plugins might not be supported as well.


![ServerlessIDE serverless framework support](https://raw.githubusercontent.com/threadheap/serverless-ide-vscode/master/packages/vscode/demo/serverless_framework.gif)

The source code is available on [github](https://github.com/threadheap/serverless-ide-vscode).

Thanks for reading!

***

Hi! My name is Pavel and I'm a creator of [ServerlessIDE](https://marketplace.visualstudio.com/items?itemName=ThreadHeap.serverless-ide-vscode).
If you like the idea, give it a try!
Found a bug? Raise an issue [here](https://github.com/threadheap/serverless-ide-vscode/issues).
Have a suggestion or question? You can always [DM me on twitter](https://twitter.com/pvl4sov).

***


The main image source: https://unsplash.com/photos/tjX_sniNzgQ