VS Code Tutorial - Best 5 Extensions for JavaScript Developers in 2019

VS Code Tutorial - Best 5 Extensions for JavaScript Developers in 2019

In this post, we take a look at the top 5 Visual Studio Code extensions to improve our JavaScript development skills.

In this post, we take a look at the top 5 Visual Studio Code extensions to improve our JavaScript development skills.

Extensions are external resources that help you improve the built-in abilities of VS Code.

One of the most remarkable things about Visual Studio Code is the ability to improve its abilities by the addition of external extensions. There are loads of extensions in the marketplace, however. In this post, we’ll be discussing the top 5 extensions that will drastically enhance your JavaScript development in VS Code.

ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on development patterns in JavaScript. It helps you maintain your code quality and structure with ease. Adding this extension to VS Code will help you auto-format your code, enforcing cleaner, well-structured, consistent code.

Getting ESLint

ESLint, along with every other VS Code extension, is available on the VS Code Marketplace. Simply open the link and click install.

Another way to do this would be through VS Code itself. If you’re a fan of installing your extensions within VS Code, here’s how:

Note: In the latest version of VS Code, you won’t need to reload VS Code when you install an extension.

After installation, you can configure ESLint to operate as you choose. For instance, you can set it to only format your code when you save. Even more, the linting features of ESLint will enforce certain development guidelines to help you stay consistent.

Debugger for Chrome

Debugger for Chrome is a VS Code extension used to debug JavaScript code running in the Google Chrome browser from within VS Code. It saves you the stress of constantly switching context to view changes in the logcat or generally to perform debugging operations.

Getting Debugger for Chrome

The Debugger for Chrome extension is available for installation on the VS Code Marketplace alongside any other VS Code extension you might want. Simply open the link and click Install to install it to your VS Code.

You can also install it directly from VS Code by clicking the extensions icon, searching for the Debugger for Chrome extension and installing it:

Note: In the latest version of VS Code, you won’t need to reload VS Code when you install an extension.

More Features

After installation, you will have access to all the extension features like setting breakpoints, stepping through lines of code, viewing your console output, debugging eval scripts, script tags, and dynamically added scripts.

Limitations

It is worth noting that there are some limitations to what the extension can do. For instance, it cannot debug web workers or any features that aren’t script debugging.

JavaScript (ES6) Code Snippets

JavaScript (ES6) code snippets is a VS Code extension that contains code snippets for JavaScript in ES6 syntax for VS Code. What’s more? It has support for both JavaScript and TypeScript.

Snippet extensions are very popular in the VS Code community. This one is even better as it helps you quickly add ES6 codes to your project with a few keystrokes.

Supported Languages

Apart from JavaScript, it has support for other languages like:

Snippets

Here are a few snippets and their triggers you should know.

There’s a long list of these snippets and their respective triggers on the Marketplace for your consumption.

Getting JavaScript (ES6) Code Snippets

Like the previous extensions, you can get JavaScript (ES6) code snippets from the VS Code Marketplace or directly from VS Code.

Bracket Pair Colorizer

This is my personal favorite. Apart from the aesthetic feel it gives your code in VS Code, it helps you automatically match all your braces. Oftentimes as our lines of code grows, it becomes increasingly tasking to keep track of all the braces, square brackets, and parentheses in our code.

Bracket Pair Colorizer is fully customizable in that you can define what types of symbols you want to match and equally associate it with defined colors of your choice.

Getting Bracket Pair Colorizer

To install this extension, head over to the Marketplace and click the Install button to trigger the installation in VS Code. You can as well install it directly from VS Code by searching through the extensions icon like this.

Apparently I already have it installed, which is why you’re not seeing the Install button as you otherwise would.

Path Intellisense

This is another of my favorite VS Code extensions. Having to remember exact file paths is really tasking for me, and it gets even more tasking with really large projects with numerous files. Luckily, the Path Intellisense extensions comes to the rescue. It automatically completes filenames for you so that you don’t have to worry about remembering all your filenames and their storage locations.

It is worth mentioning that this particular feature comes preloaded in some projects. Hence, you might not need to install extensions for it.

Getting Path Intellisense

The Path Intellisense extension is available on the VS Code Marketplace. Simply open the link and install the extension. Better still, you could install it via npm or directly from the VS Code extensions section.

Usage

Image credit : Path Intellisense

Conclusion

There we have it. In this post we have highlighted 5 Visual Studio Code extensions that will definitely enhance your JavaScript development. **ESLint **will help you write cleaner, more consistent code; Debugger for Chrome will help debug better; JavaScript(ES6) Code Snippets will increase your productivity by generating snippets for you; Bracket Pair Colorizer will be there to help you trace and match trailing braces to their respective pairs; and finally, the **Path Intellisense **extension will help you autocomplete filenames.

If you have other amazing extensions you feel will improve our JavaScript development in VS Code, please go ahead and mention them in the comment section.

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

