š Visual Studio Code treasures
a list of Visual Studio Code extensions I canāt live without
It has almost been a year since I published my story about Atom the hackable text editor from our friends at GitHub hereās my take on VS Code šš¼
@Microsoft did an exceptional job by creating a super performant and flexible editor. Thereās a big community behind it and itās constantly improving. Besides flexibility and performance, it also offers IntelliSense, interactive debugging and build-in GIT commands.
If you havenāt switched yet, give it a try and let me know what you think about it.
How to install extensions?
Installing extensions in Visual Studio Code is a breeze! Launch Visual Studio Code Quick Open Ctrl+P(āP) and paste the extension installation command in there ext install prettier-vscode
The list
Prettier
This extension enables you to use Prettier in your projects.
Prettier is an opinionated code formatter with support for: JavaScript, (including ES2017) JSX, Flow, TypeScript, CSS, LESS, SCSS, JSON and GraphQL
You can learn more about prettier by watching this React Conf video.
Quokka
This extension enables you to use Quokka.js in your projects.
Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.
Use command Start on current file from the quokka.js command list or press Ctrl+K(āK)
Import Cost
This extension enables you to display import/require package size inside the file you are working in.
ESLint
This extension enables you to use ESLint. ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesnāt adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.
Markdown all in one
This extension enables you to have keyboard shortcuts (toggle bold, italic, code span and heading), a table of contents generator, automatically show preview, list editing and much more.
Because we all ā¤ Markdown, donāt we?
Project manager
This extension allows you to manage multiple projects inside visual studio code, the projects are listed in a projects.json that gives you full control over names and paths
Regex previewer
This extension enables you to validate your regular expressions in real-time.
Shows the current regular expression matches in a side-by-side document. This can be turned on/off with Ctrl+Alt+M (ā„āM).
Settings sync
This extension enables you to synchronize: settings, snippets, themes, file icons, key bindings, workspaces and extensions across multiple machines using GitHub gist.
It basically does the same as sync-settings did in Atom
Auto close tag
This extension allows you to automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
Path intellisense
This extension enables auto completion of file paths in your HTML tags.
Auto rename tag
This extension allows you to automatically rename paired HTML/XML tag.
Change case
This extension enables you to quickly change the case of the current selection or current word, you can change the cases to camelCase, CONSTANT_CASE, snake_case, kebab-case, etc.
Stylelint
This extension enables you to use Stylelint in your project, Styelint is a modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets.
Donāt forget to add a .stylelintrc config file to your project root. https://stylelint.io/user-guide/configuration/
Git Lens
This extension supercharges the built-in Visual Studio Code Git capabilities. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparison commands, and so much more.
TODO Highlight
This extension allows you to highlight TODOs, FIXMEs, and any keywords, annotations.
SVG Viewer
This extension enables you to view SVGās on the fly, just right click the file and view.
Extra
Color Info
This extension enables you to view color information specifics on a color entry in CSS.
VScode icons
This extension enables you to have specific file icons for almost every extension. By default Visual Studio Code now uses seti as icon pack, this is why I didnāt list VScode icons in the main list.
You can see it in action here
VS Code Spotify
This extensions allows you to use Spotify inside Visual Studio Code.
Calculate
This extension allows you to do evaluate your math.
Insert Numbers
This extension allows you to insert incrementing/decrementing numbers with a custom starting point.
Did I miss something powerful? ā”
If thereās a good extension available thatās not listed, please let me know in the comments. I tried to create a list of extensions that fit well into the generic workflow of a web developer. I might do a write up on specifics if requested, there are pretty powerful extensions out there if you are an Angular or React developer.
Thank you for taking the time to read this story! If you enjoyed reading this story, clap for me by clicking the below so other people can see this here on Medium.You can follow me on Twitter @0x1ad2 and feel free to tweet me anything!
I work at Sytac.io; We are a consulting company in the Netherlands, we employ around ~100 developers across the country at A-grade companies like KLM, ING, ABN-AMRO, TMG, Ahold Delhaize, and KPMG. Together with the community, we run DevJam check it out and subscribe if you want to read more stories like this one. Alternatively, look at our job offers if you are seeking a great job!
