My Three Favorite VS Code Extensions

#vscode #productivity #webdev

VS Code is by far my favorite code editor. It's free, it works on every OS, and it's easy to customize.

Here are my three favorite VS Code extensions.

1. Make your code better and more beautiful with ESLint and Prettier

I honestly don't know how I lived without these. ESLint is great at finding problems in your code that might lead to bugs. Prettier forces your code to adhere to certain style rules.

After installing Prettier via the extensions tab, I made it my default formatter by adding this to the main settings.json file:

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

You can also do it through the GUI.

Then I set VS Code to format on save by adding this:

  "editor.formatOnSave": true,

Pro Tip: Prettier is opinionated. I agree with most of the default settings, but I prefer to use single quotes in JavaScript.

There are a few places I can make this change. At the largest scope, I can change it in the main settings.json file for all VS Code if I want all of my projects to follow this rule. In the middle scope, I can add it to my workspace settings if I want this rule for all projects in a given workspace. In the narrowest scope, I can just add the rule to this one project. Whichever settings file you add it too, the code will look like this: "prettier.singleQuote": true,

What if you want everyone on the team to have these settings but you want to keep the vscode directory in the gitignore?

Two choices:

Add the prettier settings to the package.json, in which case it will look like this:

  "prettier": {
    "singleQuote": true
  },

Create a .prettierrc file in the outermost directory and put the settings there. These are the settings that I like to add for my personal React projects:

{
  "printWidth": 80,
  "tabWidth": 4,
  "useTabs": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

And here's a list of all the settings you can change with Prettier:

prettier.arrowParens
prettier.bracketSpacing
prettier.endOfLine
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.jsxBracketSameLine
prettier.jsxSingleQuote
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma
prettier.semi
prettier.singleQuote
prettier.tabWidth
prettier.trailingComma
prettier.useTabs
prettier.vueIndentScriptAndStyle
prettier.embeddedLanguageFormatting

2. Change the color with Peacock

When I have multiple projects open at once--say a back end and a front end--then having them instantly recognizable with different colors saves me precious seconds.

After installing it use Ctrl+Shift+P(Windows) or Cmd+Shift+P(Mac) to open the command palette. Type in "peacock," and if you're in a hurry choose "surprise me with a random color." You can also choose your own color and edit the list of favorite colors.

Pro Tip 1: add /vscode to your gitignore file or else everyone on your team will get your color settings.

Pro Tip 2: only want a little color? You can change your settings so that the color only affects certain parts of VS Code. Here, only the title bar is affected by Peacock.

I used the following in the settings.json file under the vscode directory to achieve this:

  "peacock.affectActivityBar": false,
  "peacock.affectStatusBar": false,
  "peacock.affectTitleBar": true

3. Pair program remotely with Live Share

Live Share allows multiple people to work on the same files at the same time. It basically turns your code into a Google Doc where you can see other people typing.

The benefit of this is that it's easier to pair program remotely. No one needs to worry about merge conflicts because you're editing everything together.

The host can even share their terminal and their local servers so everyone on the team can see and interact with them.

There are a few issues.

If you're both working on something on the front end you might get frustrated. That's because you can't see what renders on the screen if the other person is halfway through typing something.
Live Share is the best out there that I've seen but still I've had days where it disconnected every hour.

Pro Tip: if you want to make sure everyone gets credit in the git commits the host needs to add each person's name to the commit like so:

Co-authored-by: username <email>