My VS Code Setup
Tags: webdev, productivity, vscode, showdev
Published: 2021-04-02 17:57:26


In this blog post I will be sharing my VS Code set up i,.e themes and extensions. 

![giphy](https://media.giphy.com/media/Ln2dAW9oycjgmTpjX9/giphy.gif)

# Themes

One-dark-pro:

I am currently using [One-dark-pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.One-dark-pro)  which is Atom's theme made for VS Code.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617380645369/mlDkdqh9W.png)


# Icons

File Icons enhance our VS Code Editor looks. It helps us to differentiate between different files & folders by their given icons. I currently use monokai pro icon which is part of   [monokai pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode) theme.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617382121693/c2xFlmP0-.png)

# Extensions

### [Gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

This extension allows you to see who, why and when the particular line of code was changed.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617382161421/uFf2wdhLo.png)



### **[Settings sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)**


If you do not want install the extensions over and over again when you change your machine, then this the extension for you. You can use this extension to synchronize your settings , themes , keyboard bindings etc.

### [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier is a code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Set below property value to be true or add this property into your settings.json file to format code on save.

 ```

editor.formatOnSave: true

```


### [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**:**

live server spins up the webserver with live reloading support. It is supports both static and dynamic webpages 


### **[ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)**

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.


Basic methods comes with extension:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617384379513/uDT6QFPPN.png)


### **[lorem-ipsum](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum)**

Generates and inserts lorem ipsum text into Visual Studio Code.

### **[vscode-import-cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)**

This extension will display inline in the editor the size of the imported package

### [Vuln Cost - Security Scanner](https://marketplace.visualstudio.com/items?itemName=snyk-security.vscode-vuln-cost)

This extension finds security vulnerabilities in open source packages. It gives feedback inline with code , such as how many vulnerabilities a package contains that you are importing. 

If the scanner finds any know vulnerabilities it will a suggest a fix for the same.

### [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next) 

It enables the nightly build support of Typescript(`typescript@next`)

### [Indent-Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

This extension makes indented code easier to read. 

 
That's a wrap everyone. Thank you for reading , let me know if I have missed something.


Happy coding.


![giphy](https://media.giphy.com/media/lD76yTC5zxZPG/giphy.gif)