🤓🤓 Top VS Code Extensions & Settings to become a more productive Developer 2
Tags: vscode, javascript, productivity, webdev
Published: 2019-10-23 21:31:39

This is part 2 of a series on becoming a more productive developer with VS Code. You can find [part 1](https://dev.to/benjaminmock/top-vs-code-extension-that-will-make-you-a-more-productive-developer-34hl) here.

# Settings

## Setting 1: Indentation of File Explorer

The tiny indentation of the files and folders in the file explorer was one of the annoyances of VS Code. But finally, that's configurable! The default setting is 8px - I use 25px to quickly see what file belongs to which directory. Maybe that might be too much for you, just experiment with the setting a bit. Search for the setting `tree indent` to change it.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xxzihkmokplpx1ejn0w9.jpg)

---

## Setting 2: Autocomplete on Enter

Another thing that bugged me for quite a while was that autocomplete suggestions are by default chosen on Enter. That leads to accepting autocomplete suggestions when all you want is a new line. That behavior can luckily be turned off, so the autocomplete works only on Tab. Search for the setting `Accept Suggestion on Enter` and set it to `off`.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tf8jbwzkeghk76gy31ve.jpg)

---

# Extensions

## Extension 1: [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync&WT.mc_id=vscodecandothat-dotcom-team)

Settings Sync by @shanalikhan is the perfect addition to this post because it lets you sync your VS Code settings on multiple machines via github gists.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rt8azgdjqme0toi6qhrr.png)

---

## Extension 2: [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens&WT.mc_id=vscodecandothat-dotcom-team)

This is a **BIG** one for all the JS devs! This extension shows you outdated Packages in your `package.json` and let's you update them in one click!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9g27tglradh1dbowopcs.gif)

---

## Extension 3: [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

Bookmarks by @alefragnani lets you add bookmarks to the sidebar in your editor. That helps you to easily mark important pieces of code and lets you easily navigate there.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zjcdn9jod7kzi96qgil4.png)

--- 

## Extension 4: [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

TODO Highlight is a very simple, yet cool extension: it highlights your TODOs and FIXMEs for you. It even has an overview over all your TODOs.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xc19ss2wd8bxawi8ijoe.png)

---

## Bonus

If you're wondering about the *theme* that I'm using, it's [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) by @wesbos

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cgzbpuilykwlrpccds3l.png)


Not enough VS Code Extension to make you a more productive developer? Here's [part 1](https://dev.to/benjaminmock/top-vs-code-extension-that-will-make-you-a-more-productive-developer-34hl) of this series with even more VS Code goodness.

Do you have any useful VS Code Settings, Extensions or Shortcuts, that make you more productive? Please share them in the comments!

Thanks for reading!