Code editors have evolved over the years. A few years ago, there was no Visual Studio Code (VS Code). You were probably using Sublime Text, Atom, Bracket, etc. But with the release of VS Code, it has become the favourite code editor of most software developers.

Why VS Code?

• Customizable
• Easy Debugging
• Emmet
• Extensions
• Git Integration
• Integrated terminal
• Intellisense
• Theming and more...

Having seen the advantages of using VS Code, this article will cover VS Code setup and extensions needed when using VS Code from the lens of productivity.

Emmet

Used in many popular text editors, this greatly improves HTML & CSS workflow. To access this, press CMD + SHIFT + P. Then, search for emmet. This shows a list of actions that can be performed using emmet.

For instance, to display five divs with the class name item, all you need is

.item{$}*5

Then, press the Enter key. The result is

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

CSS use case:

Within any CSS selector, type

p20

Then, press the Tab key. The result is

padding: 20px;

Emmet requires a little configuration to work with frameworks such as React etc. Navigate to VSCode settings.json file and add:

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue-html": "html"
}

Then, you can type div.page-wrapper and press the Enter key. This will result to

<div className="page-wrapper"></div>

Font

Fira Code looks cool as a result of the support for ligatures. It makes your code readable at a glance. Download and install Fira Code, then add it to your settings.json file.

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

Launching from the command line

Launching VS Code from the terminal looks cool. To do this, press CMD + SHIFT + P, type shell command and select Install code command in path. Afterwards, navigate to any project from the terminal and type code . from the directory to launch the project using VS Code.

Multiple Cursors

You can modify multiple lines of code at the same time. To achieve this, you need to set your preferred access KEY within your settings.json file.

"editor.multiCursorModifier": "ctrlCmd",

or

"editor.multiCursorModifier": "alt",

After setting this, press down the key set within your settings.json file, and you will be able to select multiple lines of code at the same time. This speeds up the code refactoring process.

Terminal

Bored of the default terminal shipped with your macOS? You can set up your terminal to use iTerm2 and ZSh and have your VS Code terminal setup to use that.

After configuring Zsh, launch the VS Code integrated terminal Terminal > New Terminal and run the command

source ~/.zshrc

or

. ~/.zshrc

to execute the content of the .zshrc configuration file in the shell.

Hacks

Automatic sub-folder creation

You can easily create a sub-folder from an already existing file. To do this, select a file and click on rename. Then, add a backslash (/) at the point you need it to be demarcated from.

E.g. To create a bio sub-folder from authorbio.js, type author/bio.js

Logging to the console

To easily log to the console, type clg and press the tab key or type log and press the enter key

Extensions

Extensions improve developer experience when working on a codebase. You can explore available options in the marketplace.

To access these extensions,

• Go to View > Extensions
• Search for extensions in the marketplace
• Click on Install

Below are extensions that I find useful and what they do.

1. Add jsdoc comments

This adds comments block to the code. To use it, highlight the first line of the function, press CMD + SHIFT + P and select Add Doc Comments

2. Auto Rename tag

Automatically renames paired elements.

3. Babel JavaScript

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

4. CSS Peek

As the name implies, this helps you peek on rules applied by a defined style within a codebase and it's specificity. It comes in handy when working on legacy codebases.

5. Debugger for Chrome

This lets you debug your JavaScript code running on your Google Chrome browser right from VS Code.

6. Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace

7. DotENV

Adds syntax highlighting to .env files.

8. ES7 React/Redux/GraphQL/React-Native snippets

This provides JavaScript and React/Redux snippets in ES7 with Babel plugin features. Read the comprehensive usage guide.

Legend:

→ : Tab key

9. ESDoc MDN

In certain scenarios, we tend to forget how a particular thing works. This is where this extension becomes useful. You don't need to launch your web browser to find out the syntax. All you need is to type

//mdn object.method;

Copy the snippet below and paste on your VS Code to get a grasp of how it works.

//mdn array.filter;

10. ESLint

This integrates ESLint into VS Code to lint your codes. You need to have ESLint installed either locally or globally to take advantage of the features this extension offers.

To install ESLint locally, run npm install eslint or globally using npm install -g eslint. You would also need to create .eslintrc configuration file.

If you installed ESLint locally, run ./node_modules/.bin/eslint --init or eslint --init for global installation.

11. GitLens

GitLens boosts what you can achieve with Git. It helps you to do a lot more such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

12. Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts on the browser. To access a list of fonts, press CMD + SHIFT + P and search for Google fonts to proceed.

13. Highlight Matching Tag

This extension highlights matching opening and closing tags while also providing extensive styling options to customize how tags are highlighted.

14. HTMLHint

This extension validates your HTML helping you to write standards-compliant code

15. Image Preview

Image Preview shows the image preview in the gutter and on hover. This is essential as it helps you ensure that you are importing the right image at a glance.

16. Import Cost

Import Cost shows the impact of imported packages within the codebase. It helps measure performance bottlenecks.

17. Kubernetes

The extension helps developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications. It enables you view your clusters in an explorer tree view, and drill into workloads, services, pods and nodes. Works with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more)

18. Live Server

This launches a local development server with live reload feature.

19. Peacock

This extension gives you the ability to change the workspace color of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#734E73",
    "activityBar.foreground": "#fff",
    "activityBar.inactiveForeground": "#b5b5b5"
  },
  "peacock.affectedElements": ["activityBar"]
}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

20. Prettier

Do you always press spacebar or tab key when coding, here comes Prettier to the rescue. It formats lines of code and makes it readable. After installing Prettier, enable format on save within your editor and experience the magic of Prettier.

21. Polacode

As a technical writer, this comes in handy. It gives you appealing screenshots of your code snippets. It works like Carbon within your VS Code.

Step 1: Press CMD + SHIFT + P
Step 2: Select Polacode 📸
Step 3: Copy some code
Step 4: Paste into Polacode view
Step 5: Click the lens-like button below the code view to save

22. Quokka.js

Enjoy rapid JavaScript prototyping in your editor. Quokka.js automatically computes and print the result of code snippets. There's no need to log to the console. It supports package installation, live comments and value display features e.g. /*? $.toLowerCase() */ and //? in the Pro edition.

Get started with the steps below after installing the extension:

Step 1: Press CMD + SHIFT + P or CTRL + SHIFT + P
Step 2: Type Quokka.js
Step 3: Select an option e.g. Quokka.js: New JavaScript file
Step 4: Write your code

23. Shell-format

Helps in quickly formatting shell scripts, dockerfiles, ignore files, DOTENV files and more. To access this, press CMD + SHIFT + P and type Format Document.

24. TODO Highlight

With a lot to work on which needs to be prioritized, sometimes, you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

25. YAML

Provides comprehensive YAML Language support via the yaml-language-server, with built-in Kubernetes syntax support. Read the comprehensive usage guide.

Configuration

VS Code configurations not specific to a workspace are housed within the settings.json. You can configure VS Code to suit your preferences.

To launch the settings.json, press

CMD + ,

Copy and paste the code below within the settings.json file

{
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": true,
  "editor.wordWrap": "bounded",
  "editor.trimAutoWhitespace": true,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact"],
  "javascript.validate.enable": true,
  "git.enableSmartCommit": true,
  "files.trimTrailingWhitespace": true,
  "editor.tabSize": 2,
  "gitlens.historyExplorer.enabled": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.sideBar.location": "right",
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "yaml.completion": true,
  "yaml.format.enable": true,
  "yaml.format.singleQuote": true,
  "yaml.validate": true,
  "yaml.schemas": {
    "http://json.schemastore.org/composer": "/*",
    "kubernetes": "k8s/*/*.yaml"
  }
}

Check out the awesome things you can do with Visual Studio Code.