VS Code platform

<figure><img alt="blurred lights of vehicles speeding along a street" src="https://miro.medium.com/max/500/0*SrE_PxwMjx8" width="680" height="510"><figcaption class="ho hp cw cu cv hq hr cb b fo cd ce" data-selectable-paragraph="" dir="ltr">Photo by <a href="https://unsplash.com/@marcsm?utm_source=medium&amp;utm_medium=referral" class="ch hs" rel="noopener" dir="ltr">Marc Sendra Martorell</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" class="ch hs" rel="noopener" dir="ltr">Unsplash</a></figcaption></figure><a href="https://code.visualstudio.com/" rel="noopener" dir="ltr">Visual Studio Code</a> is a free and open source code editor that supports almost any and every programming language. It runs on Windows, macOS X, and Linux systems.<h1 data-selectable-paragraph="">Beyond an IDE</h1>VS Code has an exclusive <a href="https://marketplace.visualstudio.com/vscode" rel="noopener" dir="ltr">marketplace </a>that offers many off-the-shelf plugins to customize the platform to your needs, such as themes, extensions, debuggers, language supports, and other additional supports.Compared to Visual Studio, VS Code is significantly lightweight, and the difference can be instantly felt. This is because it runs applications in the background and independent from the IDE, making sure the IDE doesn't slow down.No matter what type of project, VS Code easily helps you set up the IDE. It can also run Azure and Docker and can deploy with confidence and ease when it comes to deploying applications. It supports Git and easy debugging, and it has IntelliSense that helps improve error-free and clean coding.<h1 data-selectable-paragraph="">Coding Faster</h1>Now that you know about VS Code, here are some exclusive features that will help accelerate and improve your coding with ease, thus boosting productivity.<h2 data-selectable-paragraph="">Multi-cursor editing</h2>The multi-cursor editing feature allows you to edit simultaneously at different locations in your code. With multi-cursor editing, this can be achieved in the following ways:<UL><LI>Box selection: Use the Shift+Arrow key (any direction with choice of select) or Shift+Alt when pressing the text with the mouse. You can also consider the Ctrl+Shift+Arrow key to select words and sections.</LI><LI>Add the cursor: Use the Ctrl+Shift+Arrow key (up or down) or mouse-click with Alt.</LI><LI>Create cursor on all occurrences: Select a single instance of string and press Ctrl+Shift+L. Now all occurrences will be selected at once.</LI></UL><h2 data-selectable-paragraph="">IntelliSense</h2>Visual Studio Code comes with pre-built JavaScript and TypeScript IntelliSense. Therefore the IDE suggests the next possible code that could be completed. It's similar to the text prediction feature on Google search or your mobile phone.For example, in the code below we create the <code dir="ltr">book</code> object:<PRE>var book = new Book();</PRE>To access the <code dir="ltr">title</code> attribute of the book, we need to do the following:<PRE>const title = book.title;</PRE>VS Code starts listing out the attributes and functions of the <code dir="ltr">book</code> object as soon as we hit <code dir="ltr">book</code>. Thus we can select the attributes we need. Suppose VS Code does not suggest any. Then we can press Ctrl+Space to enable the dropdown with suggestions.<h2 data-selectable-paragraph="">Line actions</h2>Working with an entire line is something many developers come across. VS Code offers a couple of shortcuts to improve productivity when editing a complete line. Here are some common things we would do with lines:<UL><LI>Copy and paste on the line immediately above or below: Ctrl+Alt+Arrow key (up or down).</LI><LI>Copy a complete code block above or below, and highlight the code block: Alt+Shift+Arrow key (up or down)</LI><LI>Move an entire line up or down: Alt+Arrow key</LI><LI>Delete an entire line: Ctrl+Shift+K</LI></UL><h2 data-selectable-paragraph="">Rename refactoring</h2>Sometimes we come across scenarios where we have to rename a certain function name or class, or a certain variable throughout the project. In that case, highlight the terminology that you wish to rename, and hit the F2 key. This will rename all instances.In the below example, rename the <code dir="ltr">AppButton</code> component to <code dir="ltr">Button</code>.<PRE>function AppButton({id, name, onClick}){ return( &lt;&gt; &lt;Button id={id} name={name} onClick={onClick} /&gt; &lt;&gt; )}</PRE>Highlight <code dir="ltr">AppButton</code> and press F2. Then rename it to <code dir="ltr">Button</code>. Everywhere in the project with the term, <code dir="ltr">AppButton</code> will be renamed to <code dir="ltr">Button</code>.<h2 data-selectable-paragraph="">Formatting</h2>Formatters keep the code clean. They make the code more readable and writeable. This makes it easier and quicker to debug the code. Visual Studio Code has a pre-installed formatter for JavaScript and TypeScript.You can achieve this by using Shift+Alt+F to format the complete document or by selecting the desired block of code and using Ctrl+K Ctrl+F.You can also tweak settings to format code on saving, auto-saving, and many more. Format-on-save is something I find convenient. Therefore, I do not want to always be pressing on different combinations but just use a simple save.<h2 data-selectable-paragraph="">Code folding</h2>With hundreds to thousands of lines of code, code folding is a very useful feature. Collapsing code blocks/sections improves readability. This can be achieved by pressing Ctrl+Shift+[ to fold and Ctrl+Shift+] to unfold from the current cursor position.Sometimes you will want to fold all sections. This can be achieved by Ctrl+K Ctrl+0 to fold and Ctrl+K Ctrl+J to unfold.Many languages support indentation, and folding is mostly achieved by indentation. You can indent and create foldable sections using Ctrl+K Ctrl+1 through Ctrl+K Ctrl+5. However, a much easier way would be to format your code using a code formatter and then fold it.<h2 data-selectable-paragraph="">Errors and warnings</h2>Visual Studio Code is intelligent enough to identify and highlight errors (usually syntax errors) and warnings with squiggles (wiggly underlines). Using the F8 key, you can sequentially navigate across them and view the detailed error message. As you correct them, the scroll bar and squiggles will update.<h2 data-selectable-paragraph="">Snippets</h2>Code snippets are small pieces of code. With Visual Studio Code, based on the project you have created, whether it be PHP or JavaScript, you have simple code snippets, which, once selected, will complete the rest of the code for you, helping you to accelerate editing and write cleaner formatted code.For example, let's give the try-catch block a shot with PHP. Simple type “try,” select “try catch” from the list of suggestions, and press Tab. The try-catch block will be created as follows.<figure><img alt="" src="https://miro.medium.com/max/500/1*YrUpws5EId2CF7f_6NjZpw.png" width="621" height="120"><figcaption class="ho hp cw cu cv hq hr cb b fo cd ce" data-selectable-paragraph="" dir="ltr">Image by <a href="https://umayir10.medium.com/" class="ch hs" rel="noopener" dir="ltr">Author</a></figcaption></figure>For creating custom snippets of code, you can refer to this article. This article creates a custom code snippet for React Components.<h2 data-selectable-paragraph="">JavaScript type checking</h2>Visual Studio Code has a strong pull towards JavaScript and TypeScript. Sometimes, type-checking JavaScript code can help you spot errors that you might have not caught. You can run a TypeScript type checker against your JS code by simply adding the <code dir="ltr">//@ts-check</code> comment on top of the file.You can apply the type check to the complete workspace by using the <code dir="ltr">“javascript.implicitProjectConfig.checkJs” : true</code> to the complete workspace and using <code dir="ltr">//@ts-nocheck</code>or <code dir="ltr">//ts-expect-error</code>to individual files or lines.<PRE>//ts-checklet loggedIn = true; loggedIn = 1;</PRE>For more information regarding JavaScript with VS Code, refer to <a href="https://code.visualstudio.com/docs/languages/javascript" rel="noopener" dir="ltr">the documentation</a>.<h2 data-selectable-paragraph="">Terminal management</h2>Apart from the code, VS Code has a terminal that can be accessed by simply using the Ctrl+~ command.You can add a new terminal by using Ctrl+Shift+~ . You can navigate between terminals using Ctrl+pgUp or pgDown. You can split your terminal using the Ctrl+Shift+5 and use Alt+Arrow key (right/left) to focus between the two.For a more detailed understanding, visit the <a href="https://code.visualstudio.com/docs/editor/integrated-terminal" rel="noopener" dir="ltr">official documentation</a>.<h1 data-selectable-paragraph="">Complimentary Advice: Keyboard Over Mouse</h1>I am more comfortable using keyboard shortcuts, and I use the mouse at a minimum. This might seem like a lot to remember at the very beginning of using the keyboard, but when you continue to use it, it’s just like Control C Control V: all in muscle memory. You don’t even have to remember it.Let’s try to get this achieved using the keyboard and minimize the mouse's use.And that is why I would prefer to use the keyboard over the mouse.<h1 data-selectable-paragraph="">Conclusion</h1>Visual Studio Code offers the most comfortable atmosphere for developers, and its scalability makes it very flexible for developing projects of any type, anywhere, at any time.Sharing knowledge is the only way to gain knowledge. Feel free to add on and contribute via comments for those who may benefit from this story.Have fun! Enjoy coding!

