25 VS Code Productivity Tips and Speed Hacks
Summary
TLDRThe 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
π 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.
π― 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.
π 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.
Mindmap
Keywords
π‘Visual Studio Code (VS Code)
π‘Productivity Boosting Features
π‘Keyboard Shortcuts
π‘Command Palette
π‘Extensions
π‘Multi-Cursor Editing
π‘Terminal
π‘Version Control
π‘Git Lens
π‘Remote Development
π‘Snippets
π‘Code Navigation
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
Browse More Related Video
Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks
Como usar o VS CODE para programar? Guia COMPLETO e RΓPIDO!
Master VS Code's keyboard shortcuts in 13 minutes
Β‘No pierdas tu tiempo! Necesitas esta configuraciΓ³n para VSCode
How to Set up VS Code for Data Science & AI
12 VS Code Extensions to INCREASE Productivity 2024
5.0 / 5 (0 votes)