Recommended plugins for Sublime Text 3 Web front-end
1.1 Common plug-ins for Web front-end
1.1.1 The html5
function
of plug-ins: plug-in packages that support the hmtl5 specification.
Use: create a
new html document > enter html5 > hit the Tab key > auto-completion of the html5 specification document.
Note: Works better with the Emmet plugin.
1.1.2 jQuery
function of plug-in:
a plug-in package that supports the JQuery specification.
1.1.3 HTML-CSS-JS Prettify plugin
function:
HTML, CSS, JS formatting.
Installation:
Node.js must be installed before installing this package, and specify the location of the executable file of node.exe. Then install HTML-CSS-JS Prettify.
Method 1:
View -> Showconsole or use the shortcut key (Ctrl + `), enter: view.run_command("htmlprettify") in the command line, and then press Enter.
Method 2: Default shortcut key: Ctrl+Shift+H.
Set shortcut keys by yourself, add in the menu "Preferences--->Key Bindings – User": { "keys":["ctrl+shift+o"],"command":"htmlprettify" } Save when done.
1.1.4 Plug-in Emmet
Features:
Emmet (formerly Zen Coding) is an indispensable plugin for front-end development, it makes writing HTML and CSS code easy and saves a lot of time. Emmet enables developers to write code in abbreviated form, and then use the "Extend" function to automatically expand the code to the full style.
Use:
Default shortcut key Tab. Cheat Sheet: https://docs.emmet.io/cheat-sheet/
Note: The Emmet plug-in requires the support of the PyV8 plug-in, so when installing Emmet, the PyV8 plug-in will be installed automatically. It is possible that Sublime Text 2 and 3 are prone to this problem because PyV8 is not fully installed. It can be removed and the PyV8 plugin downloaded and installed manually.
1.1.5 SublimeCodeIntel
function of plug-in:
SublimeCodeIntel, as a code hint and completion plug-in, supports 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 and other languages are a better extension of Sublime Text's built-in code prompt function. The built-in code prompt function can only prompt system codes, while SublimeCodeIntel can prompt the user to customize the code. SublimeCodeIntel supports the function of jumping to variable and function definitions, as well as the function of automatic completion, which is very convenient.
1.1.6 LiveReload of Plug-ins
1. Overview
LiveReload is a plugin that can refresh the page in real time in the browser, so that you can see the effect immediately after saving.
2. Installation
Step 1:
Install the LiveReload plugin in the Sublime Text 3 editor. Install through Package Control: Install Package.
Step 2: Install the LiveReload plugin in the Chrome browser.
3. After the LiveReload plug-in configuration of Chrome
is installed on chrome, you can see the following button next to the address bar: (Hollow, indicating that monitoring is not enabled).
Then right-click and select Manage Extensions, and check the option to allow access to URL files, as shown in the following figure:
4. Sublime's LiveReload plug-in configuration
Method 1: Enable it through user-defined configuration.
Preferences > Package Settings > LiveReload > Settings User
{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}
Method 2: Enable via console command.
Ctrl+Shift+P>LiveReload: Enable/disableplugins>Enable - Simple Reload
5. chrome's LiveReload enables monitoring
Open a static HTML file and click the LiveReload button next to the browser's address bar to make the button solid (solid, which means listening has started).
1.1.7 SublimeTmpl
function of plug-in:
Quickly generate file template.
Use:
The default shortcut keys of SublimeTmpl are as follows, if the shortcut key settings conflict, it may be invalid.
Ctrl+Alt+h New html file
Ctrl+Alt+j New javascript file
Ctrl+Alt+c New css file
Ctrl+Alt+p New PHP file
Ctrl+Alt+r New ruby file
Ctrl+Alt+Shift+p New Python file
1.1.8 Theme-Soda
feature of plugin:
One of the most popular Sublime Text themes.
Installation configuration:
After the installation is complete, click the menu Preferences--->Settings - User, and add the following code according to the desired theme effect.
Soda light theme please add: {"soda_classic_tabs": true,"theme": "Soda Light3.sublime-theme"}
Soda dark theme please add: {"soda_classic_tabs": true,"theme": "Soda Dark3.sublime-theme "}
After saving, it is found that the code area is still black background, and the menu bar color has been switched, this is because the color scheme is not configured. Its download address: http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip.
Color scheme configuration:
Put the two configuration files in the download folder [one dark and one light] into the Packages/User folder, and then select the corresponding color theme in Preferences -> Color Scheme -> User.
1.1.8 SideBarEnhancements
function of the plug-in: the function of
expanding the sidebar menu.
Introduction:
SideBarEnhancements is a very useful right-click menu enhancement plug-in. It can display unsaved changes in the form of diff, display the file in the file manager, copy the file path, locate the file in the sidebar and other functions. It also has basic functions. Common functions such as new file/directory, edit, open/run, display, find in selected/upper directory/project, cut, copy, paste, rename, delete, refresh, etc.
Another function of SideBarEnhancements is to customize the program for opening files. Right-click a file (folder) in the sidebar and select Open With -> Edit Applications to modify the association. The configuration file comes with an example, which can be easily applied .
1.1.9 The autofilename
function of the plug-in:
intelligent prompt for file path.
1.2 Plug-in viewing/deleting/updating
1.2.1 Plug-in viewing
shortcut Ctrl+Shift+P, enter "list" in the dialog box, and select "Package Control: List Packages". All installed plugins are listed. This makes it easy to see which plugins have been installed.
1.2.2 Plug-in removal
Sometimes it is necessary to remove unnecessary plug-ins. The specific operations are as follows: shortcut key Ctrl+Shift+P, enter "remove" in the dialog box, select "Package Control: Remove Packages", and then select the plug-in that appears. Just click on the plugin you want to remove from the list.
1.2.3 Plug-in update
Sometimes you need to update the plug-in, the specific operation is as follows: shortcut key Ctrl+Shift+P, enter "upgrade" in the dialog box, and
select "Package Control: Upgrade Packages" to update the plug-in.