Sublime Text 3 (ST3) is the latest version of one of the most commonly used plain text editors by web developers, coders, and programmers. It’s available for Mac, Windows, and Linux, and free to download and use.
- Using Sublime Text Html
- How To Install Sublime Text
- Sublime Text Html Shortcut
- How To Use Sublime Text For Html
This is a Sublime Text 2 and 3 plugin allowing you to format your HTML, CSS, JavaScript and JSON code. It uses a set of nice beautifier scripts made by Einar Lielmanis. The formatters are written in JavaScript, so you'll need something (node.js) to interpret JavaScript code outside the browser. Install HTML Boilerplate in Sublime Text 3.0 2018-05-11 by Gergely Gy. If you would like to make your life easier when working with HTML I am definitely suggesting to use HTML Boilerplate. You can either create the files using sublime Text (File - New) or drag and drop already created files or folders on to the editor workspace. You might want to speedup your development process by installing plugins for the various languages. Emmet plugin for HTML and CSS code snippets.
Make the most of ST3 with the 25 tips and tricks in this ultimate guide for web developers. Learn not only how to use Sublime Text 3, but also about must-have packages, useful keyboard shortcuts, and more.
1. User Preference Settings
By default, ST3 uses hard-tabs that are 4 characters long. This can result in hard-to-read code, as large tabular indents push your work to the right. I recommend all developers add this to their user settings (
Sublime Text 3 => Preferences => Settings – User
):This setting converts hard-tabs to spaces, makes indents only two characters long, puts a ruler at the 80 character mark (to remind you to keep your code concise), and adds white space markers. Here is a complete list of preference options if you wish to continue customizing your ST3 environment.
2. Command Palette
ST3’s command palette will let you run toolbar actions (e.g. setting the code syntax for an opened file) without having to lift a finger from the keyboard. Although the command palette can be opened with a mouse through
Tool => Command Palette
, the best way to get the Command Palette prompt is to use the keyboard shortcut CTRL/⌘-SHIFT-P
.Screenshot of the Command Palette in Sublime Text 3
3. Column and Row Workspace Panes
Are you more a productive coder with multiple files open? ST3, like any good text editor, allows you to see open files side by side, so that you won’t be switching back and forth between an HTML file and its CSS document:
To view two column (vertical) panes side-by-side use the shortcut
ALT-UP-2
(PC) or OPTION-⌘-2
(Mac). Replace the last stroke with “3” or “4” to view three or four panes respectively. Using “5” produces a 4 pane grid.To view two row (horizontal) panes side-by-side use the shortcut
SHIFT-ALT-UP-2
(PC) or SHIFT-OPTION-⌘-2
(Mac). Replace the last stroke with “3” to view three panes respectively.1491 charles mann pdf. A column split in half using ST3’s Group feature
If you want to split a pane further, you can use ST3’s “Group” feature. Use
CTRL-K, SHIFT-CTRL-UP
(PC) or ⌘-K, SHIFT-⌘-UP
(Mac) to create a new group inside a pane.![For For](https://static.makeuseof.com/wp-content/uploads/2014/04/sublime-emmet-2.png)
4. Package Control
ST3 comes with a lot of features out of the box, but you can extend its functionality further with “packages”—plugins written by the greater ST3 community. The easiest way to install these packages is to use Package Control. To install Package Control on ST3, follow the installation instructions on Package Control’s website.
If Package Control installed successfully, then you should be able to search for Package Control actions in the Command Palette (
CTRL/⌘-SHIFT-P
):Accessing Package Control from the Command Palette
Must-Have Sublime Text 3 Packages
Note: Install these packages through Package Control by opening up the Command Pallette (CTRL/⌘-SHIFT-P), selecting “Package Control: Install Package”, and searching for the package by its name.
5. Sidebar Enhancements
Sidebar Enhancements extends the functionality of ST3’s sidebar by allowing you to run actions on files and folders not normally available. You’ll also be able to run these actions from the Command Palette with this package.
Extended functionality with Sidebar Enhancement
6. Emmet
Emmet makes coding HTML much easier by using shortcuts based on CSS selectors. What does that mean? See for yourself in the GIF below:
Emmet doesn’t stop with HTML tags, classes, and IDs. Lorem ipsum text is something web developers use a lot. Often they’ll head off to a lorem ipsum generator, but with Emmet, just type
lorem
and hit tab. Want a certain number of filler words (such as 100 words of lorem ipsum)? Use lorem100
instead.Using Sublime Text Html
Emmet also extends to CSS. For example, CSS vendor prefixes are always a pain, so Emmet lets you use the shorthand
-bdrs
to set a border radius:7. Git
The Git package lets you run Git commands (e.g. “Git Diff” or “Git Blame”) straight from ST3’s Command Palette.
Not sure what Git is, or how to use it? Check out General Assembly’s
Getting Started with Git and Github introductory video.
Getting Started with Git and Github introductory video.
How To Install Sublime Text
8. GitGutter
GitGutter shows uncommitted additions, changes, and deletions next to ST3’s line numbers:
9. SASS
ST3 doesn’t come with native SASS syntax and snippet support, but the ST3 package “SASS” adds it in. Highly recommended for advanced front-end developers and Ruby on Rails programmers:
10. Better CoffeeScript
There also isn’t syntax and snippet support for CoffeeScript in ST3, so this package fills in that gap:
11. OSX Command Line Users
If you use a Mac and the terminal, Sublime text editor also includes a command line tool
subl
that will allow you to open the text editor directly from the terminal. Run the following command in your terminal to set up this shortcut:If you use Homebrew or
/usr/local/bin
is in your $PATH, the command to run is:Keyboard Shortcuts
Learning ST3’s keyboard shortcuts in and out will take you from a Sublime user to a Sublime expert. Here are some favorites:
12. Multiple Cursors
Multiple cursors are a killer feature of Sublime Text. It allows you to type in multiple places at the same time, saving you development time. To trigger multiple cursors, put your cursor on the word you want highlighted and hit
CTRL/⌘-D
till you have selected all the words you want. You can also create multiple cursors with CTRL/⌘-MOUSECLICK
in all the places you want to have a cursor.13. Goto Anything
Similar to the command palette, ST3 has the Goto Anything feature (pronounced “go to”) that can take you to a specific file, line, or method definition. Bring up Goto Anything’s search bar with
CTRL/⌘-P
. To switch between files, start typing the file’s name. Since its a fuzzy search, the search query doesn’t have to match the name exactly and you don’t have to type the whole file path:14. Goto Line in File
Goto Anything doesn’t just take you to a file, it can also bring you to a specific line within a file. If you want to go to a line in a new file, just bring up Goto Anything and type a colon followed by the line number (e.g.
:18
for line 18). To go to a line in another file, type the file name and then a colon and the line number:15. Goto Definition in File
If you want to go to a class, method, or function definition in a file, Goto Anything has a similar syntax as going to a line. Instead of colon, Goto Definition uses a
@
. You’ll get a list of all of the definitions in your chosen file and typing the name of one and hitting ENTER will take you to the given definition:16. Distraction Free Mode
Sometimes being the most productive coder or front end developer means removing all distractions. No other applications, windows, tabs, sidebars, and menus. Sublime text editor offers an easy way to do this through its Distraction Free Mode. Trigger it using
SHIFT-F11
(PC) or ⌘-CTRL-SHIFT-F
(Mac):17. Hide/Show the Sidebar
The sidebar is useful for showing your files and directory structure, but sometimes you need a little more window space to code. Using the keyboard shortcut
CTRL/⌘-K, CTRL/⌘-B
(in this order) will toggle the sidebar. Remember a sidebar will only be viewable if you have multiple files or a folder open.18. Quickly Comment Your Code
![Sublime text html shortcut Sublime text html shortcut](https://d33wubrfki0l68.cloudfront.net/30fa1011f9f1b1bd28d048c65bd282b448a8a4bb/ae7b6/assets/images/writing-in-sublime-text/preview.png)
This is a useful tip if you’re constantly commenting your code or for temporarily testing how disabling a block of code affects your project. To comment code quickly in ST3, highlight the code and use
CTRL/⌘-/
. If you don’t highlight any code, using this shortcut will comment out the entire line.Selecting Text
We’ve already seen how to select a word (
CTRL/⌘-D
) but there are a handful of other useful selection options in ST3.19. Selecting an Entire Line
To select the entire current line:
CTRL/⌘-L
.20. Selecting Code that is Similarly Indented
Portfolio lighting manuals. To select all code that shares immediate indentation:
CTRL/⌘-SHIFT-J
.21. Selecting Everything Inside an HTML Tag
Sublime Text Html Shortcut
To select everything inside the current HTML tag:
CTRL/⌘-SHIFT-A
22. Indent Quickly
Developers know the importance of indentation because it keeps your code legible and easier to understand. If you want to increase the current line’s indent, use
CTRL/⌘-]
. Decreasing the indent uses the other square bracket key (CTRL/⌘-[
).23. Pasting with Indentation
When you copy/cut indented code and want to have the indentation level maintained when pasting, use
CTRL/⌘-Shift-V
to paste with indentation.24. Switching Lines
Have you ever written code, only to realize that certain lines are out of order? ST3 has a time-saving shortcut that lets you move a given line up or down in a document.
CTRL-SHIFT-UP
(PC) or CTRL-⌘-UP
(Mac) moves a line up, while CTRL-SHIFT-DOWN
(PC) or CTRL-⌘-DOWN
(Mac) moves a line down.25. Deleting Lines
For the times when a line of code isn’t out of order, but needs to simply be removed, ST3 has handy shortcut for deleting lines without having to select the entire line.
CTRL-SHIFT-K
(PC and Mac) will delete the current line your cursor is on.--
Now that you’ve mastered Sublime Text 3, you can focus on writing great code and becoming a better front end developer. Continue learning with online video classes taught by expert practitioners on topics in coding, business, and design.
Get started in web development with our Software Engineering Immersive course.
Now that you’ve mastered Sublime Text 3, you can focus on writing great code and becoming a better front end developer. Continue learning with online video classes taught by expert practitioners on topics in coding, business, and design.
Get started in web development with our Software Engineering Immersive course.
Sign up to get GA articles, upcoming events and more.
As a web developer, we always try to increase the productivity and keep searching tool that helps us in it.
If you are one of them who write a lot of HTML and CSS then this post is for you.
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called snippets. While snippets are a good way to boost your productivity. All implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
All implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.
Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS but can be used with programming languages too.
In this article, we will learn some cool tips to write HTML with amazing speed using Emmet.
Here in this tutorial, I am using Sublime as a Text Editor, But Emmet is also available for many other editions like Adobe DreamWeaver, TextMate, Eclipse, and Notepad++.
Installing Emmet
You can download Emmet from here. If you are using Sublime text like me you can install is directly from Sublime package Installer.
To install any Sublime package you need to install Package Installer. For installing go to Tools ->Install Package Control and click on it and it will be installed automatically. When you are done with installing package control again go to Tools-> command palette and search for Install Package.
When you click on Install Package you will see some processing at bottom of your Sublime window and a search popup will be opened.
When you click on Install Package you will see some processing at bottom of your Sublime window and a search popup will be opened.
You can search for any Sublime plugin here. Search for “Emmet” and click on it to install it.
NOTE- In below examples Tab key is used to expand the tags. Most of the text editors have the same built-in functionality.
1. Basic HTML Document
What you do if you start creating any HTML project. You write HTML document code itself or copy it from anywhere. But Emmet provides the facility for generating basic HTML document structure easily.
You can generate by simply typing !(exclamation)+Tab or doc+Tab or HTML:4t+Tab and HTML doc will be in front of you
2. Writing Simple HTML tag
To write simple HTML, for example, for a div tag we just type div and hit Tab key. It can be used to create any tag.
3. Assign attribute to an Element
We can assign any attribute like class, id, src etc. using Emmet-
If we want to assign just Id or class we can use # or . as we use in CSS.
As you see that if you just type #firstdiv by default div element will be created. If you want to specify an element you can type section#firstelement
But if you want to assign any other attribute you can specify easily in [] brackets. Suppose we want to assign src attribute to an img tag we can write
4. Creating Sibling Element
Sibling refers to the element at the same nesting level. If you want to create siblings or parallel element you can simply add + between elements.
5. Creating Child Element/Nesting
Emmet uses the syntax similar to CSS, as we can select child element in CSS with the > sign. In Emmet, we use the same syntax to create child element.
6. Grouping
If you want multiple elements inside an element you can achieve it by grouping them with ().
7. Multiplication
How To Use Sublime Text For Html
If you want to repeat the same element a number of times this will help you. We can generate multiple elements with an asterisk * sign.
Suppose we want to create 6 div with class=”main” we just simply type- .main*6
8. Automatic Numbering
Automatic numbering will help you to easily write different name with auto incremental number. The right syntax for this feature is a dollar $ sign.
Also Read:
9. Dummy text
If you use dummy text by copying from lorem or lipsum or from somewhere else you don’t need to do that if you have Emmet. Emmet can generate lorem ipsum dummy text for you. we simply write lorem. It will generate a 5 to 7 line of Ipsum text.
In Emmet, we can specify how many words to generate. Say, 7 then type lorem7
10. Link shortcut
If you have a favicon, rss or external CSS file you want to add to your document, you can use link tricks for writing them faster.
- To insert css- link:css
- To insert favicon- link:favicon
Conclusion
Emmet is a really brilliant tool to gain productivity for a web developer. You may face some difficulty in starting but once you pick it up it can significantly boost your productivity. You will be able to write HTML and CSS faster than ever before.