It’s very important to pick the best IDE/Code Editor and Configure it for your programming language. If you get to know the features and capabilities very well, you can greatly improve your productivity.
With lots of Trail and Errors I have the Eventual Visual Studio Code Setup. I have customized VSCode with few Extensions and tweaked some default behaviors to achieve it. I recommend this Setup with an assured increase in productivity.
So, here is the Eventual Visual Studio Code Setup:
Note: Make sure you are on the latest version of Visual Studio Code to enjoy the new features.
How relaxed you would be if the code you type is Auto Saved. How many Control+S (or Command+S on a Mac) presses would you save per day? 100s or 1000s or even more :D
Configure Auto Save to happen when the focus changes from the current file. This means as soon as you switch your current tab to the Browser your code changes are Auto Saved and the new code is ready to be shown in the browser.
Mac : Code > Preferences > Settings > Text Editor > Files > Auto Save
Change it to onFocusChange.
Installing Extensions in VSCode:
Now let’s install some Extensions to the VSCode which will serve multiple useful purpose.
To install any extension you can You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (⇧⌘X).
This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.
This Extension Automatically renames paired HTML/XML tag, same as Visual Studio IDE does. It will come handy most of the time.
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
The goal of this spell checker extension is to help catch common spelling errors while keeping the number of false positives low.
Its a basic spell checker that works well with camelCase code.
This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.
This was heavily inspired by a similar feature in Brackets called CSS Inline Editors.
- Setting breakpoints, including in source files when source maps are enabled
- Stepping, including with the buttons on the Chrome page
- The Locals pane
- Debugging eval scripts, script tags, and scripts that are added dynamically
This extension integrates ESLint into VSCode. this increases the readability of our code towards the effort of having our codebase look like it was written by “one person”.
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
This extension helps you to add or remove consoles with ease.
- Highlight a variable (or really any text)
- Press Cmd+Shift+L
- The output (on a new line) will be: console.log(‘variable: ‘, variable);
- Press Cmd+Shift+L
- The output (on the same line) will be: console.log();
To remove console.logs:
- Press Cmd+Shift+D
- This will delete all console.log statements in the current document
Prettier is an opinionated 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.
This extensions has some of the essential collection of React Snippets and commands. It might reduce few key presses for you 😁
This extension shows package version information for npm, jspm, dub and dotnet core in the Visual Studio Code editor.
Auto Indent the code as per Airbnb ESLint rules list
How pleasing it would be if the code editor you are using fixes Linting issues instead of showing those errors. Yes we can configure it in VSCode.
Mac : Code > Preferences > Settings > Click on Open Settings (JSON) at the top right corner
Add the following line:
Make sure you final Settings JSON looks like:
Thanks for reading. Happy coding 😉