Tools for Visual Studio Code.

This repository contains information about the tools that I often use in the visual editor code studio.

---

Global setting

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 13,
  "workbench.colorTheme": "TwoStones",
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.autoSlashAfterDirectory": false,
  "path-intellisense.showHiddenFiles": true,
  "editor.tabSize": 2,
  "alignment.beforeSave": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/build/**": true
  },
  "eslint.autoFixOnSave": true,
}

---

Themes & icons

TwoStone Theme

• Extension name: gerane.theme-twostones
• Autor: gerane
• Repo: Theme-TwoStone
• My preferences:
  • Font family: Menlo, Monaco, 'Courier New', monospace
  • Font size: 13
  • Tab size: 2

VSCode Icons

• Extension name: robertohuertasm.vscode-icons
• Autor: Roberto Huertas
• Repo: vscode-icons

---

Syntax highlighter

Babel Javascript

• Extension name: mgmcdermott.vscode-language-babel
• Autor: Michael McDermott
• File types: GraphQL, JSX, ES201x,...
• Repo: vscode-language-babel

Sass

• Extension name: robinbentley.sass-indented
• Autor: Robin Bentley
• Repo: vscode-sass-indented

GraphQL for VSCode

• Extension name: kumar-harsh.graphql-for-vscode
• Autor: Kumar Harsh
• File types: .gpl, .graphql, javascript, typescript, vue,...
• Repo: graphql-for-vscode

Bracket Pair Colorizer

Allows matching brackets to be identified with colours.

• Extension name: coenraads.bracket-pair-colorizer
• Autor: CoenraadS
• Repo: BracketPair

Color Highlight

Styles css/web colors found in your document.

• Extension name: naumovs.color-highlight
• Autor: Sergii Naumov
• Repo: vscode-ext-color-highlight

colorize

Instantly visualize css colors in your css/sass/less/postcss/stylus/XML... files.

• Extension name: kamikillerto.vscode-colorize
• Autor: kamikillerto
• Repo: vscode-colorize

DotENV

• Extension name: mikestead.dotenv
• Autor: mikestead
• File types: .env
• Repo: vscode-dotenv

Apache Conf

• Extension name: mrmlnc.vscode-apache
• Autor: mrmlnc
• File types: .conf, .htaccess, .htgroups or .htpasswd
• Repo: vscode-apache

---

Intellisense

IntelliSense for CSS class names in HTML

• Extension name: zignd.html-css-class-completion
• Autor: zignd
• Repo: HTML-CSS-Class-Completion

Path Intellisense

Autocompletes filenames.

• Extension name: christian-kohler.path-intellisense
• Autor: Christian Kohler
• Repo: PathIntellisense

Auto Close Tag

Automatically add HTML/XML close tag.

• Extension name: formulahendry.auto-close-tag
• Autor: Jun Han
• Repo: vscode-auto-close-tag

---

Preview

Auto-Open Markdown Preview

Automatically shows Markdown preview whenever you open new Markdown file.

• Extension name: hnw.vscode-auto-open-markdown-preview
• Autor: hnw
• Repo: vscode-auto-open-markdown-preview

SVG Viewer

• Extension name: cssho.vscode-svgviewer
• Autor: cssho
• Repo: vscode-svgviewer

View In Browser

• Extension name: qinjia.view-in-browser
• Autor: qinjia
• Repo: view-in-browser

---

Nice code

Better Align

Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>).

• Extension name: xandeer.better-align
• Autor: xandeer
• Repo: better-align

Sort lines

• Extension name: tyriar.sort-lines
• Autor: Daniel Imms
• Repo: vscode-sort-lines

ESLint

• Extension name: dbaeumer.vscode-eslint
• Autor: Dirk Baeumer
• Repo: vscode-eslint

---

Debugging

Turbo Console Log

Make debugging much easier by automating the operation of writing meaningful log message.

• Extension name: chakrounanas.turbo-console-log
• Autor: ChakrounAnas
• Repo: turbo-console-log

---

React snippets

ES7 React/Redux/GraphQL/React-Native snippets

Provide you Javascript and React/Redux snippets in ES7 with babel plugins features.

• Extension name: dsznajder.es7-react-js-snippets
• Autor: dsznajder
• Repo: vscode-es7-javascript-react-snippets