One of the most important things for your productivity as a programmer is using your editor’s capabilities to the fullest to help you throughout the development process. Today I want to share my editor configuration with you.
Editor
My main editor for the past few months has been VSCode. After a couple of years using Atom, I decided to switch. VSCode is an editor developed by Microsoft that has a pretty fast development cycle and great integrations.
Plugins
One of the key strengths of VSCode is the quality and usefulness of its extensions. These are the ones I use day to day.
Appearance
- Dark theme: nord-visual-studio-code — I use it mainly because it uses very few colors.
- Light theme: vscode-theme-github-light — when you’re working in very bright environments, using a light theme is really helpful.
Font
- PT Mono — I use this font for my editor and terminal.
Project management
-
git-project-manager — if you manage several projects, this is the best way to get quick access that I’ve found.
-
Github Pull Request — the GitHub integration is truly incredible. Being able to do code reviews from your editor makes the process feel much more natural.
-
gitlens — a great extension for knowing everything you need about commit history, changes, who made changes, everything git-related (I have it disabled by default).
-
advanced-new-file — enhanced editor capabilities for creating new files/folders.
-
vscode-npm-script — view/run the scripts each project has without having to go look for them.
Intellisense
-
vscodeintellicode — improve your editor’s suggestions with AI. I started using it recently and I’m still evaluating how well it works.
-
path-intellisense — get autocomplete when importing a module.
Linting/Formatting
-
vscode-eslint — see in real time which formatting rules or best practices I haven’t followed.
-
prettier-vscode — not having to worry about whether something is properly indented or missing something. Prettier is one of my favorite projects.
-
vscode-language-babel — get proper syntax highlighting for projects with JSX.
Configuration
- code-settings-sync — if you use multiple computers for work and don’t want to spend a lot of time configuring each one, being able to sync your configuration in minutes is really appreciated.
Collaboration
- VS Live Share — if you work with distributed teams or need to collaborate with someone, this is the best way to do it. You can share your code, have a chat, audio, or even share your local server.
Snippets
-
atom-keybindings — I used Atom as my main editor for a long time and this extension helped me a ton with the migration.
-
full-react-snippets — in my day-to-day I’m writing React apps and this extension has helped me write a lot less.
-
jest-snippets — I use Jest as my main testing framework and this set of snippets fits perfectly into my workflow.
Testing
- vscode-jest — getting real-time feedback if I break one of my tests or being able to debug easily. This extension is incredible if you write tests with Jest.
Final words
Having your editor properly configured can be one of the most important things you need to do. It’s a tool you’ll use every day, and it can help you boost your productivity.