My Visual Studio Code Setup: Extensions and Themes Posted March 19, 2020 by Matthias Ott #code #extensions #themes #tools #vs code And then, the display of my MacBook Pro broke. So after five years, it was time to get a new machine, after all. Every time this had happened in the past, I took the opportunity to start from scratch and do a fresh install of all the software I in fact use and need. Consequently, I spent the past couple of days setting up my new Mac. As part of that, I also set up my development environment and my current editor of choice, Visual Studio Code. One of the strengths of VS Code is the ecosystem of extensions that has grown quite substantially and many of the extensions can really take our coding experience one step further. But which are the extensions one should install? I already had tried and installed quite a few extensions before but I also asked on Twitter to get other people’s opinions and maybe learn about a few extensions I hadn’t heard of before. So here’s the list of extensions I ended up installing, in alphabetical order. If you have more to add, feel free to write me a message or email. Extensions Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag This extension automatically adds HTML or XML closing tags so you don’t have to do it manually. Better Comments https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments Better Comments will help you write, well, better comments by highlighting different types of comments, like alerts, questions, or TODOs, in different colors. Bracket Pair Colorizer 2 https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2 This extension colorizes matching brackets in the same color. So useful once you get used to the many additional colors in your code. Dash https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash Dash is an app that lets you read API documentation and code snippets, also offline. This integration for Visual Studio Code is an easy way to access documentation from VS Code. EditorConfig for VS Code https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig Providing an .editorconfig file has become a standard for many, especially when working together in teams. It allows you to define editor settings for a project so that, for example, a newline is inserted at the end of files automatically or that everyone indents their code with spaces, or tabs, or spaces, or tabs… *UPDATE: This extension is obviously no longer needed as VS Code now comes with support for .editorconfig files built-in.* ✨ ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Code linters analyze your code and find problems and errors. This extension integrates the JavaScript linter ESLint into VS Code. Git History https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory If you are using Git for version control, this extension lets you explore the history of your project within VS Code. View and search Git log, view previous versions of a file, or compare branches, commits, and files across commits. GitLens — Git supercharged https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens The essential extension for Git. You can see when and by whom each line of code was changed – inline in your editor. GitLens also lets you explore the history of your codebase and compare branches, commits, tags, and much more. Import Cost https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost If you are working with JavaScript modules, it happens quickly that you import too much code. Using Webpack, this extension will display the size of the imported package right behind the import statement. Live Share https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time. You can share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more. npm Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense npm Intelligente autocompletes npm modules in import statements. As simple as effective. Path Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense This extension autocompletes filenames. Permute Lines https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines&ssr=false#review-details Permute Lines lets you reverse or shuffle lines of code or filter for unique lines. PHP Intelephense https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client Intelephense provides PHP language features like code completion, documentation, formatting, and more. Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier is a code formatter for JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Vue, Markdown, YAML, and many more code styles. Project Manager https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager Project Manager helps you to easily access your projects, no matter where they are located. You can manually add projects or let the extension auto-detect Git, Mercurial or SVN repositories, VSCode folders or any other folder. Thanks to Max Böck for the suggestion! SVG https://marketplace.visualstudio.com/items?itemName=jock.svg SVG adds full SVG language support to VS Code, including auto-complete, a live preview, the MDN reference, and a color picker. Remote - SSH https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. Thanks to Timo Salm for the suggestion! Task Explorer https://marketplace.visualstudio.com/items?itemName=spmeesseman.vscode-taskexplorer Lists all supported tasks (think npm, Gulp, Ruby, etc.) for a project in a tree view. Tasks can be viewed, edited, started, and stopped directly from within VS Code. Twig Language 2 https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2 Adds support for the Twig templating language. Useful if you use Craft CMS, for example. VS DocBlockr https://marketplace.visualstudio.com/items?itemName=jeremyljackson.vs-docblock A DocBlock is a special type of comment that includes details about a method or function, like the function parameters or the type of returned data. VS DocBlockr makes writing those comments easy: Pressing enter or tab after /** will yield a new line and automatically close the comment. This alone makes it much easier to write longer comment blocks. But if the line directly afterward contains a function definition, then the name and parameters of the function are automatically added to the comment, too. Wrap Console Log Simple https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple Put your cursor on a word and use a shortcut to create a console.log statement with that exact word. Installing Extensions via the CLI Shortly after I shared this article, Stefan Judis shared a super useful tip with me: You can install VS Code extensions via the command line (CLI) and put them all in a script and into your dotfiles, for example. Here is an example script with the extensions from the list above: https://gist.github.com/matthiasott/1695ca6f1fe9ccfc18ff6748fb2767c1 Themes So that’s it as far as extensions are concerned. But there is one important topic missing: Themes. The theme substantially influences how comfortable you feel in your code editor. So it is worth mentioning, although, in the end, it is above all a matter of personal preference. For quite a while, I was using the dark City Lights theme. I like the balanced colors of the theme and that it puts a lot of focus on functions and variable names. It also comes with an icon pack that fits in nicely with the overall look of the theme. A few days ago, though, I decided to switch to Sarah Drasner’s Night Owl theme. Sarah has done outstanding work in creating a theme that is colorful without being distracting. Night Owl is also accessible to people with colorblindness and in low-light circumstances. I like the background of the editor window to be a tiny bit darker than the default blue of the theme, so I adjusted the color in the preferences. So far, I enjoy the theme a lot. So that wraps up this post about my current VS Code setup. I hope you found this list helpful and, as mentioned before, if you have anything to add like better or more extensions, I’d love to hear from you. ~ 106 Webmentions @matthiasott @matthiasott VS Code have come a long way. I think a lot of these features are now native. Path intellisense for one. Also not sure if you have tried the new default theme “Dark Modern” it’s really good! @michelle This post by @michelle will also be very helpful! 🎉 https://css-irl.info/setting-up-a-newish-macbook/ CSS { In Real Life } | Setting Up a New(ish) MacBook Matthias Ott You’re welcome – and thanks! ????; Madza Thanks for the insight! 🔥🔥 Awesome portfolio, btw 💯 Jorge Goes My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… Alex Devero My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… #dev #programming #coding Sy Dinh My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… Pinboard Popular My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer matthiasott.com/notes/visual-s… nuncapops My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer matthiasott.com/notes/visual-s… Raul of House Stark matthiasott.com/notes/visual-s… 全;部;入;り;HTML太;郎; My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer matthiasott.com/notes/visual-s… TheDevList My Visual Studio Code Setup Extensions and Themes ????; ????; matthiasott.com/notes/visual-s… #Code #100DaysOfCode pierresis Love it. matthiasott.com/notes/visual-s… DenisT My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… Yong Sheng interesting list. need to give some of them a spin. matthiasott.com/notes/visual-s… Malibu IT Labs My Visual Studio Code Setup: Extensions and Themes: Matthias Ott’s posted his VS Code setup. I find lists like this (I rounded up some recent updates of my own) irresistible, probably because, like y’all, I spend an awful lot of time in VS Code and wanna… matthiasott.com/notes/visual-s… Dakshraj Enterprise My Visual Studio Code Setup: Extensions and Themes matthiasott.com/notes/visual-s… Angel Guerra My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… José Luis Estévez My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… Ann My Visual Studio Code Setup: Extensions and Themes matthiasott.com/notes/visual-s… Lukasz Mazur My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… Martin Hartwig List of very useful extensions for VSCode. Thank you, @m_ott! Gabriel Avedikian De quoi bien customiser votre Editeur de code préféré ;) matthiasott.com/notes/visual-s… Matthias Ott Thanks, Dzhavat! (I’ll have a look at your extension, too ????;) Dzhavat Ushev Nice list. I also use some of the same extensions. I recently updated one of my extensions to help front-end folks have a better time working with flexbox????; marketplace.visualstudio.com/items?itemName… #shamelessPlug Stefan Judis Nice one! I love these kind of posts! ????;????;????;????;♂;️; Stefan Judis After reading about @m_ott's VS Code setup I installed 5 new extensions. ????; ????; Matthias' setup: matthiasott.com/notes/visual-s… Little @code tip: you can install extensions via the CLI & put them then into your dotfiles. ????; ????;My VSCode extensions setup script: github.com/stefanjudis/do… Stefan Judis Just installed it. :) Let's see. ????;????; Stefan Judis ????; That is very nice!!! ????;????; Thanks! Sumit Kumar npm-intellisense caused quite the performance issues for me. Is it better now? Haven't tried it in a few months franz A manifest-y approach: //dump extensions to text file `code --list-extensions > vscode.txt` //install from text file `cat vscode.txt | xargs -L 1 code --install-extension` Paweł; Grzybek Yes boi! github.com/pawelgrzybek/d… Matthias Ott Also installed it a few days ago. No performance issues so far. But I’ll have a close look at it… ????; 66 Likes Michelle Barker Alan Charlesworth Sven Kaemper Elly Loel ✨;????; Matt Stein Chris Coleman JIBIN-P Nikhil Patil Muhamed Brifkani Eric Amodio Artem Marchuk Edwar Budiman Tabs MD Tafsirul Haque Danish ❤; JS Claire Patryk Wę;grzyn Chris ShortGuyUI Seif Ibrahim ✊;????; defund the police + wear a mask Victor Arciles Mustafa Elsayed Mirza Rahman vdmo Sparxia Nick Muth Dario Diaz Michael Santoroski Sylvester sakhisheikh Ben Brehaut Daniel Peplow Morteza Zainab Oraby Dino Pephanis Mozafar Reza Primardiansyah Peter Roman Mahr Tom Hermans????; Sara Soueidan Madza Flo Denise Zversity.com- Free online university Raghava Nellaturu ????;????;????;????; Zander Siva Subramanian Vaidyanathan Tom Hermans ????; Senthamilselvan gilberto flores [(+)] Otto Nafizi Jens Geiling Aaron Peters Mark Boulton Tobias Jens Grochtdreis Jens H HsiangHui Regis Freyd ????;️; duard @[email protected] Scott Tim Grochowski Charles Bauer 7 Reposts Nikhil Patil Deepak Patel Tobias ????;️; duard kdung Charles Bauer Calum Ryan ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions. Have you published a response to this? Send me a webmention by letting me know the URL. Ping! More Notes Continvoucly Morged Value To Affinity and Beyond The Mystery of Storytelling Amateurs!
@matthiasott @matthiasott VS Code have come a long way. I think a lot of these features are now native. Path intellisense for one. Also not sure if you have tried the new default theme “Dark Modern” it’s really good!
@michelle This post by @michelle will also be very helpful! 🎉 https://css-irl.info/setting-up-a-newish-macbook/ CSS { In Real Life } | Setting Up a New(ish) MacBook
Jorge Goes My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s…
Alex Devero My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s… #dev #programming #coding
Sy Dinh My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s…
Pinboard Popular My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer matthiasott.com/notes/visual-s…
nuncapops My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer matthiasott.com/notes/visual-s…
全;部;入;り;HTML太;郎; My Visual Studio Code Setup: Extensions and Themes · Matthias Ott – User Experience Designer matthiasott.com/notes/visual-s…
TheDevList My Visual Studio Code Setup Extensions and Themes ????; ????; matthiasott.com/notes/visual-s… #Code #100DaysOfCode
Malibu IT Labs My Visual Studio Code Setup: Extensions and Themes: Matthias Ott’s posted his VS Code setup. I find lists like this (I rounded up some recent updates of my own) irresistible, probably because, like y’all, I spend an awful lot of time in VS Code and wanna… matthiasott.com/notes/visual-s…
Dakshraj Enterprise My Visual Studio Code Setup: Extensions and Themes matthiasott.com/notes/visual-s…
Angel Guerra My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s…
José Luis Estévez My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s…
Lukasz Mazur My Visual Studio Code Setup: Extensions and Themes, by @m_ott matthiasott.com/notes/visual-s…
Gabriel Avedikian De quoi bien customiser votre Editeur de code préféré ;) matthiasott.com/notes/visual-s…
Dzhavat Ushev Nice list. I also use some of the same extensions. I recently updated one of my extensions to help front-end folks have a better time working with flexbox????; marketplace.visualstudio.com/items?itemName… #shamelessPlug
Stefan Judis After reading about @m_ott's VS Code setup I installed 5 new extensions. ????; ????; Matthias' setup: matthiasott.com/notes/visual-s… Little @code tip: you can install extensions via the CLI & put them then into your dotfiles. ????; ????;My VSCode extensions setup script: github.com/stefanjudis/do…
Sumit Kumar npm-intellisense caused quite the performance issues for me. Is it better now? Haven't tried it in a few months
franz A manifest-y approach: //dump extensions to text file `code --list-extensions > vscode.txt` //install from text file `cat vscode.txt | xargs -L 1 code --install-extension`
Matthias Ott Also installed it a few days ago. No performance issues so far. But I’ll have a close look at it… ????;
