Photo by Kevin on Unsplash - https://unsplash.com/photos/w7ZyuGYNpRQ
Here is a list of some extensions I come to enjoy with VS Code. Since I work a lot in the frontend most of these extensions will be useful for web developers.
I have been working previously with Atom, Visual Studio and Webstorm but VSCode suits me best and is just incredible. The developer did a great job ( and still do! ). Try it for yourself and enjoy!
📄 Table of contents
“To enjoy life, you don't need fancy nonsense, but you do need to control your time and realize that most things just aren't as serious as you make them out to be.”
― Timothy Ferriss
HTML Extensions
Auto Close Tag
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
Auto Rename Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
HTML Snippets
This extension adds rich language support for the HTML Markup to VS Code, including: Full HTML5 Tags, Colorization, Snippets
Markdown Extensions
Auto-Open Markdown Preview
This VS Code extension automatically shows Markdown preview whenever you open new Markdown file. If you feel annoying to type "Ctrl+K V" or "⌘+K V" (preview side-by-side) many times, this extension helps you.
Markdown TOC
Generate TOC (table of contents) of headlines from parsed markdown file.
Markdown Theme Kit
A set of themes based on SublimeText-Markdown/MarkdownEditing.
Code Spell Checker
A basic spell checker that works well with camelCase code.
JavaScript Extensions
Babel ES6/ES7
Adds JS Babel es6/es7 syntax coloring
Debugger for Chrome
Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
ESLint
Integrates ESLint into VS Code.
JavaScript (ES6) code snippets
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
Code Spell Checker
A basic spell checker that works well with camelCase code.
Node.js Modules Intellisense
Visual Studio Code plugin that autocompletes JavaScript / TypeScript modules in import statements.
React-Native/React/Redux snippets for es6/es7
TSLint
Integrates the tslint linter for the TypeScript language into VS Code.
vscode-styled-components
Syntax highlighting for styled-components.
GraphQL for VSCode
GraphQL syntax highlighting, linting, auto-complete, and more!
yarn
yarn commands for VSCode
General Extensions
Color Highlight
vscode-ext-color-highlight
This extension styles css/web colors found in your document.
Custom CSS and JS Loader
Custom CSS to your VS Code. Based on robertohuertasm’s vscode-icons.
EditorConfig for VS Code
EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.
File Templates
Visual Studio code extenstion that allows to quickly create new files based on defined templates.
Git History (git log)
View git log along with the graph and details.
View the history of a file (Git log) or the history of a line in a file (Git Blame). View a previous copy of the file. Compare a previous version with the version in the workspace or another. View commit log details for a selected commit. Compare commits.
Guides
A Visual Studio Code extension for more guide lines
Material Icon Theme
The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.
Rainbow Brackets
Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets.
Prettier
VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
Project Manager
Manage your projects right inside Visual Studio Code. Easily access and switch between them.
Theme - Seti-Monokai
Seti Monokai color scheme
WakaTime
Metrics, insights, and time tracking automatically generated from your programming activity.
Settings Sync
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
Thanks for reading my article! Feel free to leave any feedback!
Daniel is a LL.M. student in business law, working as a software engineer and organizer of tech related events in Vienna.
His current personal learning efforts focus on machine learning. Connect on: