25 VS Code Productivity Tips and Speed Hacks

Summary

The video script offers an in-depth guide to mastering Visual Studio Code (VS Code), highlighting its powerful features beyond a simple text editor. It emphasizes the importance of keyboard shortcuts and commands over mouse usage for increased productivity. The tutorial covers various techniques, including using the command palette for file navigation, symbol search, and code execution, as well as extensions for rapid prototyping and version control. It also introduces advanced features like multi-cursor editing, code commenting, and terminal management, concluding with tips on customizing VS Code for personal productivity and project efficiency.

Takeaways

• 🔥 **VS Code's True Potential**: VS Code is more than a basic text editor; it's a powerful tool with numerous features that can boost productivity when used correctly by professionals.
• 🎯 **Efficiency with Keyboard Shortcuts**: Relying less on the mouse and learning keyboard shortcuts can significantly improve efficiency in VS Code.
• 📂 **Quick File Navigation**: Use the VS Code CLI with the 'code' command to quickly open directories or files from the terminal.
• 🛠 **Command Palette Power**: The Command Palette (Ctrl+P) offers a keyboard-centric way to access all VS Code features and commands without memorizing key bindings.
• 🔎 **Symbol Navigation**: Quickly find and navigate to symbols in your code using the '@' symbol from the Command Palette or Ctrl+Shift+Period in the file.
• ⚙️ **Enhanced Editing**: Use Ctrl+G to jump to specific lines, Ctrl+D for multi-line editing, and Alt+Up/Down Arrows for moving lines.
• 📝 **Auto Rename Tag**: Install the Auto Rename Tag extension to automatically update paired tags like HTML or XML when editing one part.
• 📋 **Commenting Shortcuts**: Use Ctrl+L to highlight lines and Ctrl+/ to toggle comments, making it easier to manage code comments.
• 📱 **Terminal Productivity**: Open terminal sessions within VS Code and use Ctrl+Backtick to access the current working directory. Customize terminal sessions with different names and colors.
• 🔄 **Version Control Simplicity**: VS Code's Source Control tab simplifies Git operations, and extensions like GitLens provide additional visualization and accountability for code changes.
• 🔗 **Remote Development**: Extensions like Remote Repositories, Remote SSH, and Remote Containers allow for streamlined development environments without complex Git commands.
• 📚 **Code Snippets and Extensions**: Utilize custom snippets and extensions to reduce boilerplate code and enhance productivity, with tools like 'as code' for JSON to TypeScript type inference.

Q & A

What is the main message conveyed in the video about Visual Studio Code (VS Code)?

The video emphasizes that VS Code is more than a simple text editor; it is a powerful tool with numerous productivity-boosting features that can significantly enhance coding efficiency. It contrasts amateur techniques with professional ones, highlighting how professionals leverage these features to write and analyze code faster.

How can one quickly open a directory or edit a file in VS Code from the command line?

You can quickly open a directory or edit a file in VS Code from the command line by using the 'code' command. However, for Mac or Linux users, the binary must be added to the path first.

What is the significance of the 'Control P' keyboard shortcut in VS Code?

The 'Control P' keyboard shortcut brings up the Command Palette in VS Code, which provides access to all the editor's features and commands from the keyboard without needing to memorize multiple key bindings.

How does the video suggest improving productivity when working with large files in VS Code?

The video suggests using the '@' symbol from the Command Palette to list every symbol in the code, allowing for quick navigation to any function or interface needed within the file.

What is the benefit of using 'Control Shift Period' in VS Code?

Using 'Control Shift Period' allows you to find a symbol throughout the entire project, including all dependencies like 'node_modules', which can be very useful for locating specific interfaces or functions across your codebase.

How can one edit multiple instances of the same characters across a file in VS Code?

After highlighting the characters with 'Control D', you can repeatedly press 'Ctrl D' to edit all instances of the highlighted characters simultaneously, effectively allowing you to edit three lines of code at the same time.

What is the purpose of the 'Auto Rename Tag' extension in VS Code?

The 'Auto Rename Tag' extension automatically renames the closing tag when you edit the opening tag, making it easier and faster to work with HTML or other languages that use tag-based syntax.

How can the 'Better Comments' extension enhance code commenting in VS Code?

The 'Better Comments' extension provides automatic highlighting in comment text, making it easier to differentiate between comments based on their content, such as highlighting TODOs in orange and lines starting with a '!' in red.

What is the advantage of using the 'Remote Repositories' extension in VS Code?

