I recently discovered that you can customize VSC a bit further and bring through oh-my-posh from the integrated terminal, to make it look like the below:
Obviously this is all personal taste, and in all likelihood I would probably change this after a week or so but its nice to change the look easily.
VSC - Icons
I have downloaded VSCODE icons, this allows you to associate your tools like Azure and Terraform etc. with the icons for those products, makes it look a bit nicer and also.
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
VSC - Auto-Complete - Terraform
In the TF module VSC add-in (https://marketplace.visualstudio.com/items?itemName=HashiCorp.terraform), by default it doesn’t give you templates like Bicep does, for example it wont show you anything if you’ve started creating a resource with “resource azurerm resource_group” etc, so what the following code does is display the bare minimum.
Code to add into settings.json for VSC.
"terraform-ls.experimentalFeatures": {
"prefillRequiredFields": true
},
Result after running resource “azurerm resource group”, like normal it will give you a list of things to pick from, but now it’ll do the below also when you hit return.
resource "azurerm_resource_group" "name" {
location = "value"
name = "value"
}
You can see its auto populated the location and name fields, which are the bare minimum you need, you could also use things like tags etc.
An example of creating a VM;
resource "azurerm_virtual_machine" "name" {
location = "value"
name = "value"
network_interface_ids = [ "value" ]
resource_group_name = "value"
vm_size = "value"
storage_os_disk {
create_option = "value"
name = "value"
}
}
It’s not only good to ensure consistency with your builds but also for learning purposes, what makes up your build, for example in my below example, in the space of maybe 5-10 minutes I was able to build this “learn environment” and use symbolic links for resources. The resource group itself will be one of many resource groups for networking that would live in my networking subscription within my landing zone configuration, then I can setup RBAC so only network teams can access this resource group to make changes and they’ll be separate from my compute resources etc. Just an idea I am toying with, each will have its own separate state.tf file hosted within an azure storage blob. The example below is building the RG, then the RG is being referenced, then the VNET and so on - I have also included some NSG bits in this instance playing with some FTP/SFTP traffic, purely as something to toy about with in a sandbox environment. Ultimately, I was able to quickly build this up due to the autocomplete function, which for some reason is still an experimental feature. ;)
#Create the RG
resource "azurerm_resource_group" "rg-ft-learn-network" {
location = "ukwest"
name = "learn-network"
}
#Create the VNET
resource "azurerm_virtual_network" "learn-vnet" {
address_space = ["10.0.0.0/16"]
location = azurerm_resource_group.rg-ft-learn-network.location
name = "${azurerm_resource_group.rg-ft-learn-network.name}-vnet"
resource_group_name = azurerm_resource_group.rg-ft-learn-network.name
}
#Create the NSG
resource "azurerm_network_security_group" "learn-nsg" {
location = azurerm_resource_group.rg-ft-learn-network.location
name = "${azurerm_resource_group.rg-ft-learn-network.name}-nsg"
resource_group_name = azurerm_resource_group.rg-ft-learn-network.name
security_rule {
access = "Allow"
description = "Allow SFTP"
destination_address_prefix = "*"
destination_port_range = "22"
direction = "Inbound"
name = "Allow-Inbound-SFTP"
priority = 100
protocol = "Tcp"
source_address_prefix = "Internet"
source_port_range = "*"
}
security_rule {
access = "Allow"
description = "Allow FTP"
destination_address_prefix = "*"
destination_port_range = "20-21"
direction = "Inbound"
name = "Allow-Inbound-FTP"
priority = 101
protocol = "Tcp"
source_address_prefix = "Internet"
source_port_range = "*"
}
}
#Create the Subnet
resource "azurerm_subnet" "learn-subnet" {
address_prefixes = ["10.0.1.0/24"]
name = "${azurerm_resource_group.rg-ft-learn-network.name}-subnet"
resource_group_name = azurerm_resource_group.rg-ft-learn-network.name
virtual_network_name = azurerm_virtual_network.learn-vnet.name
}
Lastly - If the autocomplete does not load, then pressing CTRL+SHIFT+P and enabling Terraform Language Server should then make it work. See; https://github.com/hashicorp/vscode-terraform/issues/318.
VSC Themes - Synthwave84
You can use thousands of different themes within VSC, for now I am using SynthWave84, which looks cool and gives you the option to make things glow a little.
https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
I think its important to have a look through all the different themes and see what fits, plus you can also get bored of x theme so its nice to have lots to use depending on your requirements.
Terminal - oh-my-posh
It’s been mentioned lots of times but you can make the terminal look a lot nicer, this is all done via the below link:
https://ohmyposh.dev/docs/installation/windows
I have also set it to use a theme called Hunk and have modified the .Json file to use the below in the template file on line 86:
{
"background": "#86BBD8",
"foreground": "#ffffff",
"invert_powerline": true,
"powerline_symbol": "\ue0b2",
"style": "powerline",
"template": " \ufd03 {{ .Name }} ({{ if .EnvironmentName | contains \"AzureCloud\" }}{{ \"Global\" }}{{ else }}{{ .EnvironmentName }}{{ end }}) ",
"type": "az"
},
If you look at the initial screenshot, you’ll see that now my current sub (for Azure) is highlighted so I know at all times which sub I am interacting with, I intend to look into things like tenant ID also etc at a later date if needed, but you can add things like current containers and the type, if you take a look at the theme native azure, you’ll see in addition to the code above, the following for AKS. The module also shows your ms for the task, and the current shell (pwsh) - plus loads of other bits, really handy.
{
"background": "#ebcc34",
"foreground": "#000000",
"leading_diamond": "\ue0b6",
"style": "diamond",
"template": " \ufd31 Kubernetes {{.Context}} cluster {{if .Namespace}}- {{.Namespace}} namespace{{end}} ",
"trailing_diamond": "\ue0b0",
"type": "kubectl"
},
I have only just scratched the surface with this but its really cool and handy. Once you’ve installed and setup your theme, you can then open the terminal within VSC and it should pull through everything and look like mine.
VSC - Fonts
It’s probably worth mentioning that if you don’t use a PowerGlyph font then you will see artifact blocks instead of symbols, so make sure you use a PL font:
A great website is https://www.nerdfonts.com/ which has all the fonts you could need, I personally use the following in my settings.json for CaskaydiaCove NF, size 14 as I use a 2k(27") screen.
"editor.fontFamily": "CaskaydiaCove NF",
"editor.fontSize": 14,
"terminal.integrated.fontFamily": "CaskaydiaCove NF",
"terminal.integrated.fontSize": 14,
This concludes by overview of my VSC setup.
I hope the above has inspired you to play about with your setup a bit more, certainly making VSC a nicer place to be (considering you’ll be there a lot) is probably just as important as your desk layout etc.