DEV Community

loading...
Cover image for My VS Code Setup

My VS Code Setup

skarthikeyan96 profile image Karthikeyan Originally published at karthi.me ・2 min read

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

giphy

Themes

One-dark-pro:

I am currently using One-dark-pro which is Atom's theme made for VS Code.

image.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 theme.

image.png

Extensions

Gitlens

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

image.png

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

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

Enter fullscreen mode Exit fullscreen mode

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

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

lorem-ipsum

Generates and inserts lorem ipsum text into Visual Studio Code.

vscode-import-cost

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

Vuln Cost - Security Scanner

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

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

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

Discussion (0)

pic
Editor guide