Setting up VSCode for development

I love working in my comfort zones of which visual studio code is one. The sight,the feel, the powerful tools that comes prebuilt and the ones I install is enough motivation for me to build anything I want to or even experiment the innovative ideas that comes to my mind. Visual studio code is my swiss army knife.

In this article, I shall be guiding you through how you can install VSCode on your local development machine (Windows PC/Linux/Macbook) and give you all the necessary formula to spice it up for development.

Why VSCode?

Visual Studio Code :

• Supports several langauges including JavaScript and TypeScript out-of-the-box
• Debugs and has very powerfull intellisense that goes beyond syntax highlighting and autocomplete. It also provides smart completions based on variable types, function definitions, and imported modules.
• Is also highly customizable. It's open source, so you can tweak it, build plugins for yourself or launch it to the marketplace for people to use.
• has Git version control built in. This means a lot for teams
• has inbuilt Terminal/command line, fast and optimized.
• has live share.Therefore, you can invite your colleagues to join you to type live on the same workspace you're working on right in your VSCode with no teamviewer software or zoom call.
• Is a cross platform, yeah! The same coding experience available accross every platform you use. I use it on both my macbook and my linux machine, that cross platform experience is sweet.

Initially, I used IDE and sublime text as an alternative. But, right now I ditched both of them in favour of Visual Studio Code because it gives the power of an IDE right within a light text editor.

Installation

Installing VSCode is easy. Head on to code.visualstudio.com. The website should detect the operating system you're using, but in case it's wrong or you download the setup for another operating system. The option is there as well. Download and install on your development machine.

Now that you have VSCode installed, let's go ahead to set it up for development. I will also share tweaks and settings to optmize its performance while we use it.

General settings and tweaks

1. Essential settings

To go to settings, press cmd + , on mac or ctrl + , on windows/linux then there you go, we have settings. It's just a json file. I love fact that the settings is divided into two columns. All default settings are accessible the left column while custom settings are on the right. You can explore the defaults and tweak it much as you please.

• Paste this in the custom settings (right hand editor column)

  {
    	"files.exclude": {
        	"**/.git": true,
        	"**/.svn": true,
        	"**/.hg": true,
        	"**/CVS": true,
        	"**/.DS_Store": true,
        	"node_modules": true
    	},
    	"window.zoomLevel": -2,
    	"files.autoSave": "onFocusChange",
    	"editor.tabSize": 2,
    	"editor.wordWrap": "on",
    }

In the settings above,

• first, we set files.excludes, these keep some file away from our view in the file explorer within vscode to avoid distraction. You can add or remove from the list as you deem fit. It's your editor
• window.zoomLevel is a tweak for the general font-size, if you like tiny fonts like I do, you'll find this awesome. A short-cut to adjusting this alone will be to use cmd and +' orctrl and +depending on your operating system to increase the font size andcmd and -/ctrl and -` to reduce font size.
• we also did files.autosave, this helps to ensure that your changes are automatically saved when you lose focus on the editor tab. This means you don't have to press cmd + s or ctrl + s to save before you see the effects of modifications you make.
• then of course editor.wordWrap ensures that you don't have to scroll right and left before you see all the codes that you type.

2. Theming

Choosing a theme could be tricky. Install multitheme it comes with tons of themes, with multitheme, you'll different flavour. My choice is multitheme Eggplant. A quick shortcut to choosing and trying out themes is pressing these key combinations cmd + K then cmd + t or ctrl + k then ctrl + t.

Top plugins for frontend development

1. IntelliSense for CSS class names in HTML by Zignd

This plugin scans through your workspace for css classes in your stylesheets and refrenced libraries to give you a richer intellisense in vscode. This works for pure html/css and even react classNames as well.

2. Path Intellisense by Christian Kohler

This plugins makes referencing of paths/directories a breeze as it provides intellisense for file paths.

3. Eslint by Dirk

Eslint helps lint your javascript code to ensure it's syntactically healthy (correct) following a popular style guide i.e Airbnb, google or Standard style guide. It however require you to have node installed on your machine and must have install eslint globally or insall it by running sudo npm i -g eslint or npm i -g eslint.

4. Git Lens by Eric Amodio

Git lens shows you authorship of the code you're editing line by line. Who wrote it and when it was written. Quite nifty when trying to reward a nice contribution to a code base and figuring out a culprit that plant a malicious code in to a code base as well.

5. Rest Client by Huachao

Rest client makes you do more by enabling you to test APIs right within vscode.
A sample test looks like this

POST http://localhost:8080/api/v1/login
content-type: application/json

{
    "username": "tester",
    "password": "testing"
}

this way, you can test your APIs by yourself as you build them within VSCode. You can also work with REST APIs to examine the URLs and check the responses without using tools like Postman. It allows you to send HTTP request and view the response in Visual Studio Code directly. Pretty nifty.

6. Todo Highlight by Wayou

Several times, we plan to fix a bug or even plan to enhance a particular endpoint in our API , but being humans, we forget and it eventually escapes our mind. With this plugin,you don't have to worry about that again. All you need to do is to do these right within your code

// TODO: use arrow function instead
 function randId (charCount) {
    return Math.random().toString(36).slice(-(charCount))
 }

this gives the todo a coloring that makes it obvious in your code like this

before marking your projects as done on your task list.

7. Import Cost by wix

If you use webpack and conscious of your bundle size, this extension will come handy. It shows me what size every import is, so I'll be careful not to import what I don't need.

8. Auto Close tag and auto rename tag by Juan Han

Sometimes, developers could be lazy to close tags.Severally,I ring the bell; "close your tags" to my students at bootcamps. These two plugins help close tags as soon as you open them and rename tag pairs as well. This works for html, jsx and vue template syntaxes.

9. Vetur by Pine Wu (for VueJS developers)

This extension is all you need for a smooth VueJS development it's features includes

• Syntax-highlighting
• Snippet
• Emmet
• Linting / Error Checking
• Formatting
• Auto Completion
• Debugging

10. Other extensions and plugins worth checking out

• Color Highlight
• Color Picker
• Debugger for Chrome
• Jest (for smooth testing)
• React Redux ES6 Snippets
• Go (language support)
• Python (language support)
• Php (language support)
• Quokka (See code outputs on the fly as you type)
• View in Browser
• ftp-sync
• Git Extension Pack

What other extension do you use and what tweaks have you done to your VSCode editor?
I would love to read them in the comments below.
Readers will learn and get more ideas on how to pimp their editor. You can also share a screenshot of your editor, I'll love to see them.

Don't hesitate to ask your questions by replying this post or book a session with me here on codementor. Till next time, keep the dev fire burning and write code for good.

Credits

• Images and Plugin names: My screenshots, experience and Visual Studio Marketplace