This setup guide is intended for people starting up web development and some of the best tips & tricks when working with Visual Studio Code in 2020.
Nowadays, you have quite a few options for text editors and IDEs, but the most established and still gaining steam is Visual Studio Code, followed by WebStorm and Sublime Text.
Installing
To install natively on your operating system, you can head off to the download page here. If on Windows, download the User and 64-bit version for your platform. The user version facilitates the background auto-update when you don’t have elevated privileges on the machine and the 64-bit version can address more RAM memory, offering better performance.
If you want to run exclusively in WSL on Windows, my advice is to first set up WSL nicely, you can check out my popular guide on how to setup Windows Terminal, WSL and ZSH. Once done, go to your home folder and run code, which when used will start up Visual Studio Code, but if not installed it will kick off the installer automatically. Then to invoke it, you can use code . to start it up with opening up the current directory as a project folder.
Extensions
It’s a text editor built with ElectronJS, so it runs on a slimmed down runtime of Chromium, so it’s quite a memory hungry piece of software. This is why not going overboard with the number of extensions is quite important.
An important disclaimer I’d like to make is that I’ll try my best to be agnostic from frameworks like ReactJS, AngularJS or VueJS. You will also see that I focus on TypeScript/JavaScript, rather than PHP and Ruby, despite still being web development. PHP is an entire universe of extensions in itself, but let’s be honest, if you can avoid PHP, you should!
The editor comes with outstanding support for TypeScript and JavaScript out of the box, so nothing to install there, unless you want to try out nightly builds of the newest language features, which I wouldn’t advise, unless you really know what you are doing.
So here is my list of essential and nice to have extensions for web development:
| Auto Rename Tag | It automatically edits the closing tag, as you edit the opening one, quite time-saving when it comes to generic HTML and working with ReactJS components |
| Bracket Pair Colorizer 2 | Colors matching brackets in different colors to easily see code blocks, it speeds up troubleshooting if you have incorrectly closed if statement for example |
| Color Picker | Shows a popup with a color picker inside the editor, to facilitate picking a color, instead of having to search on the web or use a color palette from a different piece of software |
| Color Highlighter | Highlights any color text starting with # or Hex values with the color it represents, which is quite handy for easily finding the right color you want to edit. You get immediate color feedback inside the editor |
| Debugger for Chrome / Debugger for Microsoft Edge | To be able to use the debug tools like breakpoints, watch variables and so on, you will need to have one of the two, depending on which browser you use for development |
| ESLint | Linter for syntax highlight for JavaScript and TypeScript |
| Prettier | A very opinioned code formatter, that is somewhat of a de-facto standard for code formatting in the JavaScript and TypeScript communities |
| Visual Studio IntelliCode | The AI-based auto-completion suggestions from Microsoft, which complements the built-in one. When it sees you want to call a method on an array, it will show the most popular array methods, etc. |
| Live Server | Spawns a localhost server, that will render your page live |
Here are some that are nice to have:
| GitLens | Offers larger git capabilities – diff between commits, a superset of the built-in git client |
| vscode-icons | A nice set of icons for different file formats, make finding files easier |
| glean | Easy refactoring for React code (Extract components, convert class components to functional one) |
| Code Runner | Allows to select a piece of code in the editor and run it in the console. Useful to check on language behaviour for certain expressions |
| Markdown All in One | A list of features of editing markdown files, when you want to make sure your README file, looks nice is valid markdown |
| Better Comments | Changes the font color, if it contains words like TODO and notations you define to make discoverability of important comments easier |
| Browser Preview | You get a browser window inside the editor, which comes in handy when you use the debugger or are limited on screen estate. |
The framework specific ones:
| Simple React Snippets | Simple word expansion plugin, you type a short series of letters and this generates popular boilerplate for React Components |
| Angular Snippets | Snippets for boilerplate code in the latest AngularJS version |
| Vue 2 Snippets | Snippets for boilerplate code in VueJS |
| React Native Tools | Tooling to build and run React Native-based mobile applications |
I’m not going to make any recommendation on an editor theme, since it’s a personal preference thing, but for the record I’m using One Dark Pro, available here. The same with keybindings, if you come from Sublime or Vim, there are extensions that replace the shortcuts to behave the same – Sublime Text Keymap & Settings Importer and Vim.
Setting up and working with the debugger
The ability to use a debugger is such a rare skill among developers, yet it’s many times more powerful than print statements, if people know how to use it. This is why making sure you have a working setup is very important to incentivize people to use it. I’ll use a sample just generated ReactJS application created with
npx create-create-app demo --template=typescript:
for the command to work, you need to have installed create-react-app globally with:
npm install -g create-react-app
open the folder inside Visual Studio Code, after you’ve installed the respective Debugger Extension for either Edge/Chrome/Firefox. I’m using Chrome for the example.
WSL users, need to put in their settings file that they want to forward to the host system, otherwise will try to hit a chrome install inside WSL itself, this is done by adding:
"remote.extensionKind": {
"msjsdiag.debugger-for-chrome": "ui",
}for the guide on setting up the debugger for create-react-app, the official docs offer a launch.json snippet that you can copy-paste, it’s here.
Depending on the framework’s start script, the out of the box launch.json configurations work, provided you run node natively. In the latest versions, there’s an option to debug node, without the browser where you select a script from the package.json and it attaches the debugger process to it. It’s still in early preview stage, but it’s promising. So really, the cost of spending a few extra minutes getting the debugger working is well worth it.
Minimalist file explorer & editor configuration
I’m personally a fan of the minimalist display, so I hide the open files in the sidebar, since I have the tabs already. The minimap, I’ve found more distracting than helpful, even for long files. In the file explorer, I hide the arrows and the diff badges, while keeping the indentation, this way I save on a few extra pixels showing longer filenames in the same sidebar width. I also hide the breadcumbs, since they take a row of space and I never found myself using them. It looks like this:
To achieve the same, you can add to your settings.json (Ctrl + Shift + P -> Preferences: Open Settings (JSON)):
"workbench.tree.indent": 20,
"explorer.openEditors.visible": 0,
"explorer.decorations.badges": false,
"breadcrumbs.enabled": false,
"vsicons.presets.hideExplorerArrows": true,Essential configurations
I always set my file endings to linux ones and have tabs set to 4 spaces, to avoid issues when committing to GitHub. I always format on save automatically, so this way I have one thing less to worry about besides the linter of my code. I also enable, which I believe is by default today, on file moves inside the file explorer to update the references in the import statements automatically and to always confirm a file move without a pop up. Add in the same settings.json file:
"files.eol": "\n",
"editor.tabSize": 4,
"editor.formatOnSave": true,
"[javascript, typescript, typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,Fonts and ligatures
Visual Studio Code comes with very nice default font – Consolas, if you feel like experimenting, I can recommend to try out “Fira Code“, which is a free monospaced font that also supports ligatures. Ligatures are those symbols like >= when they get consolidated into a single one, below are a few examples:
I do find them to increase readability, if you decide to go that route, after you install the font, restart Visual Studio Code and you can enable them by adding to the settings file:
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,Improving the integrated terminal
Usually I spend the least time on the terminal, since I prefer using the Windows Terminal or iTerm on MacOS. Below are my basic changes – such as font, font size and line height, to make it more readable. Always subject to personal preference, my advice is to install Oh-my-zsh and customize it properly.
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\wsl.exe",
"terminal.integrated.fontFamily": "MesloLGS NF",
"terminal.integrated.fontSize": 15,
"terminal.integrated.lineHeight": 1.1,Back up your settings
As of recently, Visual Studio Code ships with the ability to back up and sync your extensions and configurations using a GitHub or Microsoft Account. My advice is to do so, to avoid going through the setup again. To do so, click on the profile icon at the bottom left above the configuration wheel and select the profile you want to use and follow the guide. That’s it. Next time you install the text editor, directly log in and just wait as it changes the display in real-time.
Wrap up
I hope this guide has been useful, feel free to post your favorite extensions in the comments or any other tips and tricks worth noting when it comes to web development setup.
0 Comments