The 'Remote Repositories' extension allows you to work with a Git repository on GitHub directly from VS Code without needing to clone it locally. You can create branches, edit code, and submit pull requests, all within the editor, simplifying the development process.

How can custom snippets be created and utilized in VS Code to improve productivity?

Custom snippets can be created through the 'Configure User Snippets' command in the Command Palette. These snippets can be global or scoped to a specific workspace, allowing you to quickly insert frequently used code patterns into your projects.

What does the 'JSON as Code' extension do in VS Code?

The 'JSON as Code' extension infers TypeScript types from a JSON object, using a tool called 'Quick Type'. This can save significant time when working with JSON data by automatically generating types for the JSON schema.

How can one efficiently rename symbols or variables across a project in VS Code?

To rename symbols or variables, first find the instance you want to rename, then use the 'Find All References' feature to locate all occurrences. After that, use the 'Rename Symbol' option to change the name safely across all files.

Outlines

00:00

🚀 Maximizing VS Code Productivity

This paragraph discusses the true potential of Visual Studio Code (VS Code) beyond its appearance as a simple text editor. It highlights the importance of using keyboard shortcuts and commands to boost productivity, rather than relying on the mouse. The video introduces various techniques used by professionals to efficiently write and analyze code, emphasizing the value of time. It also covers the use of the Command Palette and extensions like Quoca for executing code directly in the editor and navigating through large files with ease.

05:01

🎯 Enhancing Code Editing with Shortcuts

The focus of this paragraph is on specific keyboard shortcuts and features within VS Code that can significantly improve code editing speed. It explains how to use the Command Palette for quick file access and symbol navigation, the efficiency of using keyboard shortcuts over the mouse, and the power of multi-cursor editing. Additionally, it touches on the Auto Rename Tag extension for easier HTML tag management and the use of VS Code tasks to simplify repetitive terminal commands.

10:02

📁 Navigating Code and Terminal Efficiency

This paragraph delves into the intricacies of code navigation and terminal usage within VS Code. It covers the use of the 'Find' feature for efficient code searching, the benefits of the Better Comment extension for enhancing comment readability, and the use of Git commands and extensions like GitLens for better source control management. The paragraph also introduces the Remote Repositories extension for streamlined GitHub interaction and the convenience of extensions like Remote SSH and Remote Containers for development environments.

Keywords

💡Visual Studio Code (VS Code)

VS Code is a popular, open-source code editor developed by Microsoft. It is highly customizable and supports a wide range of programming languages, making it a versatile tool for developers. In the video, VS Code is compared to a knife, highlighting that its effectiveness depends on the skill of the user. The video aims to transition viewers from basic usage to more advanced techniques to boost productivity.

💡Productivity Boosting Features

These refer to the various tools and shortcuts within VS Code that can significantly improve a developer's efficiency and speed when writing and analyzing code. The video aims to introduce viewers to these features, which they might not be using yet, to help them work more effectively.

💡Keyboard Shortcuts

Keyboard shortcuts are quick key combinations that allow users to perform common actions without using a mouse, thus increasing speed and efficiency. In the context of the video, learning and using keyboard shortcuts in VS Code is emphasized as a key to becoming a more proficient user.

💡Command Palette

The Command Palette in VS Code is a powerful tool that provides access to all the editor's commands through the keyboard. It allows users to execute commands, search for files, and access extension-specific features without needing to memorize key bindings.

💡Extensions

Extensions in VS Code are add-ons that enhance the editor's functionality by providing new features, languages, or themes. The video emphasizes the importance of extensions in customizing VS Code to suit specific development needs.

💡Multi-Cursor Editing

Multi-cursor editing is a feature in VS Code that allows users to have multiple cursors or points of editing in the same or different files simultaneously. This大幅提升编码效率，特别是在需要在多个地方进行相同更改时.

💡Terminal

The Terminal in VS Code is an integrated command-line interface that allows developers to run shell commands directly within the editor. It is a crucial tool for executing scripts, managing packages, and performing version control tasks.

💡Version Control

Version control is a system that tracks changes to code over time, allowing developers to collaborate, revert changes, and manage different versions of their projects. Git is a widely used version control system, and the video discusses how VS Code's interface simplifies Git operations.

💡Git Lens

Git Lens is an extension for VS Code that enhances the built-in Git capabilities by providing a detailed visualization of code history, authorship, and changes. It helps developers understand the evolution of their codebase and who made specific changes.

