My VSCode World
Hi everyone,
This is my first medium article 😀. I'm gonna talk about one thing that I’m usually asked at my work or events:
“Your VSCode looks different, what is this extension? Can you pass me these extensions?”
I’m still a beginner but I really like to customize and improve my code environment. So, I decided to write this explaining all the extensions, tricks, settings, and helpers that I use, instead of an article with "Top 10 extensions".
First of all, why VSCode ??
VSCode is an IDE from Microsoft. It’s free, open source and built with JS + electron. It’s good for all languages, but mainly for Javascript.
It's simple and easy to customize everything in VSCode as good as the autocomplete and debug.
Plus: IMO, VSCode is good for both, "frontenders" and "backenders" !!
Interesting Settings
Font
The main font that I use is Fira Code (Monospaced font with programming ligatures). You need to install this font at your font system and enable it just adding to your settings:
// Set the font family
“editor.fontFamily”: “‘Fira Code’, Menlo, Monaco, ‘Courier New’, monospace”,
// Enable the font ligature
“editor.fontLigatures”: true,
Then, you have a font like this:
Useful for Everyone (Backenders and Frontenders)
Here's the extensions list of my VSCode world:
IDE Settings and extensions
Sync all your VSCode settings across multiple machines. I always have this problem because I have work and personal notebook.
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist
It shows the full path of the currently active file in the status bar
For the people addicted for JetBrains Products too:
Port of IntelliJ IDEA Keybindings
“It’s just highlight, why do you like it?”. Answer: It’s easy to find your TODOs with this highlight.
“svgviewer.enableautopreview”: true,
Version Control
As the name says: it’s an extensions like “lens” for git.
Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens...
There’re a lot of settings to improve the git lens for your taste, for example:
Node/NPM
Autocompletes NPM modules in import statements
It shows package version information for NPM. It’s very good to see versions available and the package status.
Lint
Integrates ESLint into VS Code. That’s extremely necessary for projects that use eslint (It should be all, if you want a clean code 😆). When you have this extension enabled and some eslint violation, your IDE looks like:
Every line highlighted shows error Lint errors it’s.
Plus: It’s easy to fix it using “Fix all auto-fixable problems” or enable to auto-fix when saving in the settings
“eslint.autoFixOnSave”: true,Test
If you use Jest as test framework, you should have this amazing plugin to help write tests faster.
The main snippets that I use is:
- desc+[tab]: describe(() => {}
- it+[tab]: it(‘’, () => {});
This is a nice plugin for jest users, it shows at the start of each it if it’s passing. However, I put a warning here, this plugin can slow down your IDE.
Markdown
For all the markdown lovers, like me:
This extension shows a highlight to improve your markdown file to follow good practices.
This article will be updated when I found new cool extensions! If you know about some nice extension or setting that It's not here, please contact me 😃
LinkedIn: https://www.linkedin.com/in/pamepeixinho
Twitter: https://twitter.com/pamepeixinho
Github: https://github.com/pamepeixinho
Website: https://pamepeixinho.github.io
My name is LittleFish, I swim and code sometimes. "Sea" you later! 😉
