Hey hey π
You may look at the title and sarcastically say "Yay, another VS Code extensions list", at least I would. The fact is that I end up opening said articles and realize that most times they share 8 out of 10 extensions between them all. I use most of them, so I'm not going to go into detail about those that are most featured in articles, instead I'll try to analyze the lesser known and most useful extensions I'm using. I've split the extension list into categories so you can easily find whatever you're looking for here, and at the end of the article you can find the full list of extensions I'm using.
Our Lord and Savior
Let's start with the editor itself. VS Code is a code editor made by Microsoft. It's mainly powered by the open source Monaco Editor, extensions and the extensive settings API. It's also pretty lightweight for all that it offers which is why I changed from Atom and have never stopped preaching about our lord and savior VS Code.
By using an extension called Settings Sync, I've kept about the same configuration throughout the years. Recently Microsoft added a built-in Sync feature which seems to work even better. Sometimes I clean up my extensions, change the color and icon theme and install a few new jewels, hence why I'm currently rocking 59 extensions.
This is my VS Code setup at the moment π
Some main changes from the initial layout include the sidebar on the right side, the activity bar, theme and sidebar items.
Starting with the theme, I'm currently using these extensions to achieve this look:
Theming & Layout
Theme: Electron vue
Sidebar Icons: Carbon Product Icons
Opacity (Linux & Windows only): GlassIt-VSC
Folder and File Icons: Moxer Icons
Font: FiraCode (w/ ligatures)
For the sidebar on the right side and other customizations that are available out of the box, you can add this to your settings.json (You can open your settings by pressing Ctrl + P and selecting 'Open Settings (JSON)'.
{
**"workbench.editor.tabCloseButton": "off", // I was accidentally closing tabs too often, so I removed the close button
"workbench.sideBar.location": "right", // Pretty straightfoward**
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'", // Fira Code is an open source ligature font that I strongly recommend you install
"editor.fontLigatures": true, // Enable font ligatures for Fira Code
"editor.formatOnPaste": true, // Formats your pasted content
"editor.minimap.enabled": true, // Enables the file minimap
"editor.minimap.maxColumn": 200, // Minimap char count
"editor.minimap.renderCharacters": false, // You can render actual characters instead of the color blocks
"editor.minimap.showSlider": "always", // Adds a scrollbar to the minimap
"terminal.integrated.fontFamily": "'MesloLGS NF', 'MesloLGL Nerd Font', monospace", // Change to your terminal font
"terminal.integrated.shell.linux": "/usr/bin/zsh", // Change to your default shell and check your OS key (ex: for mac use "shell.mac"),
"files.eol": "\n", // Force LF line endings, useful if you use Windows and Linux/Mac
"files.watcherExclude": { // Boosts performance by not watching for changes in these directories
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false // Set to true if you're enforcing ESLint. Disable if you're working on old projects that changed their linting config over time.
},
"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], // use ESLint on these files
"eslint.workingDirectories": [
"./node_modules/eslint"
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // use the Prettier extension to format javascript code
},
}
Linting & Code Formatting
I've included there two settings which are for two extensions, ESLint and Prettier - Code formatter.
The first is, in my opinion, the best linter for Javascript around. Basically it will warn or throw errors if your code breaks common best practices rules. If you have never used it I strongly suggest you start doing so, and every time ESLint complains about something you think it's stupid, go read about it instead of disabling the linter for that line. ESLint has seriously helped me grow as a developer and while it's a well known extension, it's one I can't help mentioning here.
Prettier on the other hand is a code formatter, it 'prettifies' your code. So when pasting something my editor, the code gets instantly formatted by Prettier.
Something that I've seen in some projects is combining both ESLint and Prettier, meaning that if code style is off the linter will warn you and Prettier will also format your code according to the ESLint rules you have in place.
Snippets
I honestly think I'm using far too many snippets extensions, despite the fact that I may or may not be using some on these list, who knows. I'm not a 'snippets' person. But from my extensions list, the ones that I use on a daily basis and actually know that they exist are, ES7 React/Redux/GraphQL/React-Native snippets, Path Intellisense & JavaScript (ES6) code snippets. Path Intellisense is great at auto completing your relative path imports, the other two I use mostly for JavaScript/React shortcuts. The big boss of auto complete and intellisense is Visual Studio IntelliCode, developed by Microsoft itself, it provides an AI-based relevant code completion to your code editor and is a must have for all VSCode users.
Other cool 'auto complete' extensions I have include Turbo Console Log which I use with the keyboard shortcut to log my highlighted variables, Auto Close Tag, a well known extension that works flawlessly even with self closing elements and my personal favorite Auto Import, which automatically finds and parses code actions for imports.
Productivity & Git
On the bottom bar there you can see how much I've coded for the day, I'm using two extensions for time tracking and I'm going to recommend the one I've been using for the longest time which is Waka Time. On the sidebar you can also see Project Manager's logo which is an extension for quickly switching between projects from your sidebar.
Also on the sidebar, we have two git extensions, Git Lens is the first and allows you to fully integrate git into your code editor by adding code blame, revision navigation and file,line and branch history all from your sidebar. The other one is Git Graph which adds a neat graphical interface to your Source Control tab and allows you to quickly check your repository status.
The last two items on the sidebar are Todo Tree, which shows all // TODO comments on the current repository and the bane of our existence, Jira also has a VSCode extension, which I only recently discovered, and offers a quick glimpse of your assigned tasks out of the box.
Honorable Mentions
Hermes Comments has about 1k installs and is a simple extension that adds comment commands to your VSCode Command Palette (Ctrl + Shift + P). Simply highlight text, hit the command palette and create framed or sub section comment out of the highlighted text.
Emoji Log is one of the many surfacing extensions that prefix your commits with Emoji. I prefer this one because it actually adds a button to the Source Control tab.
Power Mode is another extension I didn't know I needed until I had it. This baby adds up your keystrokes into combos and even has the option to add sparks and custom GIFs to your code editor.
People, I was blind before I started using ident-rainbow, Guides and Bracket Pair Colorizer. These are one of the most known and oldest extensions out there, and they're always present when I'm using VSCode, check them out if you haven't.
Full List
Theming & Layout
Productivity & Git
Utils
Languages & Snippets
ES7 React/Redux/GraphQL/React-Native snippets
IntelliSense for CSS class names in HTML
JavaScript (ES6) code snippets
JavaScript and TypeScript Nightly
Typescript React code snippets
Linting
Follow Me
Thanks if you ended up reading through the whole list πͺ For more JS/React content you can check out my website and follow me on Twitter.
Let me know what extensions you're using that I did not mention in here so I can check them out π
Top comments (2)
Great write-up! I got a lot of new extensions!
Thanks π₯°