Read More
Menu Close

    Sublime Text Editor Package Controls and Snippets

    Today we will discuss about sublime text editor package controls and snippets. Sublime Text Editor is a C++ and Phython application written by Jon Skinner. First we need to think why we are using sublime text editor . There are several reasons for choosing sublime text editor over other text editors.

    Features

    • Command Palette (ctrl + shift + p)
    • File Switching (ctrl + p)
    • Goto Symbols (ctrl + r)
    • Multi-Edit (ctrl + click)
    • Snippets
    • Keyboard Shortcuts

    BASIC Commands

    • F11 Full Screen
    • shift + F11 Distraction Free Mode
    • ctrl + shift + p Command Palette
    • ctrl + ` Show Console
    • ctrl + k + b Show/Hide Sidebar
    • ctrl + / Comment
    • ctrl + shift + / Block Comment
    • ctrl + k + u Uppercase
    • ctrl + k + l Lowercase

    SELECTION Commands

    • ctrl + d Select Word
    • ctrl + d Use multiple times to select next instance of the selected word
    • ctrl + click Create multiple cursors for multi-editing
    • ctrl + shift + space Expand selection to scope. Repeating keeps expanding.
    • ctrl + shift + m Expand to brackets
    • ctrl + shift + j Expand to indentation

    GOTO Commands

    • ctrl + p Open file based on name
    • ctrl + g Go to line number
    • ctrl + r Go to symbol
    • ctrl + p THEN @ Open file based on name and search for symbol
    • ctrl + m Go to matching bracket

    LINES Commands

    • ctrl + l Select line
    • ctrl + shift + k Delete line
    • ctrl + ] Indent
    • ctrl + [ Unindent
    • ctrl + enter Insert line after
    • ctrl + shift + enter Insert line before
    • ctrl + shift + ↑ Swap line up
    • ctrl + shift + ↓ Swap line down
    • ctrl + shift + d Duplicate line
    • ctrl + j Join Line

    Code Folding Commands

    • ctrl + shift + [ Fold
    • ctrl + shift + ] Unfold
    • ctrl + k + j Unfold All

    Search Find Replace Commands

    • ctrl + f Find
    • F3 Find next
    • shift + F3 Find previous
    • ctrl + shift + f Search all files in a folder
    • ctrl + h Replace
    • ctrl + f THEN alt + enter Find a certain term then select them all for multi-editing

    Tabs Windows and Pane Commands

    • ctrl + shift + n New Window
    • ctrl + n New Tab
    • alt + # Select a Tab (ie alt + 3)
    • ctrl + w Close Tab
    • ctrl + shift + # Move tab to a Pane (ie ctrl + shift + 2)
    • ctrl + # Focus on a Pane (ie ctrl + 2)
    • alt + shift + 1 One Column
    • alt + shift + 2 Two Columns
    • alt + shift + 3 Three Columns
    • alt + shift + 4 Four Columns
    • alt + shift + 8 Two Rows
    • alt + shift + 9 Three Rows
    • alt + shift + 5 Two x Two Grid

    Booksmarks Commands

    • ctrl + F2 Create Bookmark
    • F2 Next Bookmark
    • shift + F2 Previous Bookmark
    • ctrl + shift + F2 Clear Bookmarks
    Creating New Snippet

    Goto tools->new Snippet
    It wil provide you some default code like this one

    <snippet>
    		<content>
    		<![CDATA[
    		Hello, ${1:this} is a ${2:snippet}.
    		]]>
    		</content>
    			<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    			<!-- <tabTrigger>hello</tabTrigger> -->
    			<!-- Optional: Set a scope to limit where the snippet will trigger -->
    			<!-- <scope>source.css</scope> -->
    	</snippet>
    
    
    

    You just need to add your content inside

    <content></content>

    You need to setup a keyword by which you can use this snippet

    <tabtrigger>xyzzz</tabtrigger>

    Here is a demo for creating a snippet :-
    3
    You need to save this snippet as an extension .sublime-snippet otherwise it will not work
    1
    here is code generated by snippet in file
    2

    Start your headless eCommerce
    now.
    Read More
    Using Package controls in Sublime Text Editor

    You Need to follow steps :-

      • Go to https://packagecontrol.io/installation & copy the command there.You can also browse various package controls over there
      • Open the Sublime Text Editor console by pressing Ctrl + `.
      • Paste the command you copied into the Sublime Text console.

    4

    • Press Enter.
    • After Package Control installs, restart Sublime Text Editor.

    After Restarting sublime Text Editor You need execute these steps :-

    • Press Command-Shift-P (Mac OS X) or Ctrl-Shift-P (Windows) to open the Command Palette.
    • Start typing Package Control until you see the appropriate commands.

    Now Start using package controlls by installing them
    Here is an example of insatalling package control

    CSS Format

    Press Command-Shift-P (Mac OS X) or Ctrl-Shift-P (Windows) to open the Command Palette.
    Start typing Package Control until you see the appropriate install command
    type css format and press enter
    CSS Format comes with different Options like
    Example:

    Expanded:
    body {
        background: #fff;
        font: 12px Arial, Helvetica, sans-serif;
    }
    ol, ul, li {
        margin: 0;
        padding: 0;
    }
    a {
        color: rgba(65, 131, 196, 0.8);
    }
    Expanded (Break Selectors):
    body {
        background: #fff;
        font: 12px Arial, Helvetica, sans-serif;
    }
    
    ol,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    a {
        color: rgba(65, 131, 196, 0.8);
    }
    
    
    
    Compact:
    body { background: #fff; font: 12px Arial, Helvetica, sans-serif; }
    ol, ul, li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
    Compact (No Spaces):
    body{background:#fff;font:12px Arial,Helvetica,sans-serif;}
    ol,ul,li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
    Compact (Break Selectors):
    body { background: #fff; font: 12px Arial, Helvetica, sans-serif; }
    ol,
    ul,
    li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
    Compressed:
    body{background:#fff;font:12px Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}

    There are around 2500 packages available for sublime text editor
    Other Trending Text Editor are Atom By Github and Brackets By Adobe.

    Atom is an open source application developed in Node.js, C++, CofeeScript and Less .

    Atom Features
    • Free and open source on all platforms
    • Integration with Git and GitHub
    • A good selection of themes and plugins with a built-in package manager
    • Attractive interface

    Brackets :- It’s been specifically created for web developers and is written in HTML, CSS and JavaScript using CodeMirror in a Node.js container.

    Brackets Features
    • Free and open source on all platforms
    • Good language and linting support especially for web development
    • Live browser preview and updates without a server (requires Chrome)
    • Inline CSS editing
    • Multiple selection editing, auto-complete and color picker
    • Attractive interface

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    1 comments

  • Rapchika Dosis
    Snippets part was quite good thankx for writing this blog
  • Back to Top

    Table of Content