Visual Studio Code is a free and open source code editor that supports almost any and every programming language. It runs on Windows, macOS X, and Linux systems. VS Code has an exclusive marketplace…

computerscience

Computer Science

<a href="https://code.visualstudio.com/">Visual Studio Code </a>is a free and open source code editor that supports almost any and every programming language. It runs on Windows, macOS X, and Linux systems.

VS Code has an exclusive <a href="https://marketplace.visualstudio.com/vscode">marketplace </a>that offers many off-the-shelf plugins to customize the platform to your needs, such as themes, extensions, debuggers, language supports, and other additional supports.

Compared to Visual Studio, VS Code is significantly lightweight, and the difference can be instantly felt. This is because it runs applications in the background and independent from the IDE, making sure the IDE doesn't slow down.

No matter what type of project, VS Code easily helps you set up the IDE. It can also run Azure and Docker and can deploy with confidence and ease when it comes to deploying applications. It supports Git and easy debugging, and it has IntelliSense that helps improve error-free and clean coding.

Now that you know about VS Code, here are some exclusive features that will help accelerate and improve your coding with ease, thus boosting productivity.

The multi-cursor editing feature allows you to edit simultaneously at different locations in your code. With multi-cursor editing, this can be achieved in the following ways:

<ul><li>Box selection: Use the Shift+Arrow key (any direction with choice of select) or Shift+Alt when pressing the text with the mouse. You can also consider the Ctrl+Shift+Arrow key to select words and sections. </li><li>Add the cursor: Use the Ctrl+Shift+Arrow key (up or down) or mouse-click with Alt. </li><li>Create cursor on all occurrences: Select a single instance of string and press Ctrl+Shift+L. Now all occurrences will be selected at once. </li> </ul>

