Download and install Sublime Text

Sublime Text download page. Windows systems have a portable version for convenient use on the go.

This is a screenshot taken from the official website: the default UI on OS X; other platforms are similar.

Installing Package Control

After clicking View -> Show Console in the Sublime Text menu bar, you can see the console.

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Commonly Used Shortcuts

Key Symbol Explanation

• ⌘ : Command key
• ⌃ : Control key
• ⌫ : Delete key
• ↓ : Down arrow key
• ⌥ : Option or Alt key
• ↩ : Return or Enter key
• ⇧ : Shift key
• ↑ : Up arrow key

Install packages

Feature Enhancement

• AdvancedNewFile
  This plugin makes it very convenient to create new files. Just press super+alt+n to see the prompt for creating a new file.

  It is worth noting that if the folder path you type does not itself exist, AdvancedNewFile will automatically create the folder for you, which is very convenient. This way, you don't have to create the folder first and then create the file, and you don't need to use the mouse to complete this action either—everything can be done without taking your hands off the keyboard.

  
• Alignment
  Alignment lets you align code very conveniently, making your code look cleaner, especially when you have a bunch of variable declarations, the code according to = alignment, this is a great visual effect:

  
• BracketHighlighterBracketHighlighter can highlight the brackets in the current scope (including curly braces, square brackets, etc.), letting you know where the start and end of the current region are.
  
• DocBlockr
  This is a powerful tool for writing comments, making it very convenient to generate comments for functions and variables. You can find detailed usage instructions on the official website.
• Emmet
  I guess the vast majority of front-end developers are no strangers to Emmet, or rather to ZenCoding. Emmet's predecessor is ZenCoding, which improved front-end developers' efficiency by N times when writing HTML documents, making writing HTML no longer a painful process. For example, write the following in HTML:ul>(li>a>(i+span))*10 Then press the Tab key to generate the following code:

<ul><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li></ul

• EditorConfig
  This plugin allows Sublime Text to support EditorConfig. EditorConfig is a configuration file format that lets you define coding styles, so your code can maintain a consistent style even when edited on different platforms or in different editors, without having to configure the relevant coding style for each editor.
• LiveReload
  LiveReload is a plugin that can monitor file changes and automatically refresh pages; it is also a powerful tool for front-end development. Once you use it, you no longer have to press F5 to refresh the browser while editing code.

  This plugin is more commonly used for smaller demo pages, because for larger projects people usually use BrowserSync to achieve live reloading with this kind of tool.
• SidebarEnhancements
  This is a plugin that enhances the Sidebar functionality of Sublime Text. The native Sidebar is very limited in file management, while this plugin greatly expands the file management capabilities of the left Sidebar. Right-click a file or folder to see the following menu:

  
• Markdown Preview
  A Markdown tool that helps you automatically generate Markdown previews and HTML, among other features. There are two styles of Markdown preview: one built into the plugin, and the other is GFM, which is GitHub Flavored Markdown.。

  Note that GFM directly calls the GitHub API to dynamically generate Markdown previews, so using GFM involves a request process. This request process can cause Sublime Text to become unresponsive. Therefore, I generally use the preview style built into the plugin. This plugin provides a very practical feature for people who frequently write Markdown. Combined with MarkdownEditing With this plugin, Sublime Text basically becomes an excellent Markdown editor.

  
• SublimeLinter
  This is a code linting framework. It is only a framework itself; you need to additionally install a Linter for a specific language to enable code linting. For example, after installing Eslint, if your project has an Eslint configuration file, Sublime Text will display the corresponding code linting hints to the left of the code.

  

  SublimeLinter displays error or warning messages to the left of the code, and then displays the error or warning messages for the current cursor line in the status bar at the bottom of the editor.

  This plugin is very useful for controlling programming code style. It can intuitively show you where there are problems in your code and where changes are needed (of course, these hints are based on your linter configuration; different configurations will produce different hint results).
• Terminal
  A small plugin that can invoke Terminal directly inside Sublime Text, and by default enters the current project's directory. This is also a very practical plugin, because when writing code, you often find yourself opening the terminal after writing a piece of code to run some commands, such as running tests or executing a script.

  Therefore, with this plugin, even if you need to open a terminal while writing code, you don't have to take your hands off the keyboard, improving work efficiency.
• GitSavvy
  A very handy Git tool that lets you perform Git operations very conveniently and very simply. Basically, common commands can all be executed through this plugin. What's even better is that you don't have to leave the keyboard during the entire process! When you open GitSavvy's interface, you can execute various Git commands by pressing different keys.

  By now, you should be able to see that an efficient coding workflow should keep both hands focused on the keyboard as much as possible, rather than reaching for the mouse from time to time to perform very basic but also tedious tasks.

  
• GitGutter
  This is also a Git-related plugin that can display changes to the current file in real time. It is also a very practical plugin.

  

Snippet Enhancement Category

• AngularJS
• Bootstrap 3 Snippets
• HTML5
• All autocomplete
  This plugin deserves special mention. It makes Sublime Text's autocomplete more powerful. It can match variable names or keywords from the currently open file, so when you are writing code, the autocomplete list will be much richer than before, making coding more convenient!

Syntax Support Enhancement Category

• Handlebars
• Jade
• Less
• Sass
• Babel
• MarkdownEditing

Theme Category

• Material Theme
  

  

  
• Theme-Spacegray
  

  

  
• Seti_UI
  
• Theme Primer
  

  

Reference Configuration

{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"ensure_newline_at_eof_on_save": true,
	"folder_exclude_patterns":
	[
		"node_modules",
		".git",
		".sass-cache",
		".idea"
	],
	"font_face": "Monaco",
	"font_size": 12,
	"highlight_line": true,
	"ignored_packages":
	[
		"Markdown",
		"Vintage"
	],
	"install_prereleases":
	[
		"SublimeCodeIntel"
	],
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"overlay_scroll_bars": "enabled",
	"rulers":
	[
		80
	],
	"translate_tabs_to_spaces": true,
	"theme": "Material-Theme.sublime-theme",
	"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}