sublime / vscode 快捷生成HTML代码的实现

Both Sublime Text and VS Code offer various methods for generating HTML code snippets and templates quickly. Here are some common approaches:

Sublime Text:

1. Emmet (Zen Coding):

   • Install the Emmet plugin if it's not already included.
   • Use Emmet abbreviations to generate HTML structures. For example, type div>h1>p and press Tab to create a <div> with an <h1> and a <p> inside.
   • Emmet supports nested structures, attributes, and class/ID generation.

2. User Snippets:

   • Create your own HTML snippets for frequently used code blocks.
   • Go to Tools > User Snippets or open the Packages/User/Default.sublime-snippets file.
   • Define snippets with a trigger (e.g., html-doc), a description, and the code to be inserted.
   • Type the trigger and press Tab to insert the snippet.

3. HTML Templates:

   • Create HTML template files (e.g., template.html) with the basic structure you need.
   • Use Tools > New File and select HTML as the syntax.
   • Paste your template code into the new file.
   • Save the file and use it as a base for new HTML documents.

VS Code:

1. Emmet (Zen Coding):

   • Emmet is built-in to VS Code.
   • Use Emmet abbreviations and keyboard shortcuts as described for Sublime Text.
   • Emmet snippets are also available in the IntelliSense suggestions.

2. HTML Snippets:

   • Create your own HTML snippets for frequently used code blocks.
   • Go to Code > Preferences > User Snippets or open the settings.json file.
   • Define snippets with a trigger, a language identifier (html), and the code to be inserted.
   • Type the trigger and press Tab to insert the snippet.

3. HTML Templates:

   • Create HTML template files (e.g., template.html) with the basic structure you need.
   • Use File > New File and select HTML as the language.
   • Paste your template code into the new file.
   • Save the file and use it as a base for new HTML documents.

4. Extensions:

   • Install extensions like HTML5 Boilerplate or Live Preview to get additional template and code generation features.

Remember, the specific methods and shortcuts may vary slightly depending on the version of the software you are using.