9.3 Emmet

Visual Studio Code 内置了 Emmet，无需额外安装

9.3.1 支持范围

默认情况下，Emmet缩写扩展功能会在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 这些类型文件中开启
此外，还会在继承于上述文件中的语言（如 Handlebars 和 PHP）中开启

9.3.2 在 HTML 中使用 Emmet

#page>div.logo+ul#navigation>li*5>a{Item $}
在输入 Emmet 缩写的过程中，Emmet 缩写会出现在建议列表中，并且会有相应的 HTML 预览

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

9.3.3 在 CSS 中使用 Emmet

在 CSS 的属性中输入 Emmet 的缩写 m10，会显示相应的 CSS 预览 margin: 10px;

9.3.4 使用 Tab 键展开 Emmet 缩写

"emmet.triggerExpansionOnTab": true

9.3.5 在建立列表中禁用 Emmet 缩写

"emmet.showExpandedAbbreviation": "never"

9.3.6 Emmet 缩写在建议列表中的顺序

"emmet.showSuggestionsAsSnippets": true
"editor.snippetSuggestions": "top"

9.3.7 在其他文件中启用 Emmet 缩写

通过以下设置，可以使 Emmet 缩写只在与 HTML/CSS 相关的文件中启用
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

9.4 React

9.4.6 React 插件推荐

1. ES7+ React/Redux/React-Native snippets
   提供许多好用的代码片段
2. React Pure To Class
   把 React 函数组件转换为 React 的 class 组件
3. React Template
   生成代码模板
4. React maker
   在指定的目录中创建包含函数组件的 index.ts 文件

9.5 Angular

9.5.5 Angular 插件推荐

1. Angular Snippets
   提供大量的 Typescript 和 HTML 代码片段
2. Angular Schematics
   可以把 Angular Schematics 插件当作图形用户界面版的 Angular CLI
3. Angular Essentials
4. Angular Extension Pack

9.6 Vue

9.6.7 Vue 插件推荐

1. Vue VSCode Snippets
2. Vue Theme
3. Vue VS Code Extension Pack

9.7 前端插件推荐

9.7.1 Beautify

9.7.2 Prettier - Code formatter

9.7.3 JavaScript (ES6) code snippets