COOL TIPS & TRICKS ON VSCODE
Tags: webdev, programming, productivity, career
Published: 2022-10-05 20:34:04

## <u>INTRODUCTION</u>

You may dive right in and start learning how to use Visual Studio Code effectively using "Tips and Tricks." You'll master practical keyboard shortcuts and become familiar with its robust editing, code intelligence, and source code control features. 

## <u>GETTING STARTED</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08m1ce74zeud7bvf1s72.jpg)

✔ Opening the Get Started page is the best method to get started using VS Code. You will learn about the capabilities and modifications available in VS Code. Get started > Help.

✔ Select a Walkthrough to take a self-guided tour of VS Code's setup procedures, features, and in-depth customizations. The walkthroughs keep track of your progress as you learn and discover.

✔ If you are looking to improve your code editing skills open the Interactive Editor Playground. Try out VS Code's code editing features, like multi-cursor editing, IntelliSense, Snippets, Emmet, and many more. Help > Editor Playground.

## Default Keyboard Shortcuts

The Command Palette contains each command along with the corresponding key binding (if it exists). Use the Command Palette to remind you of any keyboard shortcuts you may have forgotten.

## SOME KEYBOARD SHORTCUTS (IOS, WINDOWS,LINUX)

📌 MAC OS;

<u>Display</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eac421cxfuqzqxp59joi.jpg)

<u>Debug</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1vq7q6cqiv4l5themw3.jpg)

<u>Integrated Terminal</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6omjqe7gub2ierlm2j1.jpg)

<u>File Management</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh9p0939yyed6a1amxuc.jpg)

<u>Editor Management</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi3crziw1q1cy3mnow2m.jpg)

<u>Navigation</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43yis4cjw2s7a0u8q8lo.jpg)

<u>Rich Languages Editing</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sz4608jrozcia2od5sw2.jpg)

<u>Search and Replace</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fslqpwwtlxcu10esx64t.jpg)

<u>General</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkq3xir4hznfxzy8uin3.jpg)

<u>Basic Editing</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac23sk1jta3yzb59at4g.jpg)

<u>Multi Cursor and Selection</u>



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhdqzzrvz2n6i3guo13p.jpg)


📌 WINDOWS;

<u>Display</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gc5segmmly8m2twrdij.jpg)

<u>Debug</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn8w73s3k1ezgx2tt3f5.jpg)

<u>Integrated terminal</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idubyhy5ijceaqy4cth5.jpg)


<u>File Management</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7psf6e2mihsfebdoi5y.jpg)


<u>Editor Management</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejtuhqaddljtcjjquxwh.jpg)

<u>Rich Languages Editing</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w2evv5llvjj2o2e24ws.jpg)


<u>Multi-cursor and selection</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huuxzvcyao0xy60dlz1g.jpg)

<u>Search and replace</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcn4laeaxu8iijl3owrl.jpg)

<u>Navigation</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02l8qq6zgi09zzubarsg.jpg)

<u>Basic editing</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyvmmxign2j9yitz9nhx.jpg)

<u>General</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgnk4xkn3zu5stu3tfgu.jpg)

📌LINUX;

<u>Display</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z01zfwt3gespwh7ek0x1.jpg)

<u>Debug</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxjwzpy6wh4u0e5ya81z.jpg)


<u>Editor management</u>



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/try3mi36ufn0ua2xszyr.jpg)


<u>File management</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrhj7qroj1xygedusp3c.jpg)

<u>Integrated terminal</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ab9v7w0hq9uknlg0ah2.jpg)

<u>Multi-cursor and selection</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amvndmibe40hdxu1pdqv.jpg)

<u>Search and replace</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52yk9qszrqoj5k5j1how.jpg)

<u>Navigation</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnbchtd3nhxnckhlzp67.jpg)

<u>Rich languages editing</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rx2f1w501rod8ar9s1u.jpg)

<u>Basic editing</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqluu37v74cm3bwv4maz.jpg)

<u>General</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3kav18o1bkp24prvdcf.jpg)

## CUSTOMIZATION

You have a lot of options for customizing VS Code:

📌Change your theme
📌Change your keyboard shortcuts
📌Tune your settings
📌Add JSON validation
📌Create snippets
📌Install extensions

## FINDING EXTENSIONS

📌In the VS Code Marketplace.
📌Search inside VS Code in the Extensions view.
📌View extension recommendations
📌Community curated extension lists, such as awesome-vscode.

## Fast scrolling

In the editor and Explorers, quick scrolling is possible by pressing the Alt key. Fast scrolling utilizes a 5X speed multiplier by default, but you can change it in the Editor: Fast Scroll Sensitivity (`editor.fastScrollSensitivity`) setting.

## Git integration

Git integration is pre-installed in VS Code. The Extension Marketplace has more SCM providers that you can install. Although the Git integration is covered in this section, other SCM providers share a lot of the UI and gestures.

## Configure debugger

Selecting build a launch.json file from the Run and Debug view (Ctrl+Shift+D) will prompt you to choose the environment that best suits your project (Node.js, Python, C++, etc.). A launch.json file will be created as a result. Support for Node.js is pre-installed, whereas language extensions for other environments must be installed separately.

## Logpoints

When a logpoint is hit, a message is logged to the console as opposed to the debugger being stopped as is the case with breakpoints. Logpoints are particularly helpful for injecting logs during production server troubleshooting when the server cannot be changed or interrupted.

A logpoint that has been added using the Add Logpoint command in the left editor gutter will appear as a "diamond"-shaped icon. Although log messages can contain expressions to be evaluated inside curly brackets ("), they are still plain text.

## CONCLUSION
I hope this was helpful. Thanks for reading!