Shulou(Shulou.com)06/01 Report--

What are the Sublime Text 3 plug-ins commonly used by developers? in response to this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a simpler and easier way.

1. Download Sublime Text 3 on the official website (if you already have an installation package, please ignore it)

Download address of Sublime Text official website: http://www.sublimetext.com/

2. Open Sublime Text 3-> help-- > Enter License

3. Baidu registration code! Here is a

TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 A37081C5 D0316412 4584D13694D7F7D4 95BC8C1C 527DA828 560BB037D1EDDD8C AE7B379F 50C9D69D B35179EF2FE898C4 8E4277A8 555CE714 E1FB0E43D5D52613 C3D12E98 BC49967F 7652EED29D2D2E61 67610860 6D338B72 5CF95C69E36B85CC 84991F19 7575D828 470A92AB

4. How to install the Sublime Text 3 plug-in:

Direct installation:

It is convenient to install the Sublime text 2 plug-in, and you can download the installation package directly and extract it to the Packages directory (menu-> preferences- > packages).

Install using Package Control components:

You can also install the package control component, and then install it directly online: press Ctrl+ `to call up console (Note: there will be conflicts with this shortcut key with QQ Input installed, input method property settings-input method management-cancel hotkey to switch to QQ Pinyin)

Paste the following code to the command line at the bottom and enter:

`

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 ())

