Setting up a fresh development environment, part 2
This is part 2, please also check out part 1
The extension support VSCode has is very powerful. We are able to improve our workflow massively by taking advantage of this. I’ll list a few of my favourites here. Let’s go!
Everybody dislikes bikeshedding. Good news, because no longer do you have to hold long debates with yourself over spaces, indentation and other code style decisions. Prettier is an opinionated code formatter that makes those choices for you.
Read my guide on how to integrate Prettier into ESLint
Keeping track of matching brackets is hard. Bracket Pair Colorizer makes it easier by allowing you to identify matching brackets by color.
Among other neat features, this extension will add syntax-highlighting, linting and autocomplete to your GraphQL code!
Similar to the GraphQL pick, this adds syntax highlighting for styled-components.
DotEnv adds syntax highlighting for
.env files (are you noticing a pattern?)
Using code snippets is a great way to speed up development.
Of course the best snippet-library will always be the one you wrote yourself, but this one has so many useful contractions in it!
I’ll never get tired of writing
rcc, tabbing and having the complete boilerplate for a class-based React component appear
GitLens allows you to see the history of files easily and gives you a git blame for every line. This extension does much more and is very configurable.
Continuing with extensions that are nice to have. Auto close tag does exactly what it says on the box. It generates the closing pair of a tag when you type the opening tag.
Found hand in hand with Auto Close tag is Auto Rename Tag. No more having to type a tagname 2 times (opening and closing) when you want to swap it.
Taking screenshots of your code has been harder than it needs to be for a long time. Polacode, inspired by Carbon makes it easy to take beautiful screenshots of your code right in the editor.
Those icons in front of your files can be nice to recognize what type of file it is at a glance.
Sarah Drasner’s new theme ticks all the right boxes. It looks good, isn’t hard on the eyes (even after a long coding session), stays out of your way and lets you focus on the code. She also paid special attention to accessibility for people with colorblindness and to optimal readability, especially in low-light circumstances. I used the default Dark+ theme for a long time, this theme might just make me switch permanently.
Helping/getting help with code in VSCode has never been easier! With the VSLiveShare extension, you don’t just see a snippet of code in your partner’s editor, but you get access to their whole workspace in your own install of VSC!
I’m on Windows, so I downloaded the latest stable installer and ran it.
The reason I didn’t install it through
npm is because they discourage it
Confirm the installation by checking the installed version
yarn --version# 1.6.0
We can already do most of the things we want by this point. What if we could do these things faster/easier/…
Let’s start with the basics again and configure a few global settings.
git config --global user.name "Daniel Ricciardo"git config --global user.email "firstname.lastname@example.org"
You can look at your configuration like this:
git config --global --list
You can even look at and edit that configuration file (located at
~/.gitconfig) using a text editor.
Did it ever look like someone changed every single line in a file, but when you looked closer at the files, you couldn’t see any changes? This can happen when people are working on different operating systems.
Windows uses CRLF where Unix uses LF to signal the end of a line.
That is why we are going to configure the
# for Windows:git config --global core.autocrlf true# for Linux/Macgit config --global core.autocrlf input
When you do a
git pull you are actually doing a
git fetch and a
git merge. This creates merge-commits that add no value to the repository.
We want to rebase on pull instead of merge, so
git pull --rebase.
Luckily, there’s a configuration option to do that automatically so you don’t have to remember the —rebase part every time.
git config --global pull.rebase true
You can configure a few git aliases to execute some commands you use often in a more convenient way. The options are nearly limitless (and go beyond git itself). Here is my favourite:
git sto run git status in short mode. The standard output you get from
git statusis very verbose. The output from short mode is a lot cleaner!
git config --global alias.s "status -s"
More in part 3
Series navigation for: Fresh environment, 2018