npm 包 vscode-expand-abbreviation 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要写大量的 HTML 和 CSS 代码。有时候，我们需要写出许多相似或重复的样式属性或 HTML 元素。这时，我们就需要一个快速的方式来生成这些代码。而 npm 包 vscode-expand-abbreviation 就是帮助大家做这个事情的。

什么是 vscode-expand-abbreviation？

vscode-expand-abbreviation 是一个专门为 Visual Studio Code 设计的插件，它可以帮助开发人员快速编写 HTML 和 CSS 代码。它和 emmet 这类工具类似，也可以根据缩写快速生成相应的代码。不过，相比于 emmet，它支持更多的功能和自定义选项，并且更加易于配置和使用。

安装和配置

要使用 vscode-expand-abbreviation，首先需要确保你已经在本地安装了 Visual Studio Code。接下来，你需要安装 vscode-expand-abbreviation 插件：

打开 Visual Studio Code
在侧边栏点击扩展（Extension）按钮，搜索 vscode-expand-abbreviation
点击安装

安装完成后，你需要打开 VS Code 的设置文件，找到如下配置：

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

修改成如下配置：

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "javascriptreact": "javascriptreact",
    "typescript": "typescriptreact",
    "html": "htmlx"
}

这个配置的作用是让 vscode-expand-abbreviation 能够在 JavaScript、JavaScript React、TypeScript React 和 HTML 文件中工作。

如何使用

使用 vscode-expand-abbreviation 很简单，只需要在文件中输入对应的缩写，然后按下 TAB 键或 Enter 键即可。

比如，你可以在 HTML 文件中输入：

div.container>ul.list>li.item*3>a[href="http://example.com/item$"]

然后按下 TAB 键，即可生成以下 HTML 代码：

<div class="container">
  <ul class="list">
    <li class="item"><a href="http://example.com/item1"></a></li>
    <li class="item"><a href="http://example.com/item2"></a></li>
    <li class="item"><a href="http://example.com/item3"></a></li>
  </ul>
</div>

同样，在 CSS 文件中输入：

m10+p10

然后按下 TAB 键，即可生成以下 CSS 代码：

margin: 10px;
padding: 10px;

进一步的配置

如果你想要更进一步的配置，可以通过修改 settings.json 文件中的配置来实现。比如，你可以修改默认的缩进格式、添加自定义的缩写等。

{
    "expandAbbreviation.indentationSpaces": 2,
    "expandAbbreviation.useAutoNamingConvention": true,
    "expandAbbreviation.useTabKey": true,
    "expandAbbreviation.customAbbreviations": {
        "vue-component": "template>[component-name]\n[style-name][script-name]"
    }
}

在这个例子中，我们修改了缩进格式，使其变成了 2 个空格。我们还设置了自动命名约定，并启用了 TAB 键支持。最后，我们添加了一个自定义的缩写，将其命名为 vue-component。

使用自定义的缩写时，只需要在文件中输入缩写名称，然后按下 TAB 键即可。比如：

vue-component

然后按下 TAB 键，即可生成以下代码：

<template>
  <component-name></component-name>
</template>

<style></style>

<script></script>

总结

通过学习本文，你应该已经了解了 npm 包 vscode-expand-abbreviation 的使用教程。这个工具可以提高开发效率，使编写 HTML 和 CSS 代码更加快捷和方便。如果你在前端开发过程中需要频繁写作这些代码，不要错过这个工具。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc377