Today I'd like to share some tips and tricks about working faster and more efficient in the most popular modern code editor - Visual Studio Code. VSCode's capabilities are very wide, thanks to its settings, flexibility, integrations and extensions, so what I am about to share is only a tip of an iceberg, therefore I recommend you to explore it yourself as much as possible.
Settings
I'm usually fine with most of default settings, but I'd like you to take note of a few (you can quickly access settings by pressing Ctrl + ,).
- Tab Size - I'm a 2-spaces person for indentation, but I'm not participating in this holy war, so choose whatever suits you best.
- Detect Indentation - related to the previous one, prevents overriding your rules when opening someone else's files.
- Word wrap - setting a default setting. You can also switch word-wrap in the editor by pressing Alt + Z.
- Trim Trailing Whitespace - as the description says.
- Rename on Type - the most important one, acts as the Auto-Rename Tag extension. Helps renaming opening and closing HTML tags (like
<section></section>) together.
Extensions
There is a ton of useful and useless extensions for VSCode, here are my personal choices (quick extensions access - Ctrl + Shift + X).
Prettier - a code formatter for different languages (JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Vue, Angular etc.) Makes your code prettier. You can format your document by pressing Shift + Alt + F (you need to select your default formatter at the first call). By default, the extension uses double quotes in files, but you can change it by searching 'prettier single quote' in VSCode settings.
Beautify - a Prettier alternative for JavaScript, JSON, CSS, Sass, and HTML. I actually use it together with Prettier, but only for HTML & CSS files (I prefer double quotes in those, and single quotes in JS). Changing settings is less convenient than in Prettier, you need to type them in settings.json file like this:
"beautify.config": { "wrap_line_length": 80, "indent_size": 2 },Code Runner - I don't use it often, but it runs code snippets or code files in many languages directly in VSCode console (by pressing Ctrl + Alt + N).
Code Spell Checker - checks your code for common spelling mistakes and typos (in texts, variable names, etc.) Multiple languages are available, after installing you need to enable them (see the description).
CodeSnap - takes nice screenshots of your code. There are multiple similar extensions like this one.
GitLens - a powerful extensions which makes your work with git easier and more pleasant.
Image Preview - shows a small thumbnail of an image to the left of code lines, when there is an image link in the code.
Live Server - launches a local development server for your code, it's the easiest way to work with your live-updating website without the need to install node.js or anything else.
JavaScript (ES6) snippets - there are many snippet extensions for different languages, the idea is that you type, for example prom + Tab, and it changes to
return new Promise((resolve, reject) => {});. Saves your time. You don't need snippets for HTML/CSS, because most of it is built-in in the editor.indent-rainbow - purely visual, sets indentations in alternate semi-transparent colors.
Rainbow Brackets - different colors for brackets of different depth.
100 Days of Code - not very useful, but it keeps your coding stats. And there are milestones.
Material Icon Theme - my favorite theme for filetype icons.
- There are also many color themes, check out Atom One Dark Theme or One Dark Pro, but the basic ones are also good.
Shortcuts
There are so many keyboard shortcuts, that it's hard to count (you can also add your own combinations). Here are the most common ones I use (inside the editor window, those are for Windows version):
- Ctrl + Right/Left - go to next/previous word
- Alt + Up/Down - move line/selected block up/down
- Shift + Alt + Up/Down - copy line/selected block above/below
- Ctrl + Backspace - delete previous word
- Shift + Del - cut line/selected block
- Shift + Tab - decrease indentation of line/selected block
- Ctrl + G - go to anything (line, file, etc.)
- Ctrl + P - go to file
- F2 - rename variable (change it everywhere in the document)
- F12 - go to variable definition
- Ctrl + / - line comment
- Shift + Alt + A - block comment
- Ctrl + D - add the next match to the selection
- Shift + Alt + F - format document
- Ctrl + Space - show suggestions
- Ctrl + Z - toggle word wrap
- Ctrl +
`- open and go to terminal - Ctrl + 1/2/... - go to first/second/... code panel
- Alt + click - multiple cursors
- Ctrl + Alt + Shift + Up/Down or Holding Middle Button - multiple cursors
- Ctrl + Shift + V - markdown preview
- Ctrl + K then V - markdown preview side-by-side
- Alt + Click on file in Explorer - open panels side-by-side
- F1 or Ctrl + Shift + P - show all commands
In editor window, you can select the code, then call F1 and select Emmet: Wrap with Abbreviation to wrap the content in another element tag, for example. You can also add your own shortcut for that function.
Emmet & code suggestions
Emmet is a powerful toolkit built in in VSCode, which will save you a lot of time. It allows you to write short code snippets, which magically converts to elements, keywords and properties. This is a big topic to cover, and I'm using only a fracture of it myself, so here's a few examples:
- ! + Tab in a HTML file converts to: ```HTML <!DOCTYPE html> Document
* **ul.list>li.item{text$}*6 + Tab** in HTML:
```HTML
<ul class="list">
<li class="item">text1</li>
<li class="item">text2</li>
<li class="item">text3</li>
<li class="item">text4</li>
<li class="item">text5</li>
<li class="item">text6</li>
</ul>
.quick + Tab in HTML:
<div class="quick"></div>gtc + Tab in CSS, inside a selector:
grid-template-columns: repeat();fz20r + Tab in CSS:
font-size: 20rem;bb + Tab in CSS:
border-bottom: 1px solid #000;
As you see, you just need to start typing something, and Emmet suggests what you may need.
In JavaScript, you can also choose the suggestion by up/down arrows. For example, by typing fo you can instantly choose a for loop, in which you can quickly jump through arguments by pressing Tab.
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
Extensions like JavaScript (ES6) snippets I mentioned earlier add new suggestions to the list.
GIT
The last thing I wanted to share are Git shortcuts. Sooner or later you may want to use it, and I recommend to learn using it from a command line first (VSCode terminal). It does not hurt to learn a few Bash commands too for creating/moving/copying files and directories. (By the way, Bash also offers suggestions when you're starting to type something and pressing Tab.)
To type git commands faster, you can use aliases. There are git aliases, when you shorten a command to git something, but it's better to use Bash aliases, so we can shorten the git part, too. One of the ways to create them is to create a .bashrc file in your home directory, then add aliases directly to it. Here is my list:
alias gst='git status'
alias gaa='git add .'
alias gcm='git commit -m'
alias gcmno='git commit --amend --no-edit'
alias gch='git checkout'
alias gchd='git checkout develop'
alias gchm='git checkout master'
alias gchb='git checkout -b'
alias gbr='git branch'
alias glo='git log --oneline'
So, instead of typing the whole command in the terminal, I type, for example, glo↵ to view the commits log. If you're not sure where your home directory is, type echo $HOME↵ in your VSCode terminal.
Also, if you want to change your home directory, you can use the following code in terminal (in Windows):
setx HOME "C:\Path-to-your-projects\Projects"
after this you need to restart VSCode.
Additionally, check out this blog post about useful VSCode shortcuts and Command Line Basics
This covers all I wanted to share today, I hope it was useful to you. Thank you for reading!
Background for the title picture by Luca Campioni