My Top 5 VS Code Extensions  👨🏻‍💻 [Week in Review - Week 26/20]
Tags: vscode
Published: 2020-06-29 05:22:15

_If you like this article, chances are you will like my tweets or [newsletters](https://newsletter.natterstefan.me/) too. If you are curious, have a look at my [twitter profile](https://twitter.com/natterstefan). 🚀_

Hello 👋🏻.

Welcome to my "Week in Review" series. Each week I'm going to share what I discovered, learned, and tested with you.

I spend lots of hours each week in my [VS Code](https://code.visualstudio.com/). That is why sooner or later I had to customize it to improve my productivity. In this week's "Week in Review" episode the main topic is about VS Studio Code extensions.

Let's jump right into it.

---

## Highlights

According to [population.io](https://population.io/), 50% of the world's population is now ~50% older and ~50% younger than me. 😝 From now on I'm getting older than the majority of the population. Check it out, it's an interesting website with lots of other insights.

{% twitter 1276172807727190018 %}

`position: sticky` played a major part in a recent story for one of [our](https://www.lovelysystems.com/) clients. "[Position: stuck, and a way to fix it](https://uxdesign.cc/position-stuck-96c9f55d9526)" and "[Simple Solution to Prevent Body Scrolling on iOS](https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios)" were both helpful for realizing the designer's wishes. During work, I remembered reading an interesting article about how to [avoid `z-index` by Daniel Rotter](https://medium.com/javascript-in-plain-english/avoid-z-indexes-whenever-possible-10d56a68f81).

Thinking about starting your AWS certification journey? Then Rishab Kumar's article ["How you can start your AWS Certifications journey for free 📚"](https://dev.to/rishabk7/how-you-can-start-your-aws-certifications-journey-for-free-4mpb) is for you!

> Rafflecopter makes it “mega simple” to launch and manage a giveaway for any brand, on any website, as much as you want, with no I.T. help required.

Is what they say on [their website](https://www.rafflecopter.com/). I haven't used it (yet), but I will as soon as I start my first giveaway. Have you tried Rafflecopter? Share your thoughts with me, please.

I invested some time and updated my [Zoom-Slack-Status-Updater](https://github.com/natterstefan/zoom-slack-status-updater). You can now also set the "Do not disturb" feature on Slack when joining a Zoom meeting.

## 👨🏻‍💻👩🏻‍💻 VS Code

There are three interesting features I recently discovered in VS Code: [Multi-Root Workspaces](https://code.visualstudio.com/docs/editor/multi-root-workspaces), [Tasks](https://code.visualstudio.com/docs/editor/tasks), and [Code Tours](https://github.com/vsls-contrib/codetour). I might write an article about each of them in the future, but for now, let's focus on VS Code extensions.

### Top 5 Extensions

If I could only choose five extensions, I would probably install these:

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync); but because this feature will be part of VS Code soon, I add [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) onto the list instead
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
- [Open in GitHub, Bitbucket, Gitlab, VisualStudio.com](https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github)

You can see a list of all my installed extensions on [howivscode.com/natterstefan](https://howivscode.com/natterstefan).

#### Other extensions

- [Alternate File](https://marketplace.visualstudio.com/items?itemName=will-wow.vscode-alternate-file): Switch to and create spec files for any framework
- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- [File Utils](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
- [Snipsnap - Code Snippets for Javascript libraries](https://marketplace.visualstudio.com/items?itemName=snipsnapdev.snipsnap-vscode)
- [Toggl for VS Code](https://marketplace.visualstudio.com/items?itemName=natterstefan.vs-code-toggl-extension) -> this is my own Extension 😁
- [Toggle](https://marketplace.visualstudio.com/items?itemName=rebornix.toggle) - super helpful to quickly switch between light and dark mode when working outside
- [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)
- [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

## 📗 Currently Reading

Right now I am reading ["This is Marketing: You Can’t Be Seen Until You Learn To See" by Seth Godin](https://amzn.to/2Zg41VS) and listen to ["Thinking, Fast and Slow" written by Daniel Kahneman](https://amzn.to/2ZlCSk2) on Audible.

## ⛓ Links of the Week

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jr4946fwpi2espml5hu4.png)

- Have you seen the `#:~:text=` appendix after selecting a result in Google's list of results too? Google Search now highlights website content based on search results. Here is an [example link](https://wordpress.org/plugins/widget-google-reviews/#:~:text=This%20plugin%20display%20Google%20Business,show%20reviews%20in%20the%20widget.) (see the image above) for you. [9To5Google explains the feature in more detail](https://9to5google.com/2020/06/03/google-search-highlight-website-content/) if you are interested.
- One hot topic for [Webpack 5 is Module Federation](https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669). I got in touch with it about two months ago when I met [Jack](https://twitter.com/jherr). Every now and then we share some thoughts on Twitter and I watched his live stream last week.

{% youtube DHjZnJRK_S8 %}
{% twitter 1275294449283678209 %}

- When you start working with ReactJS you hear a lot of people telling you "Fix re-render of components". I was told the same thing, and many of you may be too. But as Kent C. Dodds puts it ["Fix the slow render before you fix the re-render"](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render). When you starting optimizing your app, read ["Profile a React App for Performance"](https://kentcdodds.com/blog/profile-a-react-app-for-performance) too.
- Alfred is great. You can find a list of my workflows [here](https://dev.to/natterstefan/week-in-review-week-23-20-33g0). I added [Power Thesaurus Search for Alfred](https://www.alfredforum.com/topic/10576-power-thesaurus-search/) on my list this week.
- Last week lots of interaction circles were shared on Twitter. Simone was anxious to know how easy it is and how fast he can build the tool himself. He shared the ["Twitter Interaction Circles: An Exercise Project with NodeJS, Canvas and API" guide on HackerTyper](https://blog.hackertyper.net/post/twitter-interaction-circles-guide/).
- [PiHole](https://pi-hole.net/) is an excellent piece of software. It is a black hole for Internet advertisements. [NextDNS](https://my.nextdns.io/) is basically a SaaS solution alternative.
- Rendering a massive list of React components can be time-, memory- and CPU-consuming task. Lucky for us [Rinas Musthafa shared a solution with us](https://medium.com/better-programming/how-i-rendered-a-massive-list-in-react-without-memory-and-cpu-issues-7ac6fe6a697b
). It looks auspicious; and I wanna try it next time I need it.
- Did you know you can provide a function for `React.useState` when the initial state is the result of an expensive computation? I just recently discovered that [this is possible](https://reactjs.org/docs/hooks-reference.html#lazy-initial-state).
- It is also [somewhat possible to render React hooks conditionally](https://codesandbox.io/s/react-conditionally-call-hook-lc0i2).
- I am a member of a very funny private group on Twitter, and some of our members started playing Cards against Humanity online with [cah.ninja](https://cah.ninja/). I missed the sessions so far, but I know the game and the site and it is indeed funny.
- [Detect if a user is online or offline](https://dev.to/nialljoemaher/detecting-if-a-user-is-online-offline-with-javascript-3bcc
) with just a few lines of code. (Thanks Niall)

## 5 Tweets of the Week

{% twitter 1276994198877556738 %}
{% twitter 1276779799198007301 %}
{% twitter 1276568125060689924 %}
{% twitter 1276039976812191744 %}
{% twitter 1275828562961010689 %}

## YouTube Video of the Week

{% youtube cLhnubqavDg %}

This is it for week 26/20.

See you next week - same place, same platform. 👋🏻

Thanks,
Stefan

---

_If you like this article, chances are you will like my tweets or [newsletters](https://newsletter.natterstefan.me/) too. If you are curious, have a look at my [twitter profile](https://twitter.com/natterstefan). 🚀_

Let's stay connected on [_Twitter_](https://twitter.com/natterstefan) and [_LinkedIn_](http://www.linkedin.com/in/natterstefan).

---

_This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article._