Cacher is the code snippet organizer for pro developers

Webstorm settings:
==================
File/Settings -> Plugins -> Browse repositories...
	- Angular2 TypeScript Live Templates
	- Sass Lint

To enable file preview on single click on file name:
	On the Project tree on left side, click the cog (settings) icon and enable "Autoscroll to Source"
For a bit better file list, sort files by file type in folders:
	On the Project tree on left side, click the cog (settings) icon and enable "Sort by Type"
Enable lens mode:
	File/Settings -> Editor -> General -> Appearance -> Enable "Show code lens on scrollbar hover"
Show css colors in file (preview):
	File/Settings -> Editor -> General -> Appearance -> Enable "Show CSS color preview as background"
Show whitespaces (space, tab, etc):
	File/Settings -> Editor -> General -> Appearance ->  Enable "Show whitespaces" and select the types you want to see (I use leading and trailing)
	Also it is good practice to change the whitespace color to a less disturbing one,
	like for example for the Twilight color scheme to #2E2E2E under 
	File/Settings -> Editor -> Color Scheme -> General -> [Text] -> WhiteSpaces -> Foreground: #2E2E2E
File tabs in multiple rows so you don't have to scroll through them:
	File/Settings -> Editor -> General -> Editor Tabs -> Disable "Show tabs in single row".
	Also you can change the placement of tabs here (I prefer left/right, instead of top; also in this case increase the tab limit to 40 below)
	Note: do not use "hide file extension in editor tabs" because it cuts everything after thefirst dot in the filename.
Order opened file tabs by file name:
  Right click on a tab and check "Sort Tabs By Filename". You also can check "Open New Tabs At The End".
Show which files have unsaved changes:
	File/Settings -> Editor -> General -> Editor Tabs -> Enable "Mark modified tabs with asterisk"
To disable files save when leaving the editor: 
	File/Settings -> Appearance & Behaviour -> System Settings -> [Synchronization]: Disable "Save files on frame deactivation"
Add Visual Studio + Resharper keymap:
	This keyboars schema is not available in the predefined list (only VS), so go to
	https://github.com/hhariri/Tidbits/blob/master/resharper.jar and download it, then go to
	File -> Import settings... and browse the file.
	Select all checkboxes in the dialog and OK, then restart the IDE when it is offered.

Live Templates
==============
Live templates are for Keyword+TAB activated inline templates.

Set them at:
File/Settings -> Editor -> Live Templates

If you don't have a group, create one (easier to collect own ones in one place):
  right side cick on the + and chose 2. Template Group... -> Enter a name

Add a new template with the same + button, chosing 
- 1. Live Template
- add the keyword (abbreviation) that you want to type before hitting tab
- add a description to know what this template does (shows in the intellisense)
- add the template itself. You can use variables and jump between them with tab 
  when you use the template.
  variable format is $VARIABLENAME$. If you use the $END$ variable, 
  the cursor will be placed there by default when you hit tab.
- set context below the template text input area. You can chose here what 
  kind of languages and cases when you want to be able to use the snippet.
  Eg. a js/ts snippet is useless in html.

-------------------------

console.log templates:

Abbreviation: cl
Description: console.log
Template text (without "s): "console.log($END$);"
Context: JavaScript, TypeScript

Abbreviation: cll
Description: console.log text and variable
Template text (without "s):
"console.log('$NAME$ ', $VALUE$);
$END$"
Context: JavaScript, TypeScript