Visual Studio Code comes with pre-built JavaScript and TypeScript IntelliSense. Therefore the IDE suggests the next possible code that could be completed. It's similar to the text prediction feature on Google search or your mobile phone.

For example, in the code below we create the <code>book </code> object:

To access the <code>title </code>attribute of the book, we need to do the following:

VS Code starts listing out the attributes and functions of the <code>book </code> object as soon as we hit <code>book </code>. Thus we can select the attributes we need. Suppose VS Code does not suggest any. Then we can press Ctrl+Space to enable the dropdown with suggestions.

Working with an entire line is something many developers come across. VS Code offers a couple of shortcuts to improve productivity when editing a complete line. Here are some common things we would do with lines:

<ul><li>Copy and paste on the line immediately above or below: Ctrl+Alt+Arrow key (up or down). </li><li>Copy a complete code block above or below, and highlight the code block: Alt+Shift+Arrow key (up or down) </li><li>Move an entire line up or down: Alt+Arrow key </li><li>Delete an entire line: Ctrl+Shift+K </li> </ul>

Sometimes we come across scenarios where we have to rename a certain function name or class, or a certain variable throughout the project. In that case, highlight the terminology that you wish to rename, and hit the F2 key. This will rename all instances.

In the below example, rename the <code>AppButton </code>component to <code>Button </code>.