I have been using Visual Studio Code for more than two years, when I jumped on it from Sublime Text.

I spend about 5–6 hours every day inside VS Code so it’s imperative that it is tailored to my needs to make me as productive as possible. Over the years, I have tried many extensions and settings but now I feel settled with what I have so it’s worth talking about them.

Extensions

Prettier Code Formatter

I use Prettier for code formatting across all of my projects and I’ve set up this extension so that it automatically formats my HTML/CSS/JS when I hit ⌘ + S. This has allowed me to get rid of language-specific code formatters.

npm

I use this extension along with npm intellisense (below) to ensure that my package.json is up to date and not bloated with modules that I am not using.

npm Intellisense

This extension indexes my package.json and allows me to autocomplete my import statements when requiring modules.

Bracket Pair Colorizer

This extension color codes all of my brackets, allowing me to quickly see where each code block starts and ends.

React Refactor

This is the newest extension that I have added to my arsenal and I really like it. It lets you select some JSX and refactor it out into a custom React Class, function, or hook.

Auto Close Tag

Another simple extension that does one thing well: auto-closes my JSX tags.

GitLens

I recently moved from the native Source Control setting that VSCode has to Gitlens. I like this extension because it lets me:

  • Automatically see the git blame for the current line
  • View a more detailed history on hover
  • Reset changes via the gutter

Simple React Snippets

I write so much React code that I needed an extension to help me save some time. I now use this extension to fill in some of the boilerplate that comes along with writing React components.

Markdown All in One

This extension helps me a lot when writing READMEs, or other Markdown documents. I specifically enjoy how it deals with lists, tables, and table of contents.

User Settings

Apart from the extensions, the other aspect of customizing your VS Code experience are your User Settings. I have shared my complete Settings file below, but here are some of the important bits:

Font Settings

I really like fonts with ligatures. If you are unfamiliar with ligatures, they are special characters that parses and joins multiple characters. I primarily use Fira Code as my programming font. Here’s how it renders JavaScript:

My complete font stack is:

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true,

To detect indentation, I also prefer these settings:

"editor.detectIndentation": true, 
"editor.renderIndentGuides": false,

To help manage my imports, I prefer these:

// Enable auto-updating of import paths when you rename a file. "javascript.updateImportsOnFileMove.enabled": "always",

Emmet

Emmet now comes included with VS Code now, but to make it work well with React, I had to update some of the settings.

"emmet.includeLanguages": { 
  "javascript": "javascriptreact", 
  "jsx-sublime-babel-tags": "javascriptreact"
}, 
"emmet.triggerExpansionOnTab": true, "emmet.showExpandedAbbreviation": "never",

Here’s my complete user-settings.json

{
  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
      "attr_quotes": "single"
    }
  },
  "editor.lineHeight": 22,
  "javascript.validate.enable": false,
  "workbench.editor.enablePreview": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.trailingComma": "all",
  "bracketPairColorizer.forceIterationColorCycle": true,
  "editor.fontWeight": "500",
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.5,
  "editor.cursorWidth": 5,
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.glyphMargin": true,
  "editor.minimap.enabled": false,
  "terminal.integrated.fontWeight": "400",
  "editor.fontFamily": "Fira Code, iA Writer Duospace, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "window.zoomLevel": -1,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "workbench.fontAliasing": "auto",
  "terminal.integrated.macOptionIsMeta": true,

  "prettier.bracketSpacing": true,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontWeightBold": "700",
  "terminal.integrated.lineHeight": 1.6,
  "workbench.colorTheme": "Shades of Purple",
  // SOP's Import Cost Extension Settings.
  "importCost.largePackageColor": "#EC3A37F5",
  "importCost.mediumPackageColor": "#B362FF",
  "importCost.smallPackageColor": "#B362FF"
}

For more tips and tricks about Visual Studio Code, I recommend checking out VSCode Can Do That.

*Originally published by Tilo at *tilomitra.com 

======================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Learn Visual Studio Code

☞ Visual Studio Code Crash Course 2019

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ The Complete 2019 Web Development Bootcamp

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ The Full JavaScript & ES6 Tutorial - (including ES7 & React)

☞ JavaScript - Step By Step Guide For Beginners

☞ The Web Developer Bootcamp

Best 22 Visual Studio Code Extensions for Web Development

Best 22 Visual Studio Code Extensions for Web Development

Best Visual Studio Code Extensions for Web Development. One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you’re a web developer, you won’t be able to live without installing these extensions!

Best Visual Studio Code Extensions for Web Development. One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you’re a web developer, you won’t be able to live without installing these extensions!

Want to improve your Web Development workflow? You won't be able to live without installing these extensions for Visual Studio Code!

Table of Contents

Want to install all of the extensions listed below at once?! Check out The Web Development Essentials Extension

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for just Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for just $10!0!## 1. Debugger for chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrom

Believe it or not, debugging JavaScript means more than just writing console.log() statements (although that’s a lot of it). Chrome has features built in that make debugging a much better experience. This extension gives you all (or close to all) of those debugging features right inside of VS Code!

