One place for hosting & domains

      22 Best Visual Studio Code Extensions for Web Development

      Debugger for Chrome

      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!

      If you want to learn more about debugging you should read Debugging JavaScript in Chrome and Visual Studio Code.

      Marketplace Link: Debugger for Chrome

      JavaScript Snippets

      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!

      Marketplace Link: JavaScript Snippets

      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.

      Marketplace Link: ESLint

      Live Server

      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.

      Marketplace Link: Live Server

      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!

      Marketplace Link: Bracket Pair Colorizer

      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!

      Marketplace Link: Auto Rename Tag

      Quokka

      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!

      Marketplace Link: Quokka

      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.

      Marketplace Link: Path Intellisense

      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.

      Marketplace Link: Project Manager

      Editor Config

      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.

      Marketplace Link: Editor Config

      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?

      Marketplace Link: Sublime Keybindings

      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!

      Marketplace Link: Browser Preview

      Git Lens

      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!

      Marketplace Link: **Git Lens

      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!

      Marketplace Link: Polacode

      Prettier

      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!

      Marketplace Link: Prettier

      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!

      Marketplace Link: Better Comments

      Git Link

      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.

      Marketplace Link: Git Link

      VS Code 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!

      Marketplace Link: VS Code Icons

      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!

      Marketplace Link: Material Icon Theme

      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!

      Marketplace Link: Settings Sync

      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!

      Marketplace Link: Better Align

      VIM keybindings](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.

      Marketplace Link: VIM Keybindings

      What are your favorite VS Code Extensions for web development? Let us know in the comments.

      Debugging Create React App Applications in Visual Studio Code

      Introduction

      In this post, we are going to create a Create React App application, then add configuration to debug it in Visual Studio Code.

      For a Create React App application, install the Debugger for Chrome extension, create a debug configuration in VS Code, and then run in debug mode.

      To be able to test a Create React App application, you will need a Create React App application. I’ll provide the basic steps, but for more reference on how to get started look at the Create React App page.

      First, you’ll need to install the Create React App.

      1. npm install -g create-react-app

      After that finishes, you’ll need to actually generate your new application. This will take a bit as it needs to install lots of npm packages.

      1. create-react-app my-app

      Open the project in VS Code and you should see the following.

      Create React App Project in VS Code

      Now, that you’ve got your new fancy React app, go ahead and run it to make sure everything looks right.

      1. npm start

      Should look like this.

      Create React App Project Running

      Assuming you’ve made it this far, we are ready to start debugging! Before we do, however, it’s worth understanding how configuring debugging in VS Code works. Basically, debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

      Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

      Debugger for Chrome

      Now, to create a debug configuration, you can open the debug panel (the bug-looking button on the left panel). At the top of the debug panel, you should see a dropdown that says “No Configurations”.

      Create Debug Configurations

      To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

      Then choose Chrome.

      Choose Chrome Debug Configuration

      You should get the following configuration created for you.

      Create React App Debug Configuration

      The only thing we need to do is update the port from 8080 to 3000.

      Updated Create React App Debug Configuration

      Now we’re ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

      With this up and running, you can set a breakpoint in your App.js. Open up your App.js and add a breakpoint inside of the render function by clicking in the gutter (to the left of the line numbers). Should look like this.

      Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoint. You should be directed back to VS Code directly to the place where you set your breakpoint.

      From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

      If you have any follow-up questions or comments, leave one below or find me on Twitter @jamesqquick.

      For video content, check out my YouTube Channel

      VS Code 1.32: Autocomplete in Vue Templates

      Introduction

      The Visual Studio Code 1.32 February update is out now and with it comes some great new features for Vue users.

      Let’s run through the list of features that are in the new 1.32 update:

      • Color themes without reloading: Install and apply new theme extensions without reloading.
      • Keyboard shortcuts editor improvements: Modify keybinding ‘when’ conditions in the editor.
      • Problems panel hover commands: Apply Quick Fixes or open a Peek window directly from hovers.
      • Preferred Code Actions: Preferred (mostly likely) Code Actions support auto fixing common issues.
      • Debug Console customization: Modify font-size, font-family, and line-height of the Debug Console.

      Big list of updates as usual! This is why VS Code has consistently been used by so many developers.

      Every month of VS Code updates brings in some useful features but there’s one this month that really stood out to me.

      The ability to have VS Code (through the Vetur Vue Plugin) provide IntelliSense and autocomplete. Here’s the example that the VS Code update logs give us:

      Let’s say you have some data() in your Vue component. Let’s say a message variable.

      If you wanted to use that message variable in your template, you can start typing and see VS Code help you out!

      This will work for the following:

      • data in the current component
      • computed properties
      • methods
      • props for any child components: will show on v-bind

      The other updates that came in are:

      • Use Prettier as an option for <template> formatter
      • GraphQL custom block syntax highlighting
      • Pug interpolation syntax highlighting

      The full list of updates can be found on the Vetur changelog.

      A big update for Vue developers that use VS Code and Vetur. Will definitely speed up my own Vue work. Great work to the VS Code team as always!