💡Remote Development

Remote development refers to the ability to work on code repositories hosted on platforms like GitHub directly from within VS Code, without the need to clone the repository to a local system. This streamlines the development process and allows for real-time collaboration.

💡Snippets

Snippets are small, reusable pieces of code that can be quickly inserted into a file to save time and reduce redundancy. In VS Code, users can create custom snippets or use pre-built snippets available in the extensions marketplace.

💡Code Navigation

Code navigation refers to the strategies and tools used to efficiently move through and understand large codebases. This includes finding and jumping to symbols, searching for specific functions or classes, and understanding the structure of the code.

Highlights

Visual Studio Code (VS Code) is a powerful tool that can significantly boost productivity, but its full potential is unlocked with efficient usage.

VS Code is often mistaken for a simple text editor, but it contains numerous features that can enhance coding speed and analysis.

Using the VS Code CLI (code command) from the terminal to open directories or files is faster than using the file explorer.

For Mac or Linux users, the VS Code binary needs to be added to the path to use the code command effectively.

Reducing mouse reliance in VS Code increases productivity, as most actions can be performed quicker with keyboard shortcuts.

The Command Palette (Control+Papa) offers the full power of VS Code from the keyboard without memorizing numerous key bindings.

The Command Palette can also execute JavaScript directly in the file and manage extensions like Quoca.

Navigating to symbols within a file or across the entire project can be done efficiently using the Command Palette or Ctrl+Shift+Period.

Editing code is faster with keyboard shortcuts like Control+Golf for jumping to specific lines and Ctrl+D for multi-cursor editing.

Multi-line editing can be improved with the Auto Rename Tag extension, which automatically updates closing tags when editing opening tags.

Moving or copying lines without the mouse can be achieved using Alt+Up/Down Arrows and Alt+Shift+Up/Down Arrows.

Commenting out code is simplified with Ctrl+Forward Slash and the Better Comments extension for enhanced readability.

Terminal usage in VS Code can be enhanced with multiple sessions, different shells, and command history navigation using keyboard shortcuts.

VS Code tasks allow for running repetitive commands without manually typing them in the terminal.

Git commands can be executed and managed more safely and easily with the Source Control tab and the Git Lens extension.

Remote Repositories, Remote SSH, and Remote Containers extensions transform VS Code into a full-fledged integrated development environment.

Custom snippets can be created to avoid writing boilerplate code repeatedly, and pre-built snippets may already exist for popular frameworks.

The Pace JSON as Code extension can save time by automatically inferring TypeScript types from JSON objects.

Renaming symbols in code is safer using the Find All References or Implementations feature followed by the Rename Symbol option.

Transcripts

visual studio code is like a knife it's

only as good as the hands that wield it

but unfortunately it has more knobs than

a fighter jet and requires the steady

hand of a surgeon to the untrained eye

vs code is just a simple text editor

like microsoft word with code

highlighting

but in reality it contains a ton of

productivity boosting features that

you're probably not using yet

in today's video we'll compare amateur

vs code techniques to the ones used by

professionals allowing you to write and

analyze your code faster

because the most valuable thing you own

in this world is your time if you're new

here like and subscribe then leave your

best vs code pro tip in the comments

i'll choose one of them to win this free

t-shirt next week and now let's jump

right into things by installing vs code

once installed you'll want to open up a

directory with some files in it maybe

you just generated a new astro project

from the command line

then to open it in your editor you pull

up the file explorer and click

open with vs code that works but it

would have been much quicker had you

done it from the command line if you're

in the terminal and want to open a

directory or edit a file you can do that

quickly with the vs code cli

using the code command but keep in mind

if you're on mac or linux you need to

first add the binary to your path

now that we have the editor opened it's

tempting to go around two different

windows with the mouse and click on

buttons to run commands just like we

would with any other software

but here's a little productivity secret

the less you rely on the mouse the

better

vs code allows you to use the mouse for

everything making the tool approachable

but that's really the most efficient way

to get things done you don't have to go

crazy and learn something like vim or

emax

but it's important to understand that

anything you do with your mouse can

likely be done quicker with the keyboard

virtually every command you see in the

vs code window can be done with a

keyboard shortcut you don't need to

memorize them all but knowing about 10

to 20 will literally change your life

letting go of the mouse may not feel

natural at first but mastering the

keyboard is a lot like learning to play

an instrument

it takes a lot of practice but

eventually it becomes second nature the

