Google Browser Web development tutorial start: Using Sublime

Your code Editor is the main development tool; You use it to edit and save code Snippets. You can write code quickly and easily by learning the editor shortcuts and installing key plugins .

Directory

1. Installing the Sublime Text editor
2. Why use Package Manager?
3. Installing plugins

Summary

• Choose an editor, customize the shortcut keys, and install the plugin to help you write better code.
• Make it easier to discover, install, and update plug-ins with the package Manager.
• Installing plug-ins helps improve the efficiency of your editing code, starting with the recommended plugins in this guide.

Installing the Sublime Editor

Sublime is a great editor with lots of powerful, customizable features that add to the fun of writing your code. You can install a Package manager, which makes it easy to install plugins and add new features.

There are now two versions available for you to use, version 2 or version 3. Version 3 is fairly stable and can provide a lot of software packages that are not available in version 2, but you will find that version 2 is more reliable.

Note:

• Carrot Hudson's blog will show you how to get and fall in love with the sublime editor, which gives a lot of common function references. These references are related to any editor, not just sublime.

Why use Package Manager?

Make it easier to discover, install, and update plug-ins with the package Manager.

You can install sublime Package Manager through the following guide https://sublime.wbond.net/installation.

You just have to do this once, and then you'll see our recommended collection of plugins below.

Installing plugins

Plugins can help you improve your editing efficiency. What makes you leave the editor to use other tools?

Tip: Here is an example of a plugin. Show that those changes have not yet been submitted, you can integrate a different tool in the editor, such as GitHub into your browser. So you don't have to leave the editor and use other tools, isn't it convenient? O (∩_∩) o~

Package Manager makes it easier for you to discover, install and update plugins:

1. In the sublime editor, open your package Manager, via the shortcut key (ctrl+shift+p).
2. Enter ' Install package '---install packages
3. Enter the name of the plugin (package) you want to install, or browse through all the plugins and pick out the one you want.

This website can provide a complete introduction of many plugins, Https://sublime.wbond.net/browse. Next is the plugin that we like to recommend you install because they can help you improve your editing speed.

Autoprefixer---automatic browser prefix completion

If you want to quickly add a browser developer's prefix to your CSS, you can use this handy plugin to implement it.

Write CSS, regardless of the browser vendor prefix, when you want to add them, use shortcut keys ctrl+shift+p and enter Autoprefix CSS .

You can also do this automatically during the final build process, as shown in the following tutorial: We cover How can automate this in your build processes. This allows you to keep your CSS in a slim figure and you don't need to remember to hit shortcut keys Ctrl+shift+p

ColorPicker Color Pickup

Pick the color from the color tray and add it to your CSS. Shortcut key: Ctrl+shift+c.

Emmete---Comet launch

You can add some shortcut keys and some code snippets to your editor. For what it can do, check out the video in Emmet.io (the personal favorite feature is the "Quick comment--toggle Comment" command).

Shortcut keys:

• Expand abbreviation– Tab orCtrl+E   展开缩写
• Interactive "Expand abbreviation"-Ctrl+Alt+Enter
• Match Tag Pair outward– ?D (MAC)/ Ctrl+, (PC)
• Match Tag Pair inward– ?J /Shift+Ctrl+0
• Go to Matching pair– ??T /Ctrl+Alt+J
• Wrap with abbreviation- ?W /Shift+Ctrl+G
• Go to Edit point- Ctrl+Alt+→ orCtrl+Alt+←
• Select item– ??. or ??, / Shift+Ctrl+. orShift+Ctrl+,
• Toggle comment- ??/ /Shift+Ctrl+/ 打开/关闭注释
• Split/join tag- ??‘ /Shift+Ctrl+`
• Remove tag– ?‘ /Shift+Ctrl+;
• Update Image size- ??I /Ctrl+U
• Evaluate Math expression- ??Y /Shift+Ctrl+Y
• Reflect CSS value– ??R /Shift+Ctrl+R
• Encode/decode Image to data:url– ??D /Ctrl+‘
• Rename tag– ??K /Shift+Ctrl+‘

HTML-CSS-JS prettify---html-css-js format beautification

This extension helps you use commands to beautify your html,css and JS formats. You can beautify it when you save it. 使用Ctrl+Shift+H(or Cmd+Shift+H if you're using an apple system).

Git Gutter shows the change of each row on the left

Displays a hint at the far left of the editor that shows you have modified that line.

Gutter color hint to the left

Tip: This can only be used in sublime version 3.

The left column color tip shows a color point that is closest to your CSS color value.

This plugin requires ImageMagick software. If you are using an Apple MAC OS x system, we recommend that you download the installation from Cactuslabs (you may need to restart your machine to make it work after installation).

All AutoComplete Smart Complement

The Sublime Text default Autocomplete feature only considers the current file, and the Allautocomplete plugin searches all open files for matching prompt words.

Google Browser Web development tutorial start: Using sublime