WebStorm to VS Code checklist (for nodeJS / TS projects)
Do you find yourself waiting when WebStorm internally crunches on something after you’ve opened 5 projects and want to type a function name? Have you had a feeling lately that the great IDE is slower than your typing speed? Have you forgotten that autocomplete even exists because it takes seconds to open and it’s just faster to write everything yourself?
If any of these are true, I’d suggest to give VS Code a try!
I talk from experience because around two weeks ago, I realized that all those three things are true and I thought it would be time to try out VS Code which most of my colleagues were already using anyway. I haven’t looked back since.
So I wrote this guide to just help you with the initial VS Code setup when coming from WebStorm. Though, please keep in mind that I’m using a Mac and work mainly with nodeJS / TS projects so this guide is written that in mind regarding some of the shortcuts and extensions.
Also a small warning that VS Code is not full-blown IDE so depending how and which functionalities you are using in WebStorm you might find VS Code lacking. For an example, VS Code is (currently) unable to do project-wide refactoring for a function name in vanilla JS projects (this works in TS projects though). There might be other things missing depending on your personal workflow, but for me, at the end of the day, the responsiveness and speed of the editor outweighs the parts it is lacking in.
Also big thanks to the other guys at nodeSWAT for helping me put this guide together!
The beginning:
- Get VS Code from https://code.visualstudio.com/
Must have extensions:
- vscode-jetbrains-keybindings — This will map most of of the WebStorm keyboard shortcuts to VS Code. Note that if you are using custom keyboard shortcuts, you’ll need to assign these manually in VS Code.
- npm — npm integration, this will validate if all the npm modules are installed etc
- gitlens — git integration including annotations and diffing
- eslint — eslint integration
- scratchpad — I used WebStorm scratch files a lot, so this extension also introduces them to VS Code
- editorconfig — This will use
.editorconfifrom project dir to set some settings like indent options - material icons — Will give unique icons to different file types making them more distinguishable in the file explorer
- unique window colors - This will set a unique color to every VS window (project) you open and will also remember this. Helps immensely to separate different projects when you have 5 of them open.
- auto rename tag — will automatically rename both HTML tags if you edit one
- Code spell checker — bacuse we cannt realy spel
- Better comments — will highlight different commnets like TODO’s
Some manual changes:
- Settings -> Commonly used -> Files: Auto Save - Change this to anything than the default, I have this on onFocusChange I’m not even sure why the default is manual saving.
- Settings -> Window -> Open Folder in new Window — Check this checkbox, this will make the VS Code open all new projects / folders in a new window
- Settings -> Workbench -> Appearance -> Tree: Indent — Personally I found it too small and changed this to 16 instead so the files in the tree wouldn’t be so packed.
- Keyboard shortcuts -> Find shortcuts by
cmd+shift+Fand delete the ones which are added by the extension for “Open search”. Then make sure that same shortcut is assigned for “Search: Find in files”. Otherwise if you select text and hit the search shortcut VS Code wont search the highlighted text but just open search bar.
Personal preference:
- Dracula IntelliJ theme — This will change the color preset to the same as it is in WebStorm Dracula theme if you’ve been using that. Personally I chose to stick to the default VS Code theme for now.
- Bracket pair colorer — Colors bracket pairs uniquely so it’s visually easier to see them
Extensions depending on your workflow:
After this you should be good to go!
Be sure to note that this list is not exhaustive and if you are missing anything from your workflow just look it up on the extensions list, you will most likely find something there that helps.
It might also be good idea to skim through the settings and see if there are anything there you might want to change / play around with.
If you feel something is missing from this list, feel free to comment.
