My productivity setup ( VS Code )
Tags: vscode, webdev, productivity, showdev
Published: 2021-02-21 06:49:24

<p>In this post I am gonna show you my personal vs code setup! Which makes me more productive. And gives me inspiration to do more coding. I will show you how turn this boring one, -</p>
![Ratul](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23lxj0cvky7inro6kcbe.png)
<p>To this cool one-</p>
![Ratul](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehkumc2fu47l1g58ggny.png)
<p>And I will also provide you a list of useful VS code extentions which will make you life more easier as a developer. So if you are interested, continue reading...</p>
<br />

<h1>Theme</h1>
<p>When it comes about theme every people has a different choice. But I personally prefer to use - "<a href="https://marketplace.visualstudio.com/items?itemName=kohlbachjan.the-best-theme">The best theme</a>". Yes if you take my opinion this is the best theme. Which gives an elegant look to my VS code. It's pretty similar to one dark pro. But this one is a little bit lighter than one dark pro. Which attracts me so much.</p>
![Ratul](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehkumc2fu47l1g58ggny.png)
<br />

<h1>Font</h1>
<p>I use <a href="https://fonts.google.com/specimen/Fira+Code?category=Monospace&preview.text_type=custom&query=fira+code">Fira Code</a> as the default font of my editor. Which looks pretty fine. It gives a nice look to my editor. And fira code 400 medium is recommended with the Best theme.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot3188wellfe8a915x2t.PNG)
<br />

<h1>Icons</h1>
<p>For icons I use <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme">Material Icon Theme</a> Which makes my icons simple and elegant looking.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtqkypj5msdh5alpirxr.PNG)


<br />
<h1>Useful Extentions</h1>
<h2>1. <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a></h2>
<p>Prettier is a really really useful extention. It formats your unformatted code once you save your file. So install it. And after installation, go to settings, and search - "Format on save" Then check the settings if it is marked. Then add some code in your settings.json</p>
```json
"editor.defaultFormatter": "esbenp.prettier-vscode",
```
<h2>2. <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">Auto Rename Tag</a></h2>
<p>This extention saves my time a lot When I am working with React, Html and XML. It renames the closing tag automatically when you try to rename the opening tag.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yeotfrpwmtlfhqyk9jd.gif)
<h2>3. <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets">ES7 React/Redux/GraphQL/React-Native snippets</a></h2>
<p>This extention saves a lot of time when I am working with react and react-native. It helps me to prevent writing all the boilerplate codes. Like when I type - 'rafce' if generates all the codes for a react functional component.</p>

<h2>4. <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a></h2>
<p>This extention is so useful when you are working with html, css and js projects. It auto reloads the browser page once you save any file in your project.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eox2rwmik8y2yy93dzr1.gif)

<h2>5. <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer">Bracket Pair Colorizer</a></h2>
<p>This extention is so much useful. It highlights the occurance of the opening and closing brackets. And it generates different colors of brackets. Which helps me a lot to have a more better and fast understanding.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa5gbvnvfim3bbv2kun7.png)
<br />

<h2>6. <a href="https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode">Tabnine Autocomplete AI</a></h2>
<p>Tabnine is autocomplete AI tool. This will help you a lot when it comes to coding! And I highly recommend it. Just install it and you are gonna stick with that! it's insane!</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg7xxz3qqdbz7zndop23.png)
<br />

<p>So that was my vs code setup. I enjoy working a lot with this setup. Let me know what is your productivity setup! in the discussions.</p>