`

template—Webstorm入门指南

阅读更多

转载自http://www.36ria.com/5822

template—Webstorm入门指南

提高编码效率,离不开代码模版,Webstorm的模版功能颇为强大和全面。

File Templates:文件模版

使用“ctrl+shift+a”,搜索File Templates:

会打开如下窗口:

接下来以新建个kissy模块文件为例:

额外给模版注入变量

变量名可以自定义,以${变量名}$这样的格式出现。

接下来我们来新建个文件试试。

使用“alt+insert”,打开新建文件列表:

可以看到,已经出现了“kissy model”模版,选择之,会出现一个变量填写对话框:

这样就可以快速新建指定文件了,当然你也可以修改已经存在的文件模版。

Live Templates:优秀的代码片段模版

Live Templates是非常实用的功能,严重推荐大家在日常工作中用起来。

使用“ctrl+shift+a”,搜索“live”:

会打开如下界面:

左侧会有个新建按钮,接下来我们来新建个常用的debugger;片段试试。

特别留意底部的有个live template出现的文件类型设置,是必须选择的。

如何插入代码片段呢?

在代码区域,输入“d”(不需要输入完成的模版名),然后使用“ctrl+J”:

就可以找到我们之前新建的debugger模版。

如何在模版中加入变量呢?

webstorm的live template是可以加入变量的,来体会下这个功能。

以新建一个kissy的模块模版为例。

模版代码如下:

**
 * @fileoverview $NOTE$
 * @author 剑平(明河)<minghe36@gmail.com>
 **/
KISSY.add(function (S, Base, Node) {
    function $CLS$(){
        $D$
    }
    return $CLS$;
},{requires:['base', 'node']});
</minghe36@gmail.com>

变量以$变量名$这样的形式出现。

当你插入模版的使用,可以使用“tab”键切光标到变量位置,而且如果模版内这个变量出现多次,你只要输入一次变量值,所有地方都改变,非常的方便。

分享到:
评论

相关推荐

    ReactNative-LiveTemplate-Webstorm.zip

    "ReactNative-LiveTemplate-Webstorm.zip"这个压缩包文件是为WebStorm定制的React Native开发环境配置,包含了特定的代码模板和设置,旨在提升React Native开发者在WebStorm中的编码效率。 在解压这个文件后,用户...

    Reacjs_Live_Template:用于 WebStorm 的 React 片段

    本资源,"Reacjs_Live_Template",是为 WebStorm 设计的一套 React 模板,旨在提高开发效率,通过预定义的代码片段快速构建 React 组件。 **React 模板的使用** 在 WebStorm 中,Live Templates 是一种功能,允许...

    webstormwebstorm1

    webstorm

    webstorm汉化包下载

    标题“webstorm汉化包下载”表明这是一个针对WebStorm的中文语言包资源,允许用户将其原本的英文界面转化为中文,便于理解和操作。汉化版通常包括了安装程序以及必要的汉化文件,确保用户能在安装过程中顺利完成语言...

    WebStorm绿色护眼主题

    WebStorm绿色护眼主题

    Webstorm 提交代码到Git

    ### Webstorm 提交代码到Git #### 知识点概览 - **Webstorm与Git集成**:如何在Webstorm中设置GitHub账户。 - **创建GitHub仓库**:如何在GitHub上创建新的仓库并关联到本地项目。 - **克隆GitHub仓库至Webstorm**...

    基于webstorm卡顿问题的2种解决方法

    WebStorm是JetBrains公司开发的一款集成开发环境(IDE),专门用于web开发,它支持多种编程语言和框架,比如JavaScript、TypeScript、Node.js、HTML/CSS、PHP、Python等。尽管WebStorm功能强大,但它有时会出现卡顿...

    WebStorm主题,类似VsCode经典主题

    本主题旨在为WebStorm用户提供与Visual Studio Code(VsCode)经典主题相似的视觉体验,以提高开发过程中的舒适度和效率。 首先,让我们来探讨WebStorm的主题定制。WebStorm允许用户根据个人喜好调整编辑器的外观,...

    WebStorm 10.0.4汉化包

    而"WebStorm 10.0.4汉化包"则意味着这个版本的WebStorm已经被翻译成中文,方便中国用户使用,消除了语言障碍,使得开发者可以更加顺畅地进行编码工作。 WebStorm 10.0.4的具体功能亮点包括: 1. **智能代码补全**...

    webStorm自制界面样式,类似Vscode经典主题

    webStorm, webStorm主题, webStorm主题色彩, 类似Vscode经典主题

    webstorm的汉化包

    WebStorm是一款广受欢迎的集成开发环境(IDE),主要用于编写前端和后端的Web应用程序。它由JetBrains公司开发,提供了丰富的功能,包括代码高亮、智能提示、代码自动完成、版本控制集成、单元测试以及调试工具等。...

    完美解决webstorm启动索引文件卡死的问题

    WebStorm是JetBrains公司推出的一款针对Web开发者的集成开发环境(IDE),提供代码补全、代码分析、实时错误检查等功能,广泛应用于Web前端和后端的开发。对于前端开发者而言,经常需要管理大量的JavaScript依赖项,这...

    webstorm 汉化

    WebStorm是一款广受欢迎的JavaScript开发集成环境,由JetBrains公司开发。它提供了强大的代码提示、自动补全、语法高亮、版本控制集成等特性,极大地提高了前端开发的效率。然而,对于中文用户来说,WebStorm默认的...

    WebStorm-2021.3.2.exe

    WebStorm是一款专为Web开发设计的强大集成开发环境(IDE),由JetBrains公司开发。这款软件在编程界被誉为“Web开发者的选择”,尤其对于JavaScript、TypeScript、HTML和CSS等前端技术的支持,深受程序员喜爱。...

    webstorm10.0.3汉化包

    4. **替换原语言文件**:找到WebStorm的安装目录,通常在Windows系统中位于`Program Files`下的WebStorm文件夹。在该目录下,打开`lib`子目录,查找名为`resources_en.jar`的文件,这是英文版的语言文件。用解压出的...

    import-cost webstorm 插件

    【标题】"import-cost WebStorm 插件"是一款专为WebStorm IDE设计的实用工具,它的主要功能是帮助开发者在编写代码时实时了解所引入的外部库或模块的大小,从而优化项目性能,减小应用的加载时间。通过提供直观的...

    WebStorm Chinese Language Pack(中文语言包)

    总之,"WebStorm Chinese Language Pack"是为了提供一个更加友好、易懂的中文环境,帮助中文用户充分利用WebStorm的强大功能,从而提高开发效率和工作质量。正确安装和使用中文语言包,可以使开发者更加专注于代码...

    WebStorm 2022.2

    WebStorm 2022.2

Global site tag (gtag.js) - Google Analytics