first shortcut you'll want to memorize

is control papa

which brings up the command palette the

beauty of the command palette is that it

gives you all the power of vs code from

the keyboard without having to memorize

a bunch of key bindings

by default it will give you a list of

recently opened files

in addition you can start typing a file

name to find it in your project and

that's obviously much quicker than

trying to find a file by clicking

through a bunch of directories in the

file explorer

but the command palette can do a lot

more if you type a right angle bracket

it will give you access to virtually any

command that you can run in vs code

along with the commands for the

extensions that you use

for example you may want to toggle the

minimap or one thing that you'll notice

in some of my videos is that i execute

javascript directly in the file itself

and that's made possible by an extension

called quoca which is a tool that i can

start and stop in any file via the

command palette the extension itself is

really cool

it automatically runs your javascript

code in the background then appends the

output directly in your editor which can

facilitate rapid prototyping when your

goal is to just write some plain

javascript code

now another really awesome thing we can

do here is find pieces of code or

symbols throughout our project when

working in a really big file it's easy

to get lost

the worst thing you can do is scroll

around the page looking for the function

or

interface that you need you could do

control foxtrot to find that text on the

page

but an even better approach is to use

the at symbol from the command palette

that'll list out every symbol in the

code so you can quickly navigate to it

and if you want you can bypass the

command palette altogether by entering

ctrl shift period to do the same thing

directly in the file itself now in other

cases you may want to find a symbol

throughout the entire project

including all of your dependencies like

node modules use a hashtag

followed by the name of the symbol

you're looking for to find that

interface in your own code or your

dependencies code

another really awesome bonus tip here is

that if you have a really long class

name you don't even have to type the

whole thing out

just the first character in each camel

cased word and it will work just as well

the command palette is awesome but it

doesn't really help you write your code

faster when you see a line of code that

you want to edit

the natural approach is to take the

mouse and then highlight that line

a developer might do this hundreds if

not thousands of times per day

a faster way to get to where you need to

go is to hit control golf

followed by the line number that you

want to focus on from there use the

arrow keys to go character by character

and hold down the shift key if you want

to highlight something or use ctrl arrow

to move word by word

when your cursor lands on a word that

you want to edit hit ctrl

delta to highlight it so you can then

delete it or replace it

but here's where things get really mind

blowing if those characters appear

multiple times in the code and you want

to edit them all at the same

time just hit ctrl d again and again and

you're now a 3x developer editing three

lines of code at the same time

in some cases you may want to use the

mouse for multi-line editing

holding down alt while you click on

different parts of the editor will set

up cursors in multiple

places that can be really useful for

writing repetitive css properties

one place you might use this often is

with opening and closing html tags

but you can actually make your life even

easier by installing the auto rename tag

extension

this will automatically rename the

closing tag when you edit the opening

tag and it can work in other languages

beyond just html

now in other cases you may just want to

delete or move a line

the amateur approach is to highlight

that line do a right click with the

mouse and find cut then do another right

click with the mouse and find paste

here's the faster approach if your

cursor is already on a line all you have

to do is hit ctrl x to cut it no

highlighting is necessary

but if your goal is to move the line

somewhere else then there's an even

better approach

use alt followed by the up or down

arrows to move the line somewhere else

quickly

and if you want to copy that line as you

move it use alt shift followed by the

arrows

now one other thing that you likely

often do in your code is comment it out

to disable it the worst possible thing

you can do

is go line by line adding the comment

syntax to each line

if this is how you currently do comments

you'll want to pay attention to this

next shortcut

first highlight the code using your

mouse or by using the control

l command to highlight line by line once

highlighted use ctrl forward slash to

toggle comments on that code now when

speaking of code comments

it's often important to format them

properly in javascript that typically

means following the js docs standard

and there's an extension called add

js.com once installed

it allows us to highlight a function

then use the command palette to add a

comment to it automatically

bonus tip in your js dot comments you

can use the link tag to link to other

symbols in your source code when you

hover over that symbol it will give you

the comment that if you click the link

it will take you to that part of the

code automatically that makes writing

comments much easier but what if we

could also make them easier to read

by also installing the better comment

extension we'll get automatic

highlighting in our comment text

any line that starts with a bang is now

red and all of our to-do's are

highlighted orange

but now let's switch gears into a very

important topic the terminal you can

open a new terminal session directly in

vs code in your current working

directory

using control backtick when you start a

new terminal it uses your default shell

which in my case is bash

if you click the caret you can use a

