I use VS Code as my text editor, one of the features I really like about VS Code is that it will format our file on save. Which saves needing to run a CLI tool to do it. For example, running prettier. As part of the formatting on save you can set an option to organise your imports as well. If you open your settings.json, you can add a section like this: ...
TIL: How To Add Custom Syntax Highlighting Rules in VS Code The other day (a few months ago) I was comparing Goland and VS Code for Golang development. I noticed Goland by default seemed to have nicer syntax highlighting, so I started looking at what I could do in VS Code to do this. Before After It turns out we can do this with our own custom rules using editor.tokenColorCustomizations. To do this go to our settings (settings. ...
Devcontainers This article assumes you are already familiar with dev containers. You can read more about devcontainers here. In this article, we will go over how you can personalise your dev containers. Devcontainers allow us to create consistent development environments. One of the main advantages of dev containers is we can provide a “one button” setup for new developers. We do this by using a container (Docker), and we end up developing inside a container. ...
TIL: How to Separate our Golang Tests Sometimes we want to be able to run our unit tests and integration tests separately. In Golang we can do this using build tags, build tags are used to tell the compiler important information when we run go build 1. Let say we have a file called package_test.go. By adding // +build integration to the top of the file without any whitespace. This test file will only be run when we specify the tags in our test command go test --tags=integration. ...
Netlify CMS Deprecated Since I have written this post Netlify CMS has been deprecated in favour of decap-cms. Thanks to @roneo for raising this issue. So the Netlify CMS part of this article is no longer relevant. I also no longer use this workflow, I instead just create articles locally using a script now!!! In this post, I will go over my new workflow for creating articles/posts that I now use with my new (Hugo) blog. ...
In this post, I will show you some useful and perhaps not as well-known Vim commands I use with VS Code. As per this previous post, I use this extension for Vim emulation in VS Code. My keybindings.json file. I will repeat some of the settings I showed there for posterity. Useful Commands xp: To swap two characters around i.e. ab -> ba (cursor on a) ctrl + enter: Creates a new line below and stays in NORMAL o: Will do the same but put you in insert mode ctrl + shift + enter: Creates a new line above and stays in NORMAL O: Will do the same but put you in insert mode dtx: Deletes everything up to x character dfx: Delete everything including x character yi": Yank everything between quotes " vi""+p: Replace everything between quotes with what is yanked va{Vy 1: Yank the entire function assuming the language uses braces like golang or C "_dd 2: Delete without adding to register "aY 2: Yank into named register a "ap 2: Paste from named register a %x``df( 3: Deletes surrounding function i. ...
TIL: How to Add Hugo Shortcode Snippets in VSCode Hugo shortcodes are a great way to add functionality to our Hugo blog. However, I find them fiddly to add. So let’s see how we can leverage VSCode snippets to make it easier to add shortcodes to our markdown files. First, open the command palette, then select Snippets: Configure User Snippets. In my case, I want to add snippets specific to this project so I select New snippets file for '<project>'. ...
Today I will go over my current VSCode setup covering both extensions and settings. Out of date This article may be out of date, by the time you are reading this. It is accurate as of 16th October 2022. Extensions Here we will go over some extensions I find very useful: Full list of my plugins here Better Comments Link: Better Comments As the name implies it improves your comments. Makes them look nicer if you add certain annotations. ...
Visual Studio Code and WebStorm are two popular editors for developing React Native/Expo apps. These editors have lots of useful features, such as syntax highlighting, git integration and auto completion. However working out to debug Expo apps can be a bit confusing. One of the main advantages of working in an editor/IDE (let us be honest Visual Studio Code is pretty close to an IDE) is being able to use a debugger (and breakpoints) to go through your code line by line and see which part of your code is not running as expected. ...