What I use in my craft

This article aims to be a list of many of the tools I use for various areas of my software development workflow, in the hope that they help others. I'll try and keep it updated when I find new stuff worth sharing.

Hardware

I’m a bit of a stationary and HID geek. I’ve used a variety of pens, notebooks and keyboards over the years, and have currently settled on these for my everyday needs.

• Uni-ball PIN 0.3mm, 0.5mm and 0.8mm fine liners. These use pigment ink, which means they are long-lasting ‘archival’ inks (they don’t fade), and are also resistant to bleeding when using water-based pens to colour over top. The variety of line widths allows for creating a more detailed sketchnote or diagram without having to go over lines multiple times to make them stand out.
• Tombow dual brush pens (pastel colours). These are great, coupled with pigment fine liners to highlight parts of a diagram or sketchnote.
• Rhodia A5 Wirebound Dot Notepad. I came across Rhodia notepads after listening to The Pen Addict podcast. The paper is smooth, works well with fountain pens, fine liners and felt tip pens, and the added dot-grid allows for writing straight as if on lined paper, as well as allowing diagrams to be drawn with straight lines as if on squared paper. The wire binding gives an easy tearaway option for disposing of temporary sketches, so it works well with my visual way of discussing architectures.
• ErgoDox EZ keyboard. Any mechanical keyboard which is compatible with the QMK firmware will give you the opportunity to add layers, macros, and shortcut keys to your keyboard, which can make you more productive and remove the need to constantly switch from keyboard to mouse. I’ve used a Microsoft Ergonomic Keyboard for decades, so didn’t want a non-split keyboard, and when I saw the ErgoDox, I was hooked. I can’t say the quirkiness didn’t add to the the appeal of it, but the comfort it gives is great. I now own two (one DIY, one prebuilt).

Software

Most of my development is done on a MacBook Pro (2015 edition), so I’ll focus OS X. Many of the tools I use, however, are cross-platform, so will work on Linux, and possibly Windows.

• iTerm 2. A powerful replacement for the OS X Terminal which supports split-panes and tabs.
• ZSH with Oh My ZSH. If you use the terminal a lot, Oh My ZSH will likely improve your productivity. You can customise the appearance of the prompt, as well as enable plugins which auto-complete options within apps such as Git, Docker, Helm, and Node. I use the theme kafeitu.
• Visual Studio Code. Over the years I’ve gone from using TextMate, to Sublime Text, to Atom, and now VSCode. It’s a fork of Atom, but although I install a ridiculous number of extensions on both Atom and VSCode, Atom slowed down significantly for me, so I lean towards VSCode now. The added abilities of VSCode for debugging JavaScript code make it great for my work. I’ll cover list some of the extension below.
• Vim, a terminal-based editor. I don’t do the majority of my coding in it anymore, but I do still use it for a significant part of my workflow, for quick scripts, remove administration, debugging, etc.
• Divvy. A screen divider. There is an Open Source alternative called Spectacle, but it doesn’t have quite the same UX for setting up new shortcuts.

Visual Studio Code extensions

Along with the built-in capabilities of VSCode, I’ve found a bunch of extensions help me be more productive.

• Docker provides intelligence for Dockerfiles as well as some useful shortcuts accessible from the command Palette.
• EditorConfig, along with the accompanying .editorconfig file within a repository/directory, will ensure that basic formatting is kept consistent. (My current base file can be found here, along with some other useful files for setting up a repo for consistency).
• ESLint will highlight code lint issues, and if you set the "eslint.autoFixOnSave": true setting, it will correct the trivial issues whenever you save the file, without the need for Prettier.
• Expand Region, If you’re used to control+W in Visual Studio for selecting the current word, line, function, etc. with increasing scope each time you press it, this adds the same functionality to VSCode.
• File Icons has some nice icons for lots of file extensions.
• GitHub Pull Requests provides a way to view GitHub Pull Requests within VSCode, which is handy for Inner Sourcing/Open Sourcing.
• GitLens gives even more access to Git metadata and shortcuts.
• Indent Rainbow shows a pleasant colour for each level of indent
• Markdown All in One provides a wealth of tools for editing Markdown files
• Markdownlint highlights issues you have with your Markdown files
• Path Intellisense helps auto-complete relational paths to files
• Rainbow CSV colour-codes columns of CSV files to help visual scanning of CSV data.
• YAML provides helpful support for YAML file editing, including linting.

JavaScript-specific extensions

• CodeMetrics helps by letting you know when your functions are getting a bit long-winded and are in need of refactoring.
• Glean helps with refactoring React code
• JS Refactor helps with refactoring JavaScript code
• NPM highlights issues with packages you depend on
• NPM Intellisense helps import libraries by auto-completing package names
• Version Lens shows the version of your package dependencies and helps update your references to newer versions
• Web Accessibility highlights where you might have accessibility issues in your HTML/React markup