May 24, 2021 Sublime Text Use the manual
1) Open View-Show Console in Sublime, copy the following code into the input box, and press 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())
2) Verify that the installation was successful Open Preferences- and Package Control, and if you can see this menu, the installation is successful
HTML/CSS code is quick to write plug-ins
1) Open the console Open Preferences in Sublime, or press the shortcut ctrl-shift-p directly to select or search for Install Package
2) Install the Emmet plug-in Enter emmet in the input box, click on the plug-in that appears, the status bar below will show the installation status, and the installation will display the documentation when the installation is complete
3) Install PyV8 plug-in Under normal circumstances, when the Emmet plug-in is installed, the PyV8 plug-in is automatically downloaded and installed until the status bar does not move
4) Verify that the installation was successful, create a new .html file, type characters in the file!(note that it is an English symbol), and then press the "Tab" key, if html infrastructure appears, the installation is successful
The Emmet plug-in relies on the PyV8 plug-in, and if the automatic installation of the PyV8 plug-in fails, the PyV8 plug-in needs to be manually downloaded and installed
1) Download the PyV8 plug-in Open browser, enter: https://github.com/emmetio/pyv8-binaries, click the green button in the image below, and then click "Download ZIP"
2) Copy to Sublime to unzip the download file, and then find the pyv8-osx-p3.zip file, the same decompression, copy 2 of the files to the PyV8/osx-p3 directory, if there is other content in the folder, you can delete it all before pasting
3) After opening Sublime again, you need to wait for the installation to end (view the status bar, still), try again
Install the HTML5 plug-in in Sublime
Install the CSS3 plug-in in Sublime
Install the JavaScript Processs plug-in in Sublime
Install the jQuery plug-in in Sublime
Install the JsFormat plug-in in Sublime
HTML/CSS/JS code formats plug-ins
1) Install the HTML-CSS-JS Prettify plug-in in Sublime
2) It relies on .js, so you need to install .js to Node .js to download the corresponding version and install it
3) Confirm that .js installation path The right mouse button HTML/CSS/JS Prettify- and Set node Path specifies the installation path .js Node
4) Format code Right Mouse RIGHT HTML/CSS/JS Prettify
JSON code formats the plug-in
1) Install the Pretty JSON plug-in in Sublime
2) Custom shortcuts Open Preference -gt; Key Bindings-User, add formatted code shortcuts for ctrl-shift-f-keys: "ctrl-shift-f", "command": "pretty_json"
Automatic complement plug-ins for js libraries such as JavaScript, jQuery, Bootstrap, which are characterized by the ability to customize the configuration of libraries that require automatic replenishment.
1) Install the Better Process plug-in in Sublime
2) Configure libraries that need to be automatically replenished
Sidebar enhancement plug-in that specifies the browser used in the preview and sets shortcuts
1) Install the SideBarEnhances sidebar enhancement plug-in in Sublime
2) The browser specified for use Opens Preferences - Sett; Setts Bar - - Setts User, adds the following to the open file: "default_browser": "chrome" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
3) Open Preference for browser binding shortcuts - Package Settings - Side Bar - Key Bindings-User, add the following to the open file: "keys": ""alt-f12", "command": "side_bar_open_in_browser", so far, all settings have been completed, You can press the appropriate hotkey in the page to preview directly in the specified browser
LESS syntax height display and code hints
1) Install the LESS plug-in in Sublime
2) Just close and reopen the .less file
Compile Les, which is automatically compiled as a .css file
1) Install the Less2Ccss plug-in in Sublime
2) Depending on the environment, the configuration installation is also different, divided into windows environment and MacOS environment, specific reference: https://fdream.net/blog/article/783.aspx 2.1 in the windows environment, relying on .js-windows
2.1.1) Download the .js-windows-master .rar and unziw it to the local directory.
2.1.2) Add the directory path to the environment variable PATH, such as D:\open.js-windows:
2.1.3) Verify that the DOS command line was successfully turned on, enter lesc, and if prompted below, you will set 2.2 successfully in MacOS environment, relying on nodejs and lesc
2.2.1) Install npm: Download node-v6.9.5 directly on the official website.pkg and install npm automatically
2.2.2) Installlessc: perform sudo npm install less -gd at the terminal, and command lesc verification at the terminal after installation is complete
2.2.3) Installless-plugin-clean-css: perform sudo npm install less-plugin-clean-css -g at the terminal
2.2.4) Verify success
Make Sublime a static WEB server without having to start a heavy server like Tomcat or Apache alone
1) Install the SublimeServer plug-in in Subblime
2) After installation, click on the "Tools" - "Sublime Server" - "Settings" in the menu bar to view and modify Sublime Server's server ports, file extensions, and more
3) Click on Start SublimeServer to start the server
4) Right-click in the open .html file, select "View in SublimeServer" will automatically open the browser and access it through a Web server Note: SublimeServer requires your code folder to be added to the subblime Text project to access, step: Click "Items" in the menu bar - "Add folders to items".
Show the true color of the color code. A color selector is also available to easily change colors.
1) Install the Color Highlighter plug-in in Sublime
2) Modify the color display, the default is the underscore display, modify the fill display Open Preferences - Package Settings - Color Highlighter - Settings User, add the following contents to the open file . . . " ha_style": "filled", .
3) You will see the color code will display the corresponding color directly, and you can right-click "Choose color" to open the color selector, choose to change the color yourself
Smart tip.css the class name in the file and needs to be associated with adding a CSS file
1) Install the CSS Extended Processs plug-in in Sublime
2) Add the prompt file to the Cache cache Right-click the file in the sidebar and select "CSS Extended Completes" - "Add CSS Files To Cache" and so on
3) When .html style file .css the file, the style in the css file that was added earlier is automatically prompted when writing the style in the html page
Prompt the file path and enter the file name quickly
1) Install the AutoFileName plug-in in Subliime
2) Automatic prompts when entering the file path, such as path name, picture selection, etc
Produce beautiful comments
1) Install the DocBlockr plug-in in Sublime
2) Enter /or/, and then press enter, will automatically generate beautiful comments, if written on the function /, will also include parameters, return values and so on
The local Git change prompts that the Git state of the current row can be displayed at the beginning of the line, whether it is added, modified, or deleted
1) Install the GitGutter plug-in in Sublime
2) It is displayed when the current Git state changes with the state in the local repository
AngularJS prompt plug-in Install the AngularJS plug-in in Sublime
Highlight when editing markdown
1) Install the Markdown Editing plug-in in Sublime
2) Set the display style appearance, etc. Open Preferences - sgt; Package Settings - Markdown Editing - Markdown GFM Settings-User, add the following contents to the open file . . . / "color_scheme": "Packages/Markdown Mark Editing/MarkdownEditor-Dark.tmTheme," "color_scheme": "Packages/Markdown Editing/MarkdownEditor-Yellow.tmTheme," "draw_centered": false, // default to true, centered, set to false, left aligned "wrap_width": 120, // Maximum number of characters per line" highlight_line": true, // Current line highlights . . . Note: More configurations can refer to Markdown GFM Settings-Default
Preview the generated HTML file in the browser
1) Install the Markdown Preview plug-in in Sublime
2) Open Preference for browser binding shortcuts - Key Bindings-User, add the following contents to the open file: "keys": "alt-f11", "command": "markdown_preview", "args": "target": "browser", all settings have been completed, edit the md file and press the appropriate hotkey, Preview directly in the specified browser
Open the terminal in the current position
1) Install the Terminal plug-in in Sublime
2) Use method To right-click the file in the sidebar on the left and select Open Terminal Here
Run debugging directly in Sublime (this plug-in is installed in a special way and cannot be installed directly through Package Console)
1）git clone https://github.com/tanepiper/SublimeText-Nodejs.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Nodejs
2) Configuration When nodejs is installed, then go to Perferences -gt; Browse Packages -gt; Nodejs open the Nodejs.sublime-build file and change the contents of osx to "cmd": "killall node; / usr/local/bin/node $file") open the Nodejs.sublime-settings file and change the node_command content to /usr/local/bin/node, npm_command content to/usr/local/bin/npm
3) Run node.js run directly through the shortcut command and b to display debugging results (this plug-in is installed in a special way and cannot be installed directly through Package)
Solve the problem that Sublime does not support GBK, GB2312 encoding, and open GBK encoded files Install the ConvertToUTF8 plug-in in Sublime
Automatic conversion of the px value of CSS to the rem value (this plug-in is installed in a special way and cannot be installed directly through Package Console)
1）git clone https://github.com/hyb628/cssrem.git
2) Go to the packages directory: Sublime Text - Preferences - Browse Packages
3) Copy the clone downloaded cssrem-master directory to the Packges directory that was opened the next step
4) Modify the default configuration Open the cssrem.sublime-settings file in the cssrem-master directory, and modify the maximum length of the small part of the cssrem-sublime-sets, "px_to_rem": 40, //px to rem, the default to 40, and generally to 100 "max_rem_fraction_length": 6, //px to rem. T he default is 6. " available_file_types": ".css," ".less," ".sass," ".html" / // Enable the file type of this plug-in. T he default is: ".css," ".less," ".sass" . . .
5) Restart Sublime Text