`

If all goes well, you can now see the Package Settings and Package Control menus under the Preferences menu.

By the way, post the code of Sublime Text 2:

> import urllib2,os; pf='Package Control.sublime-package'; ipp = > sublime.installed_packages_path (); os.makedirs (ipp) if not > os.path.exists (ipp) else None; urllib2.install_opener (> urllib2.build_opener (urllib2.ProxyHandler (); open (os.path.join (> ipp, pf), 'wb'). Write (urllib2.urlopen (' http://sublime.wbond.net/'> + pf.replace (','% 20')). Read () Print ('Please restart Sublime Text to finish installation')

Manual installation

You cannot install using code for a variety of reasons, so you can install Package Control manually by following these steps:

1. Click Preferences > Browse Packages menu

two。 Enter the upper directory of the open directory, and then enter the Installed Packages/ directory

3. Download Package Control.sublime-package and copy it to the Installed Packages/ directory

4. Restart Sublime Text 3.

How to install the plug-in with Package Control:

1. Press Ctrl+Shift+P to bring up the command panel

Enter install to call up the Install Package option and enter, and then select the plug-in to install in the list.

(Preferences-- > Package Control-- > install package-- > enter the plug-in name (package name)

Unfortunately, some network environments may not allow access to unfamiliar network environments to set up a firewall, while Sublime Text 2 seems to be unable to set up a proxy, so it may not be able to get a list of installation packages. Anyway, I haven't used Sublime Text 3 yet, so I personally recommend using Sublime Text 3.

OK, the method is over, here is the main topic of this article, some commonly used Sublime Text 3 plug-ins for development:

Emmet

The predecessor of Emmet is the famous Zen coding, and if you are engaged in Web front-end development, you will be familiar with this plug-in. It uses the syntax of imitating CSS selector to generate code, which greatly improves the speed of HTML/CSS code writing. Students who don't know ZenCoding are strongly recommended to take a look: "ZenCoding: a way to quickly write HTML/CSS code."

PS: the developers of the Zen Coding for Sublime Text 2 plug-in have stopped sharing on Github and now have to install it through Package Control.

SublimeCodeIntel

Code autohint, a full-featured Sublime Text code completion engine that supports many languages (JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.)

Alignment

Used for automatic alignment of code formats, equal sign alignment (Ctrl+Alt+A). Sublime Text 3 has been integrated. You only need to install it through Package Control.

The shortcut key will conflict and re-configure the shortcut key ctrl+alt+f in Alignment > Key Bindings-User

SublimeLinter

Code verification plug-in, support for multiple languages, this is the main plug-in, if you want to detect specific files need to be downloaded separately, a plug-in that supports linter syntax, you can highlight lines of code that linter thinks are wrong, and also supports highlighting some special comments, such as "TODO", so that it can be quickly located.

SideBarEnhancements

Sidebar right-click plug-in to improve page processing speed and enhance the right-click menu file operation function.

All Autocomplete

Sublime Text's default Autocomplete feature only considers current files, while the All Autocomplete plug-in searches all open files for matching prompts.

AutoFileName

Automatically prompt the path plug-in, quickly help you write the path in the file, the overall plug-in is not bad.

HTML5

Sublime Text 3 supports HTML5

Sass

Sublime Text 3 supports Sass

Less

Sublime Text 3 supports Less

SublimeTmpl

Use: menu bar, File-New File (SublimeTmpl), select the corresponding menu in the list, you can directly use the template to create a new file.

Default shortcut key: ctrl+alt+h-- > html

Ctrl+alt+j-- > javascript

Ctrl+alt+c-- > css

Ctrl+alt+p-- > php

Ctrl+alt+r-- > ruby

Ctrl+alt++shift+p-- > python

Turn off the default shortcut key: Package Settings > SublimeTmpl > Settings-User, and add disabled_keymap_actions configuration: "disabled_keymap_actions": "html, css" / / turn off the shortcut key for html/css syntax (separated by multiple commas) "disabled_keymap_actions:" all "/ / close all syntax shortcuts

BracketHighlighter

The highlight setting of the configuration file allows your code to distinguish between different colors. The plug-in provides pairing tags, or pair highlighting of curly braces or character quotes, which can be regarded as an enhancement to the system highlight. Similar to code matching, you can match the range within parentheses, quotation marks, and other symbols. Match enhancements in pairs and modify the color of parentheses, etc.

JQuery

Sublime Text 3 supports jQuery, which is a must if you can't live without jQuery

DocBlockr

Quick comments, DocBlockr is easy to use, not only can automatically generate comments, but also can manually edit the format of comments.

DocBlockr custom configuration: Preference-> Package Settings-> DocBlockr-> Settings-User

Configure to the following:

{

"jsdocs_extra_tags": [

"@ Author Hybrid"

"@ DateTime `date`"

"@ copyright ${1: [copyright]}"

"@ license ${1: [license]}"

"@ version ${1: [version]}"

]

"jsdocs_function_description": false

}

DetectSyntax

This is a syntax recognition, code detection plug-in.

Autoprefixer

This plug-in mainly uses css browser compatible writing, automatically analyzes your css files, parses out new css files, and can configure your compatible browser, but this plug-in needs to install nodejs before.

BufferScroll

You can easily write a file in multiple locations, and you can use this later when you need multiple files to change the same code together to increase the rate of writing code.

ChineseLocalizations

Language packs from all countries are available. Chinese Sublime Text 3

Color Highlighter

Color function, indicating what color it is currently. Will be shown directly in the code.

ColorPicker

Color palette, color acquisition.

JsFormat

Js serialization plug-in

CSS Format

Css serialization plug-in, supports a variety of default sequence schemes, but also can be customized configuration.

CSS3

Css3 language prompt plug-in

HTML-CSS-JS Prettify

Universal serialization

JavaScript Completions

The most basic api snippet of js

Keymaps

Quickly find shortcut keys for all plug-ins

LiveStyle

LiveStyle is a CSS editor plug-in to improve development efficiency in Chrome.

Placeholders

Therefore, the name Siyi, placeholder use, including some placeholder text and HTML code fragments, practical.

Clipboard History

Pasteboard history, easy to use copy / cut content.

Nettuts Fetch

Nettuts Fetch allows you to set up a list of files that need to be synchronized and then save updates.

JsMinifier

The plug-in is based on Google Closure compiler and automatically compresses js files.

CSScomb

Sort by CSS attribute

YUI Compressor

Compress JS and CSS files

Hex to HSL

Automatically convert color values from hexadecimal to HSL format, shortcut key Ctrl+Shift+U

ConvertToUTF8

Convert the file encoding from GBK to UTF8,UTF8.

Git

The plug-in basically implements all the functions of git. Provides a collection of commands commonly used in Git.

Can I Use

You can adjust directly to caniuse to see the browser support for the current property.

InsertDate

Insert time, when the project file exists in CDN, you need to change the timestamp to see the effect, which is a good thing.

FileDiffs

Finding documents is different

5. Create a new Sublime Text 3 project:

Create a new folder in the directory you need

-- drag into Sublime Text 3

-- New file ctrl+n input file name-- ctrl+s saves the file

6. Install Sublime Server

Use sublime server to start the local server for debugging

-- Open Package Control, select install package, and search sublime server for installation

-- use the sublime server plug-in: Tools-- > start sublime server

In the page file you need to browse, right mouse button, View in sublime server

The answers to the questions about the Sublime Text 3 plug-ins commonly used by developers are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.