#AUTO SAVE SUBLIME TEXT 3 LIVERELOAD CODE#

Sticking with colors, Colorize instantly visualizes CSS colors in your CSS/SASS/Less/. Colorize See which colors you're using in your style guides

#AUTO SAVE SUBLIME TEXT 3 LIVERELOAD CODE#

Peacock allows you to change the color of your Visual Studio Code environment, so you can quickly identify which instance you’ve just switched to. Peacock Change the color of your VSCode instance In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available. The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.

JavaScript Code Snippets More JS functionality It also allows you to quickly jump to the right CSS code if you know the class or ID name. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code. This extension is invaluable for front-end developers. CSS Peek Extend your HTML file to see your CSS code You can also look up Github avatars, which is quite neat. It allows you to compare branches, commits, and files across commits. The extension is quite comprehensive as well. No longer should you look through git log in the terminal. Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. Git History Get a nice visual of the git log If you don’t like a particular setting, you can easily turn it off in settings. GitLens is a highly customizable extension. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features). GitLens supercharges the Git capabilities of Visual Studio Code.

GitLens Supercharge your Git capabilities The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.Įdit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care. While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change. Auto Rename Tag Rename tags automatically The clue's in the title, but Bracket Pair Colorizer gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together.Ĭustom bracket characters can also be configured, and you can add a background color to the active scope too. Bracket Pair Colorizer Everyone loves matching colors You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code. Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style. Prettier Spend less time formatting your code You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios. The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. Remote - SSH Use any remote machine with an SSH server You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code. Live Server launches a local development server with a live reload feature both for static and dynamic pages.Įvery time you save your code, you'll instantly see the changes reflected in the browser. Live Server Immediately see code changes reflected in the browser This way, you'll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again. It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions. Settings Sync Settings Sync saves you a lot of time installing extensions across devicesīefore you start installing extensions left and right, it's good to know of the existence of Settings Sync. Here are the VSCode extensions we'll cover: These extensions mostly apply for web developers, but there are some general-purpose extensions that will benefit everyone else too. Considering Visual Studio Code is the most popular IDE, here are 20 VSCode extensions that will make you a more productive developer. Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output.

Auto save sublime text 3 livereload