DEV Community

Cover image for My TOP 20 VSCode extensions
Dany Paredes
Dany Paredes

Posted on

My TOP 20 VSCode extensions

I'm VSCode fan, this is my 20 VSCode extensions in my workflow. A special description for my top 3.

1-TabNine is the most powerful extension for autocomplete and help with your code.
https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

2-Abbracadabra: Amazing refactor helper.
https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra

3-SimonTest: the most powerfull helper for test generation https://marketplace.visualstudio.com/items?itemName=SimonTest.simontest

4-SonarLint https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode

5-Error Lens (where is my error) https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

6-Preview webserver in VSCode https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server

7-Live webserver https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

8-Live Sass compiler https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

9-Jest https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

10-Jest Test Runner in VSCode https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

11-ES6 Snippets https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

12-Hocus pocus (improve speed coding with typescript) https://marketplace.visualstudio.com/items?itemName=nicoespeon.hocus-pocus

13-Gitlens https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

14-GitIgnore (allow add item to git ignore easy) https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore

15-ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

16-es7 react snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

17-bracket pair https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

18-Babel https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

19-Angular Files https://marketplace.visualstudio.com/items?itemName=alexiv.vscode-angular2-files

20-Angular Essentials https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials

Photo by Sven Brandsma on Unsplash

Discussion (3)

Collapse
beginnercoder17 profile image
BeginnerCoder17

I approve because you have live sever. :3 Nice post!

Collapse
sanjivj profile image
sanjivj

Good post! I am a little confused, though as to the different functions of Preview webserver and Live Server?

Collapse
danywalls profile image
Dany Paredes Author

Preview show the webserver inside vscode, Live Server is not integrated in same IDE.