Sublime Text3 front-end essential plug-in

The following issublime introductionUsing tutorial column to introduce some essential Sublime Text3 front-end plug-ins. I hope it will be helpful to friends in need!

Install Package Control

Before installing the plug-in, you need to let sublime install Package Control. Open the Sublime Text console, use the shortcut key ctrl ~, and enter the following code in 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)

Install plug-in

emmet:

Front-end artifact. A toolbox component that can greatly improve the HTML and CSS work efficiency of web developers.

View introduction

CSS3:

CSS3 syntax highlighting and CSS syntax prompts. The only drawback is the lack of browser private attribute highlighting.

View the introduction

CSS Extended Completions:

Associate CSS files, intelligently prompt the class name in the css file, very easy to use.

View introduction

JavaScript Completions

Supports javascript native syntax prompts, and my mother no longer has to worry about me entering document.getElementById(id).

View introduction

jQuery

Provides sample code snippets for most of jQuery's methods, making jQuery's API easier to use.

View introduction

ColorHighlighter

It can display the color code you choose (like "#FFFFFF", "rgb(255,255,255)", "white")'s true color. It also includes a color picker so you can easily change colors.

View the introduction

BracketHighlighter

The brackets and label levels are displayed, so you don’t have to worry about which code block the selected code belongs to, it’s clear at a glance.

View introduction

HTML-CSS-JS Prettify

THML, CSS, JS code formatting, the compressed code can be restored through this tool .

View introduction

AlignTab

Use regular expressions to help code alignment, such as aligning several lines of code with = signs.

View introduction

The above plug-ins cover HTML, CSS, JavaScript, jQuery, CSS color display, code block-level highlighting, code formatting, code alignment, and are absolutely satisfactory. Most front-end needs.

As for using Sass, install Sass, Sassbuild, git and download sublimeGit and git Gutter. If you want to use a certain theme, download the theme. If you want to expand the sidebar, expand the sidebar. After all, this is not necessary for everyone. .

Here is another theme plug-in recommended. The theme library is relatively rich. I feel that most people can use it to avoid visual fatigue:

Colorsublime

After the installation is completed, you can enter Install Theme, change the theme online. There are hundreds of themes in the library, which is great.

View introduction

The above is the detailed content of Sublime Text3 front-end essential plug-in. For more information, please follow other related articles on the PHP Chinese website!