Highlight <code>AppButton </code>and press F2. Then rename it to <code>Button </code>. Everywhere in the project with the term, <code>AppButton </code>will be renamed to <code>Button </code>.

Formatters keep the code clean. They make the code more readable and writeable. This makes it easier and quicker to debug the code. Visual Studio Code has a pre-installed formatter for JavaScript and TypeScript.

You can achieve this by using Shift+Alt+F to format the complete document or by selecting the desired block of code and using Ctrl+K Ctrl+F.

You can also tweak settings to format code on saving, auto-saving, and many more. Format-on-save is something I find convenient. Therefore, I do not want to always be pressing on different combinations but just use a simple save.

With hundreds to thousands of lines of code, code folding is a very useful feature. Collapsing code blocks/sections improves readability. This can be achieved by pressing Ctrl+Shift+[ to fold and Ctrl+Shift+] to unfold from the current cursor position.

Sometimes you will want to fold all sections. This can be achieved by Ctrl+K Ctrl+0 to fold and Ctrl+K Ctrl+J to unfold.

Many languages support indentation, and folding is mostly achieved by indentation. You can indent and create foldable sections using Ctrl+K Ctrl+1 through Ctrl+K Ctrl+5. However, a much easier way would be to format your code using a code formatter and then fold it.

Visual Studio Code is intelligent enough to identify and highlight errors (usually syntax errors) and warnings with squiggles (wiggly underlines). Using the F8 key, you can sequentially navigate across them and view the detailed error message. As you correct them, the scroll bar and squiggles will update.

Code snippets are small pieces of code. With Visual Studio Code, based on the project you have created, whether it be PHP or JavaScript, you have simple code snippets, which, once selected, will complete the rest of the code for you, helping you to accelerate editing and write cleaner formatted code.

For example, let's give the try-catch block a shot with PHP. Simple type “try,” select “try catch” from the list of suggestions, and press Tab. The try-catch block will be created as follows.

For creating custom snippets of code, you can refer to this article. This article creates a custom code snippet for React Components.

Visual Studio Code has a strong pull towards JavaScript and TypeScript. Sometimes, type-checking JavaScript code can help you spot errors that you might have not caught. You can run a TypeScript type checker against your JS code by simply adding the <code>//@ts-check </code>comment on top of the file.

You can apply the type check to the complete workspace by using the <code>“javascript.implicitProjectConfig.checkJs” : true </code>to the complete workspace and using <code>//@ts-nocheck </code>or <code>//ts-expect-error </code>to individual files or lines.

For more information regarding JavaScript with VS Code, refer to <a href="https://code.visualstudio.com/docs/languages/javascript">the documentation </a>.

Apart from the code, VS Code has a terminal that can be accessed by simply using the Ctrl+~ command.

You can add a new terminal by using Ctrl+Shift+~ . You can navigate between terminals using Ctrl+pgUp or pgDown. You can split your terminal using the Ctrl+Shift+5 and use Alt+Arrow key (right/left) to focus between the two.

For a more detailed understanding, visit the <a href="https://code.visualstudio.com/docs/editor/integrated-terminal">official documentation </a>.

Complimentary Advice: Keyboard Over Mouse

I am more comfortable using keyboard shortcuts, and I use the mouse at a minimum. This might seem like a lot to remember at the very beginning of using the keyboard, but when you continue to use it, it’s just like Control C Control V: all in muscle memory. You don’t even have to remember it.

Let’s try to get this achieved using the keyboard and minimize the mouse's use.

And that is why I would prefer to use the keyboard over the mouse.

Visual Studio Code offers the most comfortable atmosphere for developers, and its scalability makes it very flexible for developing projects of any type, anywhere, at any time.

Sharing knowledge is the only way to gain knowledge. Feel free to add on and contribute via comments for those who may benefit from this story.

How To Code Faster in Visual Studio Code

VS Code platform

CURATED BY

Related collections

More like this