different shell if needed like

powershell or wsl

what often happens though is you need

multiple terminal sessions running

at the same time like one for your test

runner one for your dev server

and so on to keep things organized click

on the icon

then change the name or the color of

that session and now you don't have to

fumble between different terminals to

figure out what each one is doing

now when you type out an actual command

in the terminal and you screw it up you

can use ctrl arrows to quickly navigate

to a different part of the actual

text because your mouse won't even work

here but if you already hit enter and

got an error message

you can use ctrl k to clear out the

terminal then use the up arrow to go to

the last command in your history

and just rerun it instantly but what if

there is a way where you didn't have to

write the same terminal command over and

over again

like how many times have you written npm

run build or npm run test

to simplify things you can create a vs

code task

which is just a json configuration that

contains a command that you want to run

in the terminal

now instead of pulling up the terminal

and writing out a command you can just

use the command palette to run it

automatically and it will show the name

of that task in the terminal sidebar

here

speaking of the terminal one of the most

common things you'll do here is execute

commands for version control using

get not only are git commands hard to

remember but it can be very dangerous

and painful when you mess them up the

standard procedure for get ups is

to go to stack overflow and look at the

top questions there because they're

almost all related to get

the funny thing though is that i think

this is an area where it actually makes

more sense to use your mouse as opposed

to the keyboard in the source control

tab in vs code we get a breakdown of all

the changes in our current working

directory

we can just point and click at files

that we want to stage and also notice

the icon next to each file which will

tell us if that file has been modified

added or removed now from the drop down

menu we get a list of all the possible

git commands

most often we're just committing files

but vs code will give us a breakdown of

all the possible commands without having

to look them up in the documentation

if you're working on a big complex

project with other developers i'd highly

recommend installing the git lens

extension it provides a bunch of extra

ways to visualize and explore your code

and most importantly it will tell you

exactly who to blame when your code

stops working

it's a really great extension but now

we're going to look at another extension

that's brand new and even crazier

normally when you want to work with a

git repo on github you need to clone it

to your local system but now

thanks to the monopoly that microsoft

has on the developer ecosystem

this process can now be streamlined with

remote repositories

install the extension then click on this

icon in the bottom left corner

to open up a remote repository it'll

have you log in with your github account

then you can start contributing to any

repo on github without needing to worry

about complex git commands you can

create a new branch

edit some code and then submit a pull

request without ever having to leave bs

code in addition to remote repositories

you should also know about remote ssh to

connect to a remote server

and also remote containers to use a

docker container as your development

environment

instead of your local system these

extensions are managed by microsoft and

can turn your basic text editor into a

full-blown integrated development

environment

but let's get back to our actual code in

many projects you may find yourself

writing the same boilerplate code over

and over again

if you find yourself doing that an easy

way to improve your productivity

is to create a custom snippet from the

command palette run the configure user

snippets command

you can create global snippets to use

across all of your projects or scope

them to an individual workspace

basically you just modify this json file

with the code that you want to insert

then when you go back to your main

project you can use the insert snippet

command

to quickly add your own custom

boilerplate but if you work with a

popular framework

there's a good chance that somebody

already did this work for you before you

go building your own

check out the extensions panel to see if

there are any pre-built snippets out

there that already meet your needs

oh and here's a cool random thing if you

need to create a new file in the file

explorer

but it lives in a directory that doesn't

exist yet you can create that file

along with any nested directories on top

of it automatically

by just putting a slash in front of the

file name and vs code will automatically

create those directories

now yet another awesome tool that i want

to mention is the pace json as code

extension

if you work with typescript one

extremely tedious thing you might have

to do

is take a json object and convert it to

a bunch of types to represent some kind

of schema this extension will take your

json and automatically infer types using

a tool called

quick type and in some cases that can

save you hours of work

but the final thing i want to leave you

with is a quote you've probably heard

before

there are only two hard things in

computer science cash invalidation

and naming things naming your code is

hard which means that you'll often be

renaming things

when you name something poorly your

first idea might be to do a find and

replace

across your whole project but that can

be kind of dangerous a better idea is to

find the thing you want to rename

then if you right click it you can find

all of its references or

implementations then from there you can

use the rename symbol option

to safely rename it across all of your

files i'm going to go ahead and wrap

things up there but make sure to share

your own vsco pro tips in the comments

and if you want to support my work

consider sponsoring me on github or

becoming a pro member at fireship io

thanks for watching and i will see you

in the next one