Skip to content

SafeSyntax/Sublime-Text-Shortcut

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
readme.md
readme.md
 
 

Repository files navigation

Installation

1.To install, copy the Python code for Sublime Text 3 found here. Click View > Show Console to open the ST3 console. Paste the code into the console. Press enter. Reboot ST3.

2.You can now install packages by using the keyboard shortcut ctrl+shift+P or Click Preferences > Package Control. Start typing install until Package Control: Install Package appears. Press enter and search for available packages.

3.Some other relevant commands are:

List Packages shows all your installed packages
Remove Packages removes a specific package
Upgrade Package upgrades a specific package
Upgrade/Overwrite All Packages upgrades all your installed packages
Check out the official documentation to view more commands.

Then write emmet

How to install: The preferred way to install Emmet is to use Package Control:

Open Command Palette in Sublime Text Pick “Install Package” command Find and install “Emmet” plugin

Sublime Text 3 - Useful Keyboard Shortcuts (Windows)

General

Shortcut Description
Ctrl+P go to file
Ctrl+G go to line
Ctrl+R go to methods
Ctrl+KB toggle side bar
Ctrl+N new tab
Ctrl+Shift+N new window

Editing

Shortcut Description
Ctrl+L select line (repeat select next lines)
Ctrl+D select word (repeat select others occurrences in context for multiple editing)
Ctrl+Shift+Enter insert line before
Ctrl+Enter inter line after
Ctrl+Shift+K delete line
Ctrl+KK delete from cursor to end of line
Ctrl+KBackspace delete from cursor to start of line
Ctrl+Shift+D duplicate line(s)
Ctrl+KU upper case
Ctrl+KL lower case
Ctrl+/ comment line
Ctrl+Shift+/ block comment
Ctrl+Y redo or repeat
Ctrl+C copy
Ctrl+V paste
Ctrl+X cut
Ctrl+Y redo or repeat
Ctrl+Shift+V paste and ident
Ctrl+Shift+L splits the selection into multiple selections

Most Usefull Package

i.PackeageControl (A full-featured package manager that helps discovering, installing, updating and removing packages for Sublime Text 2/3. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system.)
ii.Using Emmet with Sublime Text. Emmet is an invaluable time-saving tool for anyone who writes HTML and CSS. ... One of the biggest problems with hand-authoring HTML is the monotony of writing the common markup that surrounds content itself.
iii.Open Url
iv. FuzzyFilePath (Fuzzy search and insert filenames inside your current project directory. Highly customizable.)

Most Useful Plugins (Preferences > Package Control > Install Package (NOW SEARCH Your Plugin)

1. AutoFileName (Auto Completes fileName / Path)

Special Important

Shortcut Description
Ctrl+Shift+L splits the selection into multiple selections
Ctrl+ShiftPL Showing menu bar
Ctrl+K,CtrlB Showing Sidebar
Ctrl+Shift+F Put the words, sentence, or line of codes that you want to change in the Find field.
{ "keys": ["ctrl+alt+shift+s"], "command": "save_all" }, for “save all” -> Preferences -> Key Bindings -> Default. Paste this on a new line, right above the last closing square bracket:
To make cursor in every front line or every end of line
ctrl+A select all
ctrl+Shift+L Add cursor to all line
Shift+Home put cursor to first word in the line
Spell Checking Preferences -> Settings -> "spell_check": true, "dictionary": "Packages/Language - English/en_US.dic"
open the same file multiple times Use the menu item “File” -> “New View into File”

Live Reload

Note: At first install "Package Contro" (View > Show Console > hit the code https://packagecontrol.io/installation)

i. Preferences > Package Control > Package Control: Install Package > LiveReload ( Please be sure to restart Sublime Text to start using this new version. For more information or how to use this plugin visit https://github.com/alepez/LiveReload-sublimetext3)
ii. Preferences > Package Settings > LiveReload > Plugins > Enable/disable Plugins (hit the enter) > Enable - Simple Reload
iii. add LiveReload Chrome Extension in the Google Chrome and Right Click the extension that you add > Manage Extensions > Allow access to file URLs

Important for Always Enable

Go Preferences > Package Settings > LiveReload > Setings - User

{ 
    "enabled_plugins": [ 
    	"SimpleReloadPlugin", 
    	"SimpleRefresh" 
    ] 
}

And now Ready for work.

Find / Replace

Shortcut Description
Ctrl+F find
Ctrl+I incremental find
Ctrl+H replace
Ctrl+F3 find next occurrence of current word
Alt+F3 select all occurrences of current word for multiple editing
Ctrl+Shift+F find in files

Quick way to code at Sublime Text

Shortcut Description
Ctrl+F find
Ctrl+I incremental find
Ctrl+H replace
Ctrl+F3 find next occurrence of current word
Alt+F3 select all occurrences of current word for multiple editing
Ctrl+Shift+F find in files

Quick way to code at Sublime Text

for HTML

Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: div →

, foo → and so on.

Child: >

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

Sibling: +

div+p+bq

div+div>p>span+em

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

Climb-up: ^

With ^ operator, you can climb one level up the tree and change context where following elements should appear:

div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

You can use as many ^ operators as you like, each operator will move one level up:

div+div>p>span+em^^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *

ul>li*5 ...outputs to

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grouping: ()

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

ID and CLASS

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Custom attributes

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

Note:
You can use single or double quotes for quoting attribute values. You don’t need to quote values if they don’t contain spaces: td[title=hello colspan=3] will work.

Item numbering: $

ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

You can use multiple $ in a row to pad number with zeroes:

ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Changing numbering base and direction With @ modifier, you can change numbering direction (ascending or descending) and base (e.g. start value).

For example, to change direction, add @- after $:

ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@3*5 …transforms to

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

You can use these modifiers together:

ul>li.item$@-3*5 …is transformed to

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

splits the selection into multiple selections

for CSS

p

padding: ;

p0

padding: 0;

m0+p0

margin: 0;
padding: 0;

tac

text-align: center;

bgc

background-color: #fff;

bgc#fcf

background-color: #fcf;

ff

font-family: ;

ffa

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

@i

@import url();

@f+

@font-face {
	font-family: 'FontName';
	src: url('FileName.eot');
	src: url('FileName.eot?#iefix') format('embedded-opentype'),
		 url('FileName.woff') format('woff'),
		 url('FileName.ttf') format('truetype'),
		 url('FileName.svg#FontName') format('svg');
	font-style: normal;
	font-weight: normal;
}

-transform

-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

-transition

-webkit-transition: ;
-o-transition: ;
transition: ;

-wmso-transition

-webkit-transition: ;
-moz-transition: ;
-ms-transition: ;
-o-transition: ;
transition: ;

for Snippets

go to Tools > Developers > New Snippet > 

Then

<snippet>
    <content><![CDATA[Type your snippet here]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>xyzzy</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.python</scope>
    <!-- Optional: Description to show in the menu -->
    <description>My Fancy Snippet</description>
</snippet>

credit

Safe Syntax
Safe Syntax - Youtube
G M Mostakim Billah Rasel - Youtube
mrliptontea

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

3 stars

Watchers

0 watching

Forks

4 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •