Extensions for VS Code

  1. Auto Import
  2. Auto Rename Tag
  3. Auto Close Tag
  4. GitLens
  5. Live Server
  6. Lorem Ipsum
  7. Code Spell Checker
  8. CSS Peak
  9. PHP Server
  10. Quokka.js
  1. Auto Import
    This extensions allows you to import automatically packages in your JavaScript, TypeScript and TSX files.
    For instance, you are working on a data.js file that contains an array with multiple items, like id and name, and you want to import these into a new JS file, like a view, you just type var.map(item => (Something key={item.id})) and press tab, it’ll auto import the data.js file to you.
  2. Auto Rename Tag
    This extension renames all HTML and XML tags, basically anything with <tag> will be renamed as you want.
    Lets say that you called a p tag but you saw that it would be more aesthetic with a span tag, you just need to put your cursor in the opening tag and rename it, the closing tag will be renamed automatically.
  3. Auto Close Tag
    This is self explanatory, you open any kind of tag, including custom ones, and it will be closed automatically.
  4. GitLens
    For those working on teams or even alone and using GitHub, this extension provides a glimpse in your code, provinding information such as whom, why and when the code was edited and changes history.
  5. Live Server
    Live server is just for HTML files, it creates a localhost with auto-reload that refreshes the page when something is edited in the .html.
    This extension is helpful when working on static pages.
  6. Lorem Ipsum
    How about instead of visiting the lorem ipsum webpage to generate dummy text you do this in VS Code? With this extension you can add a single line or multiple lines in your code to see how it will be when the real elements arrive on the page.
  7. Code Spell Checker
    A commom spell checker for VS Code, like the one in Word. It helps to see where you misspelled the text in your code.
  8. CSS Peak
    It provides a quick glance at the CSS class or id from your HTML file, not needing to browse through the original file. It works with HTML and EJS files and the styles supported by this extension is CSS, LESS and SCSS.
  9. PHP Server
    Similar to Live Server but this serves locally a PHP file instead of HTML files. It’s a alternative to XAMPP or WAMPP but it doesn’t come with PHP MyAdmin included, only provides support for PHP files and it does not have a auto reaload function.
  10. Quokka.js
    This is to boost your productivity while coding in JS and TypeScript. It’s a tool for prototyping the code in your IDE, the runtime values are updated automatically and displayed next to the code, while typing it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store