VS Code Extensions and Common Shortcuts for Web Designers

JavaScript (ES6) Code Snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor. It supports both JavaScript and TypeScript.

Auto Close Tag

After opening a tag in HTML and XML it’s a hectic job to close it. So he…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Nikhil Savalgi

JavaScript (ES6) Code Snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor. It supports both JavaScript and TypeScript.

Auto Close Tag

After opening a tag in HTML and XML it’s a hectic job to close it. So here is a nice solution. This extension closes the HTML and XML tag automatically.

Prettier — Code formatter

This extension will help us to format the JavaScript, HTML, CSS code. We can configure it as per our need.

Auto Rename Tag

This extension renames html tags automatically. So we can keep our code consistent and easy to maintain, even when working on bigger projects with lots of elements deep in the HTML structure.

Live Server

At the last the one extension every web designer/developer must use. This extension helps us in launching a local development server with live reload feature for both static & dynamic pages. So the next time you guys don't have to refresh the page again to see the output.

Cool Shortcuts

I have found useful cool shortcuts that allows you to start typing and if you hit tab it will complete your text or the cod you are trying to write. In react this can be useful when importing as you just need to start the import component and hit tab and it completes it.

when in your terminal there are a few tricks to speed up the process if you made a mistake or need to run a command again you can simply push the up arrow. And it will show the last command you typed and you can push up as many times as you feel the need to.

there are some good to know things we should be typing in our terminal a few I think we should always know.

  • Ctrl c – copy
  • Ctrl v – paste
  • Ctrl / - comment out the line of code
  • Ctrl b – hides your side column
  • Ctrl P -This shortcut will bring up the dropdown menu with all your files so that you can quickly navigate to a new one.
  • Ctrl Shift F -This is a great one that I just recently learned. If you have a load of files and folders in VS Code and you are looking for something specific you can use this shortcut to quickly find it.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Nikhil Savalgi


Print Share Comment Cite Upload Translate Updates
APA

Nikhil Savalgi | Sciencx (2022-10-03T16:58:58+00:00) VS Code Extensions and Common Shortcuts for Web Designers. Retrieved from https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/

MLA
" » VS Code Extensions and Common Shortcuts for Web Designers." Nikhil Savalgi | Sciencx - Monday October 3, 2022, https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/
HARVARD
Nikhil Savalgi | Sciencx Monday October 3, 2022 » VS Code Extensions and Common Shortcuts for Web Designers., viewed ,<https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/>
VANCOUVER
Nikhil Savalgi | Sciencx - » VS Code Extensions and Common Shortcuts for Web Designers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/
CHICAGO
" » VS Code Extensions and Common Shortcuts for Web Designers." Nikhil Savalgi | Sciencx - Accessed . https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/
IEEE
" » VS Code Extensions and Common Shortcuts for Web Designers." Nikhil Savalgi | Sciencx [Online]. Available: https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/. [Accessed: ]
rf:citation
» VS Code Extensions and Common Shortcuts for Web Designers | Nikhil Savalgi | Sciencx | https://www.scien.cx/2022/10/03/vs-code-extensions-and-common-shortcuts-for-web-designers/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.