我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文所提及的快速敲入代码的方式，也不仅仅适用于webstorm，很多和web相关的ide中都有类似的功能。所以，大家可以在自己喜欢的ide里面，都试试。主要的技能点也非常简单。就是如何敲入很少量的字符，而输入大段的字符。

当然在这里，苏南大叔要承认：很多时候，苏南大叔都是大段文本复制过来的代码。但是，通过本文中的输入方式，确实可以达到事半功倍的效果。所以强烈建议大家学习一下。

苏南大叔：webstorm 的几个快速输入代码、自动补全的方法 - webstorm-quick
webstorm 的几个快速输入代码、自动补全的方法（图3-1）

下面描述的方式，都是输入字符，然后按下tab键，就可以生效的。

html:5

html:5，这个无疑是非常实用的一句话。生成了web开发最大段，最实用的代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

script:src

<script src=""></script>

link

<link rel="stylesheet" href="">

ul>li*5>a

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

苏南大叔：webstorm 的几个快速输入代码、自动补全的方法 - 003
webstorm 的几个快速输入代码、自动补全的方法（图3-2）

快速同时编辑几行代码

这个操作，也算是比较常见。方法是：alt+鼠标点击每一行你需要修改的地方，然后再进行普通编辑。

苏南大叔：webstorm 的几个快速输入代码、自动补全的方法 - 123
webstorm 的几个快速输入代码、自动补全的方法（图3-3）

相关文章

结论

这里的快捷操作代码的方式，属于锦上添花的事情。当然，如果你不会这些技巧，也是可以自己用刀耕火种的方式，进行编辑代码的。一样一样，生产工具的革新而已。本文所描述的功能，不仅仅存在于webstorm里面，常见的编辑器都有类似的功能，比如vscode/sublime/phpstorm等等，这个功能据说来源于其内置的emmet插件。

更多由苏南大叔带来的webstrom的应用技巧，请点击这里查看：https://newsn.net/tag/webstorm/ 。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   webstorm    idea