2. Javascript (ES6) Code Snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

I loooove snippet extensions. I’m a firm believer that there’s no need to retype the same piece of code over and over again. This extensions provides you with snippets for popular pieces of modern (ES6) JavaScript code.

Side note…if you’re not using ES6 JavaScript features, you should be!

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Want to write better code? Want consistent formatting across your team? Install ESLint. This extension can be configured to auto format your code as well as “yell” with linting errors/warnings. VS Code specifically is also perfectly configured to show you these errors/warnings.

Check out the ESLint docs for more info.

4. Live server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Make changes in code editor, switch to browser, and refresh to see changes. That’s the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes? That’s where Live Server comes in!

It also runs your app on a localhost server. There are some things you can only test when running your app from a server, so this is a nice benefit.

5. Bracket Pair Colorizor

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Brackets are the bane of a developer’s existence. With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer (as you might expect) colors matching brackets to make your code much more readable. Trust me, you want this!

6. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!

7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Need a quick place to test out some JavaScript? I used to open up the console in Chrome and type some code right there, but there were many downsides. Quokka gives you a JavaScript (and TypeScript) scratchpad in VS Code. This means you can test out a piece of code right there in your favorite editor!

8. Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

In large projects, remembering specific file names and the directories your files are in can get tricky. This extension will provide you intellisense for just that. As you start typing a path in quotations, you will get intellisense for directories and file names. This will save you from spending a lot of time in the file explorer :)

9. Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

One thing I hate is switching between projects in VS Code. Every time I have to open the file explorer and find the project on my computer. But that changes with Project Manager. With this extension, you get an extra menu in your side menu for your projects. You can quickly switch between projects, save favorites, or auto-detect projects Git projects from your file system.

If you work on multiple different projects, this is a great way to stay organized and be more efficient.

10. Editor Config

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Editor Config is a standard of a handlful of coding styles that are respected across major text editors/IDEs. Here’s how it works. You save a config file in your repository which your editor respects. In this case, you have to add an extension to VS Code for it to respect these config files. Super easy to setup and works great on team projects.

Read more on the Editor Config Docs.

11. Sublime Text Keymap

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

Are you an avid Sublime user, nervous to switch over to VS Code? This extension will make you feel right at home, by changing all of the shortcuts to match those of Sublime. Now, what excuse do you have for not switching over?

12. Browser Preview

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

I love the Live Server extension (mentioned above), but his extension goes another step further in terms of convenience. It gives you a live-reloading preview right inside of VS Code. No more having to tab over to your browser to see a small change!

13. Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

There a bunch of git extensions out there, but one is the most powerful with tons of features. You get blame information, line and file history, commit searching, and so much more. If you need help with your Git workflow, start with this extension!

14. Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It’s super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!

15. Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

DONT spend time formatting your code…just DONT. There’s no need to. Ealier, I mentioned ESLint which provides formatting and linting. If you don’t need the linting part, then go with Prettier. It’s super easy to setup and can be configured to formatted your code automatically on save.

Never worry about formatting again!

16. Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

This extension color codes various types of comments to give them different significance and stand out from the rest of your code. I use this ALL THE TIME for todo comments. It’s hard to ignore a big orange comment telling me I’ve got some unfinished work to do.

There are also color codes for questions, alerts, and highlights. You can also add your own!

17. Git Link

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

If you’ve ever wanted to view a file that you’re working on in Github, this extension is for you. After installing, just right-click in your file and you’ll see the option to open it in Github. This is great for checking history, branch versions, etc. if you’re not using the Git Lens extension.

18. VS Code Icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Did you know you can customize the icons in VS Code? If you look in settings, you’ll seen an option for “File Icon Theme”. From there you can choose from the pre-installed icons or install an icon pack. This extension gives you a pretty sweet icon pack that is used by over 11 million people!

19. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Fan of Google’s Material design? Then, check out this Material themed icon pack. There’s hundreds of different icons and they are pretty awesome looking!

20. Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Developers, myself included, spend a lot of time customizing their dev environment, especially their text editors. With the Settings Sync extension, you can save your setting off in Github. Then, you can load them to any new version of VS Code with one command. Don’t get caught without your amazing setup ever again!

21. Better Align

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

If you’re the kind of person who loves perfect alignment in your code, you need to get Better Align. You can align multiple variable declarations, trailing comments, sections of code, etc. There’s no better way to get a feel for how amazing this extension is than installing it and giving it a try!

22. VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Are you a VIM power user? Bless you if you are, but you can take all of that VIM power user knowledge and use it right inside VS Code. Not the path I personally want to go, but I know how insane productivity can be when using VIM to its potential, so more power to you.

Mobile App Development Company India | Ecommerce Web Development Company India

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

We are custom eCommerce Development Company working with all types of industry verticals and providing them end-to-end solutions for their eCommerce store development.

Know more about Top E-Commerce Web Development Company