#css #html #php #Sublime Text 3

Sublime Text 3 – CheatSheet & Plugins for Web develpment.

First point of the program is installing the Sublime Text Editory itself. If you are using Sabayon or Gentoo, the is an overlay sublime-text, so You can emerge it.

Installing Sublime Text 3 on Gentoo / Sabayon

layman -a sublime-text
layman -S 
emerge --regen

emerge -av app-editors/sublime-text

Installing helpfull plugins for Sublime Text 3

First of all install “Package Control” an utility that would make the plugin install proces simplier. Press CTRL+` and type

import urllib.request,os; 
pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

After that restart Sublime Text.

    • *Next, install some plugin from the list:

    • SublimeLinter – Highlight errors for most of the programming languages
    • LiveReload – See changes without refreshing the whole page in the browser/
    • Emmet – Rapid HTML and CSS writing
    • Valig – Plugin for vertical aligning of code
    • DockBlockr – Easy DockBlock sections creation
    • IndentGuides – Graphical symbols for code intendation
    • Fetch – Quick and easy method for downloading external files / packages to You project. Predefined list of packages.
    • Prefixr – Write just CSS3, and the plugin will add the necessary prefixes
    • Zen Tabs – Limit open tabs and highlight modified files
    • HTML5 – a html5 bundle
    • HTML Compressor – Minify js, css, html within Sublime Text

Keyboard Shortcuts worth knowing

  • CTRL+k, CTRL+b – Toggle the sidebar
  • F11 – Toggle Full Screen
  • SHIFT+F11 – Toggle Distraction Free
  • alt+. – Close Tag
  • CTRL+p – Show the go to overlay panel
  • CTRL+l – Select whole line
  • CTRL+SHIFT+p – Show the command overlay panel
  • CTRL+alt+p – Show the project selector panel
  • CTRL+r – Show the go to overlay panel default to method selector
  • CTRL+g – Show the go to overlay panel default to go to line selector
  • CTRL+; – Show the go to overlay panel default to variable selector
  • CTRL+SHIFT+up – Swap with the line above
  • CTRL+SHIFT+down – Swap with the line below
  • CTRL+/ – Toggle a comment
  • CTRL+SHIFT+/ – Toggle a comment block
  • CTRL+SHIFT+d – Duplicate a line
  • CTRL+` – Display console panel
  • CTRL+space – Auto complete the current selected snippet
  • CTRL+k, CTRL+u – Toggle upper case
  • CTRL+k, CTRL+l – Toggle lower case
  • ctrl+k, CTRL+l – Toggle lower case

Bonus – Connecting Sublime Text 3 with yakuake

To enable yakuake for a the Sublime Terminal plugin we need to create a script, that would show the yakuake window, open a new terminal session and run the predefined command.

Create a file ~/.sublime2yakuake and make it executable.

touch ~/.sublime2yakuake
chmod +x ~/.sublime2yakuake

Open the newly created file, and add following:

#!/bin/bash
qdbus org.kde.yakuake /yakuake/window toggleWindowState; 
qdbus org.kde.yakuake /yakuake/sessions org.kde.yakuake.addSession; 
qdbus org.kde.yakuake /yakuake/tabs     org.kde.yakuake.setTabTitle  "`qdbus org.kde.yakuake /yakuake/sessions org.kde.yakuake.activeSessionId` "  "SUBLIME - "; 
qdbus org.kde.yakuake /yakuake/sessions org.kde.yakuake.runCommand  "cd $(pwd)"  >/dev/null 2>&1 &

Now open Sublime Text and at Preferences -> Package Settings -> Terminal -> Settings -> User add:

{
    "terminal": "~/.sublime2yakuake",
    "parameters": ["pwd"]
}