When I started on my network automation journey, I didn’t pay too much attention to what I was using when creating my code. I knew that programmers used Integrated Development Environments (IDEs), but since I was mostly editing smaller text files I kept to simple text editors like Nano or Vi. I attended Red Hat’s AnsibleFest in Austin, TX and saw that many people in the network world (both vendor reps and other network engineers) would use much more advanced text editors. One of the most popular ones being used was Atom. I ended up having a conversation with some other co-workers and a few Red Hat reps, and some suggested trying out Microsoft’s Visual Studio Code (commonly referred to VS Code). After having some time to try out both, I have chosen to stick with VS Code. While this blog post isn’t going to do a side by side comparison of text editors, it will show some of the highlights that led me to choose VS Code when creating network code.
First, if we are going to use VS Code, it needs to be installed. I will be installing this on a Fedora 28 laptop that I am using (the computer used for my home lab from an earlier post has been hijacked for Fortnite and Overwatch by my teenage daughter) for labbing and blogging now. You can go to the VS Code setup doc here for installation instructions on other platforms (Windows, macOS, or other Linux Distributions).
VS Code is available from a dedicated repository from Microsoft, so it can be updated with dnf. First, we need to import the GPG signing key, and then create the repo file.
[otaku@otaku ~]$ sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
[otaku@otaku ~]$ sudo sh -c 'echo -e "\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
After creating the repo, we can check for updates and install VS Code via dnf. The package name is "code."
[otaku@otaku ~]$ dnf check-update
[otaku@otaku ~]$ sudo dnf install code
After installation, you can launch VS Code either from the applications menu (under accessories), or you can launch it from the command prompt using "code." VS Code should open and you'll be greeted with a screen that looks like the one below:
There are a few cosmetic things you might want to do before jumping right into editing: setting your theme and downloading extensions. Themes are pretty self-explanatory, but setting one is vital and different to each person as they can make things unreadable and cause stress to your eyes when looking at certain color combinations for too long. Just click on the "Color Theme" button in the middle of the right side of the screen to bring up the basic color themes that come with VS Code.
If you don't like any of the preset color themes, select the option to install additional themes and browse for others.
After getting your color theme setup, I would suggest installing a few extensions that will help with syntax highlighting and command completion. You can browse the VS Code Marketplace to browse available extensions. Since I do most of my automation with Ansible, I downloaded the Ansible extension. This extension provides command auto completion based on Ansible documentation, syntax highlighting, and my personal favorite the ability to run a playbook from various locations (including a local Ansible install) from within VS Code. To install the extension, press "Crtl + P" within VS Code and enter "ext install vscoss.vscode-ansible" in the text box that opens. I also installed an extension for Cisco syntax highlighting. You can install it like the last extension with "Crtl+P" and "ext install jamiewoodio.cisco."
Now we can jump into using VS Code for our network code. I will be editing an Ansible playbook that I will be using for an upcoming blog post to highlight what I found really valuable when using VS Code. Now as a quick background, all of my previous networking code was done with some combination of commands run from the command line (git), and command line text editors like nano and vi. While jumping back and forth between playbooks, variable files, inventory, etc. wasn't too bad, as the code got more complex the switching became more cumbersome.
With VS Code you can open an entire folder, and it will open all of the contents of said folder to make it much easier to switch between files. Navigate to File > Open Folder to bring up a window to browse your filesystem. In this example, I have a folder named "basic-acl" that contains the inventory, jinja2 template, playbook, and variable folder for an Ansible playbook that creates an ACL in Cisco IOS syntax. Upon selecting the folder, the contents will be displayed on the left side of the VS Code window, as seen below.
There will be tabs along the top for the different files within the folder, and the left side will contain a structured view of the folder contents. You can immediately see how this will improve jumping back and forth between files when editing your code. If you installed the Ansible extension and enabled it, you should notice some quality of life features of VS Code. First, syntax highlighting breaks down the different parts of each line. Second, VS Code keeps track of tab notation with the use of vertical lines. While it may not seem much in the picture above, this comes in real handy when you create playbooks with long lists of tasks. Try opening up a folder containing an Ansible playbook and variable files, and see the difference syntax highlighting and tab indentation makes it easier to read.
The next big feature of the Ansible extension for VS Code is being able to run a playbook from within the app itself. If you are like me, there is a lot of trial and error when creating playbooks. Simply right-click on an Ansible playbook, and take note of the options that appear at the bottom of the menu that pops up:
You can run your Ansible playbook from a docker container, a local ansible install, a cloud shell, or on a remote ansible server. If you choose to Run Ansible Playbook without making any settings changes, the playbook will run with the default inventory. For my playbooks, I create an inventory file specific to the playbook. There is an ansible.customOptions setting that can be modified to specify the inventory to use. As long as I use the same inventory file name for my different playbooks, this will allow me to easily use the Run Ansible Playbook feature. Let's navigate to the settings and get our inventory file set.
First, you need to click on the gear at the bottom left of the app to pull up another menu. Click on "Settings."
That will open a new tab for settings. At the top you will see "User Settings" and "Workspace Settings." User settings are global, and workspace is specific to a given workspace (you can create & use multiple workspaces). Within each you have different sub-options for different type of settings to modify. Here I will navigate to Extensions and then Ansible to configure specific settings to the Ansible Extension.
Near the bottom you can see "Ansible: Custom Options." Here, I will specify "-i inv" so that the inventory file "inv" is called when I choose Run Ansible Playbook. All I have to do now is ensure I always create an inventory called "inv" for my playbooks. Settings are changed as you enter them, so there is no "save" button once you are done. Let's try to run the sample Ansible Playbook now. When you select "Run Ansible Playbook in Local Ansible," a terminal will pop within the bottom of the app.
BOOM! As you can see above, the switch "-i inv" was run with the playbook, and it ran successfully. Having this new terminal window open allows you to quickly move through your various files and retry running the playbook should you run into issues. This is the single biggest enhancement that drove me to stick to VS Code.
The other big thing that got me to switch from coding at the command line was the Git integration. While this isn't a feature specific to VS Code, it is a great feature to have. If you look at the VS Code app, the middle icon on the left hand side is the source control of your current project. Since I already have a repository setup on GitHub for this playbook, it is currently tracking changes. See my Commit to Git blog post for how to utilize GitHub as your source control for automation.
Clicking on it will open the Source Control pane to the left of where you edit your files. It will replace the tree structure pane where you could see the structure of all files in the folder you opened.
This pane will list all the files that have changed. It can be new files, or files that have been modified. If you hover over either the different file names, or the bolded "Changes" text, you will see additional buttons that can be pressed. Clicking these buttoms next to the different files will make the action only apply to that file, but if you click the button next to "Changes" it will apply to all files that have changed.
There is a an arrow that looks like a u-turn that is used to discard changes. There is a + sign to stage changes (git add). Doing this next to "changes" adds all files. Once you have added the files that have been changed, you can press the check mark at the top of the pane to commit the changes. After that, you can click on the "..." next to the check mark, and it will give you all of the other options you have for git. It is there that you can select "Push" to push your changes to your repository. These are the basic functions of git that mirror what I showed in my previous blog post. There are other options available in the "..." menu if you are doing something more advanced with git.
Conclusion
Can you create quality network code only using the command line? Of course. However, if you are already trying to increase efficiency and quality of your network configurations and changes, you should apply the same qualities to your coding. I am not here to say that VS Code is the best out there, but it is the one that I have decided to use. Try it for yourself, and explore others such as Atom to see what is best for you. No matter what choice you go with, you will find that using a more advanced editor over command line tools can greatly increase your productivity when creating code. Please leave comments if you use a different text editor with what you like about it. Additionally, if there are tips and tricks that you use with VS Code for creating network code, please feel free to share them below!
Network Otaku 