www.johnpapa.net Open in urlscan Pro
151.101.67.7  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 * Home
 * Speaking
 * Training
 * Articles
 * About
 * Contact


 * Twitter Twitter icon
 * Instagram
 * Dev.to dev.to icon
 * LinkedIn LinkedIn icon
 * RSS RSS icon




REFACTORING WITH VISUAL STUDIO CODE

28 April 2015
 * Share on Twitter Twitter icon
 * Tweet
 * Share on Facebook Facebook icon
 * Share on Google+
 * Share on Reddit Reddit icon
 * Share on LinkedIn LinkedIn icon

Visual Studio Code has some awesome refactoring features. Here are some of my
favorites.


# VISUAL STUDIO CODE SERIES

Follow this series to learn more about what you can do with Visual Studio Code!

 1. Introducing Visual Studio Code
 2. Getting Started with Visual Studio Code
 3. Intellisense
 4. Refactoring
 5. Debugging
 6. Git Integration and Preferences


# MOVE LINE UP / DOWN

VSCode will move a line up when you use OPT+UPARROW or down when you use
OPT+DOWNARROW.


# GO TO NEXT ERROR OR WARNING

When you have multiple errors or warnings, you can visit each of them in the
current file using the Go to Next Error or Warning. Press F8 and you will see
the first error or warning. Press F8 again and you will see the next one.




# GO TO DEFINITION

When you are looking at your code and you want to find where a function or
variable is defined, you can press F12 to navigate to the definition. This works
in the same file or to another file when using TypeScript.


# PEEK AT DEFINITION

This is like the Go to Definition except instead of navigating to the definition
a window appears showing you a peek of the definition. Seeing is believing, so
check this out below, using OPTION F12



You can edit either file in this mode. If you want to navigate to the file,
click on the file name in the header of the peek view. You can exit this mode
and close the peek by clicking ESC.


# FIND ALL REFERENCES

VSCode help you find all references of a variable, everywhere it can be
determined that it is being used, with SHIFT F12. This works incredibly well
with TypeScript. VSCode uses TypeScript to figure out how to find those
references. As such, this feature works less great in JavaScript.

This is helpful when refactoring so you can find all of the places a function or
property may be used before refactoring.

Notice that the files are displayed to the right. You can click on these to see
each references.




# CHANGE ALL OCCURRENCES

Put your cursor in a variable or function and click CMD+F2 then begin typing.
This will find all occurrences in the open file and change them as you type,
which is ideal for local refactoring.




# MULTI-CURSOR

Click + OPTION in your code. Then find another place in code and repeat, and
repeat, and repeat. Now you have multiple cursors in the file and you can edit
all of them at once!



I love this, but I really want to also be able to do this through search via
keyboard so I can find all instances of a phrase and then edit.


# RENAME SYMBOLS IN ALL FILES ( F2 )

Sometimes you want to rename in 1 file, and other times you want to rename
across multiple files. For example, you may want to rename a publicly accessible
function on an Angular service and have everywhere that uses it get updated.

First put your cursor on the member and click F2.



Then type the new name and hit the Enter key. This will rename all of the
occurrences in every file in your project.

This shows the newly renamed getThePeople method in the dataservice.ts file.

This shows the newly renamed getThePeople method in the dashboard.controller.ts
file.


# FORMAT CODE

VSCode makes it easy to format your code with the appropriate indentation and
alignment through it’s Format Code command. Just select the code block you want
to format, use CMD+SHIFT+P to open the command palette, and type format code.
You can also type part of the command as it will do partial matching.


 * Tweet Twitter icon
 * Tweet
 * Post Facebook icon
 * Share
 * Post Reddit icon
 * Update LinkedIn icon
 * RSS RSS icon

Next Post
Visual Studio Code Webinar
Previous Post
Intellisense with Visual Studio Code


JOHN PAPA

Hi, I'm John Papa. I author this blog, create courses for Pluralsight, and work
in Developer Relations. I am a professional storyteller, I contribute to OSS,
and I'm a Web technologist




LATEST PROJECTS

Must Read Most Recent
 * Comparing Callbacks, Promises and Async Await in TypeScript
 * Debug Angular 9: Interacting with Components
 * Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
 * Shifting Your Node Express APIs to Serverless
 * Predictive Preloading Strategy for Your Angular Bundles
 * How I Write Online Articles
 * Debug Your Node.js App in 60 Seconds

 * Code Spaces with Chris Noring on Web Rush #219
 * Routing with Tanner Linsley on Web Rush #218
 * AI in 2023 - What’s it all Mean? on Web Rush #217
 * JavaScript Proxies with Evyatar Alush on Web Rush #216
 * How I Doubled by Lighthouse Performance with Astro.js with Corbin Crutchley
   on Web Rush #215
 * Securing Your Web Apps and Source Code with Feross Aboukhadijeh on Web Rush
   #214
 * Dan Wahlin, This is Your Life on Web Rush #213


 * Twitter Twitter icon
 * Instagram
 * Dev.to dev.to icon
 * LinkedIn LinkedIn icon
 * RSS RSS icon

COPYRIGHT 2023 JOHN PAPA

This work is licensed under a Creative Commons Attribution 4.0 International
License. In other words, share generously but provide attribution.

DISCLAIMER

Opinions expressed here are my own.

PUBLISHED WITH GHOST

This site is hosted on Ghost.io
Theme by Cross Stroke.