Visual Studio Code - Config

This project contains all my personal visual studio code settings. If you like my configuration I offer you a small guide to have my configuration in your visual studio code.

If you decide to install my configuration keep in mind that you will also install the shortcuts that I use. This means that they can diverge from the default settings. I encourage you to research all the shortcuts I use and customize them for you.

About this repository

This repository was created with the idea of offering new users an advanced visual studio code configuration. As my main job is javascript developer almost all this configuration is ready for it. If you work with other languages I encourage you to visit the aweosome-vscode repository which contains a list of amazing extensions and themes for visual studio code.

Installation

1. Install Fira Code font.

2. Install Settings Sync extension.

3. Go to setting sync extension and click 'Download Public Gist'

4. Paste the following Gist:

4f6d6508cd38526ce22faf2117cb4306

5. Restart visual studio code.

Extensions

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.

Auto Rename Tag

Auto rename paired HTML/XML tags.

Babel ES6/ES7

Improves majorly on the grammar distributed by default with vscode.

Beautify css sass scss less

Beautify css, sass and less code (extension for Visual Studio Code).

Better Haml

Better haml support, with parentheses coloring, auto close parentheses, brackets, curly braces, quote, double quote, backtick, ruby interpolations, etc.

Bookmarks

Mark lines and jump to them.

Bracket Jumper

Navigate by jumping from bracket to bracket!

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

Bracket Select

This is a simple plugin that support to quick select text between matched brackets.

Center Editor Window

This extension centers your editor window at the current cursor position.

Change String Case

Change the selected string from one case format to another.

Code Spell Checker

A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Colorize

A vscode extension to help visualize css colors in files.

CSS Peek

Peek or Jump to a CSS definition directly from HTML, just like in Brackets!

Debug arrow function

To help debugging you can create usual "block body" to your arrow function and later convert it back.

DotENV

Support for dotenv file syntax.

Duplicate Action

Ability to duplicate files and directories.

Editor Config for VS Code

Editor Config for VS Code.

ES7 React Redux GraphQL React Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax.

ESLint

Integrates ESLint JavaScript into VS Code.

Flow Language Support

This extension adds Flow support for VS Code. Flow is a static type checker, designed to find type errors in JavaScript programs.

gitignore

A extension for Visual Studio Code that assists you in working with .gitignore files.

Hightlight selections vscode

Select or double click a word to highlight it in your editor.

HTML Snippets

Full HTML tags including HTML5 Snippets.

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.