Setup for the Decade: Basics

Last modified: 15/01/2020

In this article I want to describe the opinionated productivity setup of my work environment which is currently OSX-based and refined over the last decade.

The entire configuration can be found on GitHub.

The next part of the series focuses on the configuration of the shell which is zsh and prezto.

Content

iTerm2 >>

iTerm2

First of all you need a good terminal emulator. The best general-purpose one is iTerm2 since it has good color-support, customizability, hotkeys and replay features. In contrast the default Terminal.app has unique OSX features but only gets updates sparsely.

Google Chrome >>

Regardless whether you agree or not, for me this is the most convenient browser and has the best development tools out of the box and good integration with IDE and testing tools. The extensions I run:

Visual Studio Code >>

Visual Studio code

The best IDE out of the box I ever had and I tried everything from Sublime to Code::Blocks to NetBeans to Vim. The only custom hotkeys I have is ctrl+] for next and ctrl+[ for previous editor tab and ctrl+shift+d to copy the active line down:

[
    {
        "key": "ctrl+shift+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+]",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+[",
        "command": "workbench.action.previousEditor"
    },
]

Settings

The entire JSON can be found here. Following, I will explain the important decisions line by line:

"editor.fontFamily": "Operator Mono Lig",
"editor.fontLigatures": true,

Operator Mono is the best choice for a monospaced font and I use it everywhere. It is a costly investment of $199 but I feel it is worth every penny. Furthermore ligatures are absolutely essential once you get used to it and I could never go back. If you do not have the money to buy the font, you can use Fira Code which is the next best thing.

"editor.formatOnPaste": true,
"editor.formatOnSave": true,

Self-explanatory, I like automatic formatting.

"editor.minimap.enabled": false,

You can get some information from the shape of the code but never saw the reason to have the minimap enabled all the time. Also this saves some resources.

"editor.snippetSuggestions": "top",

Without this your own snippets will not appear as a suggestion in first position.

"editor.wordWrap": "on",

No word wrap on default. Obviously, you want to wrap long lines - if you have them. As I tend to have because I use VSC for literally everything.

"files.associations": {
  "*.js": "javascriptreact"
},

I agree with the Airbnb style guide that JSX file endings are bad practice and therefore I want to associate all JS files with React as there are no downsides at all.

"emmet.triggerExpansionOnTab": true,

Makes Emmet work automatically on pressing tab.

"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,

I do not need to confirm my decisions.

"files.autoSave": "onFocusChange",

Manual saving often causes unnecessary mistakes as I know from pair programming. If I did a change and want to view it in the UI, then there is no need for an additional keypress to save my changes.

"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,

Unbelievable that this is not the default. A missing new line and unnecessary whitespaces can be pretty annoying in diffs.

"explorer.openEditors.visible": 0,
"window.menuBarVisibility": "hidden",
"workbench.activityBar.visible": false,
"workbench.statusBar.visible": false,

Decluttering the UI. The open editors section is not useful at all. The menu and activity bar isn't necessary if you know the hotkeys and the status bar often contains too much information.

"workbench.editor.enablePreview": false,

The preview feature opens a file and closes it on the loss of focus unless you did a change. I open them for a reason and often need them to stay open.

"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "Monokai Pro Icons",

Coming from Sublime this is the only valid choice for a theme.

"workbench.startupEditor": "newUntitledFile",

Start with a clean slate and not the same information over and over. I want to use a text editor if I start VSC.

"extensions.ignoreRecommendations": true

I do not need or want to be bothered by recommendations.

Plugins

Auto Close Tag

Auto Close Tag

Automatically adds a closing tag when you type in the closing bracket of the opening tag. After the closing tag is inserted, the cursor is located between the opening and closing tag.

Auto Rename Tag

Auto Rename Tag

Automatically rename paired HTML/XML tags.

Babel JavaScript

Babel JavaScript

JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL.

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

change-case

change-case

Quickly change the case of the current selection or current word.

Code Spell Checker

Code Spell Checker

A basic spell checker that works well with camelCase code to help catch common spelling errors while keeping the number of false positives low.

Docker

Provides a myriad of functions to work with Docker and Compose.

EditorConfig for VS Code

Overrides user/workspace settings with settings defined by EditorConfig.

ESLint

Integration with ESLint.

Git History

Allows to search the git log and view previous versions of a file and compare it with branches or commits. GitLens is another popular plugin which I don't use since I either use the CLI or SourceTree.

Go

Adds language support for Go.

htmltagwrap

htmltagwrap

Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).

LaTeX Workshop

Makes VSC a full-fledged IDE for LaTeX with on-the-fly PDF viewing, IntelliSense, linting and snippets.

markdownlint

Lint and style checking for Markdown since formatting can be inconsistent or even might cause troubles with certain parsers.

Monokai Pro

Monokai Pro

A complete color scheme, customized user interface theme and icon set designed by the author of the original Monokai colors.

npm

npm

Validates the package.json and installed modules.

npm Intellisense

npm Intellisense

Autocompletes modules in import statements.

Path Intellisense

path Intellisense

Autocompletes filenames.

Prettier - Code formatter

Provides integration with Prettier.

Settings Sync

Syncs all the VSC settings with a Gist.

Sort JSON objects

Alphabetically sorts the keys in selected JSON objects.

Sort lines

sort

Sort lines of text.

Spell Right

Multilingual, offline and lightweight spellchecker.

Visual Studio IntelliCode

Visual Studio IntelliCode

Provides AI-assisted development features for Python, TypeScript/JavaScript and Java, with insights based on understanding your code context combined with machine learning.

XML Tools

XML language support formatting.

YAML

YAML language support with Kubernetes syntax support.

IntelliJ IDEA >>

IntelliJ IDEA

As in Visual Studio Code, I use the Operator Mono font. For plugins I use:

For code styles (Editor > Code Style > Java) I use the bundled GoogleStyle. The entire settings can be found here.

Sourcetree >>

Sourcetree

Git GUI which I use sometimes if I am lazy and, e.g. want to add single lines to separate commits via click.

Docker >>

Containerization to build and run software everywhere anytime.

homebrew >>

The missing package manager for OSX.

nvm >>

The node version manager manages as the name implies multiple active node.js versions.

insomnia >>

insomnia

Free and open-source REST client for all major platforms which is a modern alternative to Postman.

KeePassXC >>

KeePassXC

Open-source application that stores passwords offline in a database. Also it supports every major operating system, has browser integration and is not owned by a shady company like LastPass. I suggest synchronizing the database via Google Drive or something similar.

Caffeine >>

Caffeine is a tiny program that puts an icon in the right side of your menu bar. Click it to prevent your Mac from automatically going to sleep, dimming the screen or starting screen savers. Click it again to go back. Right-click (or ⌘-click) the icon to show the menu.

f.lux >>

f.lux

Ever notice how people texting at night have that eerie blue glow?

Or wake up ready to write down the Next Great Idea, and get blinded by your computer screen?

During the day, computer screens look good—they're designed to look like the sun. But, at 9PM, 10PM, or 3AM, you probably shouldn't be looking at the sun.

f.lux fixes this: it makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day.

It's even possible that you're staying up too late because of your computer. You could use f.lux because it makes you sleep better, or you could just use it just because it makes your computer look better.

f.lux makes your computer screen look like the room you're in, all the time. When the sun sets, it makes your computer look like your indoor lights. In the morning, it makes things look like sunlight again.

Tell f.lux what kind of lighting you have, and where you live. Then forget about it. f.lux will do the rest, automatically.

numi >>

numi

An intelligent calculator and converter.

Rectangle >>

rectangle

Since Spectacle is not maintained anymore, Rectangle has become the only free open-source solution to resize windows with hotkeys.