webstorm的live templates快速编辑功能,让你的css JS代码书写速度飞起来

时间：2024-03-02 14:08:58

前言:

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，

大大提高了HTML/CSS代码编写的速度，比如下面的演示：

 

 但是对于我们来说这远远不够,我还想写css js呢,有些编辑器会提供一部分快捷功能,但是对于一些我自己常用的,编辑器没有的,我想自己定义,那怎么办呢,

下边的这篇教程对你来说,肯定大有帮助:kissing_closed_eyes:

简介:

webStrom IDEA , live template example etc

webStrom的实时代码模板。

软件开发时，你经常要输入重复性的繁琐的代码，比如 样式文件各种按钮,弹窗等.

有没有更加快捷的方式，让我们输入这些代码呢？

##有! :relaxed:

在笔者的css文件中，只需要输入 btn，再按tab键，或者鼠标左键点击不同选项就能输出一段不用的css代码.

这段代码代表一个无图圆角的按钮.
按钮大小,颜色自己更改,不用打出那么多的样式名字了.
还比如在JS代码书写中,笔者用foreach方法很频繁,每次敲打一遍都很蓝瘦.

是不是看起来很爽,很方便,接下来我会详细讲解怎么配置自己的live templates,并且导入别人已经编辑好的,或者导出自己配置好的文件.

如何编辑
打开File | Settings | Editor | Live Templates
1的意思是在当前组里添加新的语法.
2的意思是新建语法组.
上边这张图片的每一项就代表一个分组.组下的每一项就代表一个语法.
我们来编辑一个语法测试一下.

　如果我们编辑成如图这样的格式,当我们点击应用以后,发现在JS文件中输出test怎么都打不出这个语法.原因在这里,往下看

一定要点击语法框下方的define按钮,在选择相对应的语法,要不然语法是永远不会生效的,本人开始就犯了多次这个错误.

:laughing::laughing::laughing:

保存应用后再去尝试,发现很好用吧.
这样对我们来说还远远不够,我们还要加上配置项.点击右侧edit variables
expression配置详解放到最下方:有兴趣的可以尝试尝试,本人经验就是不用尝试太多,配置那么多其实没什么大用处.
default value 配置默认值可以直接填写,注意一定要加双引号如"item".要不然就不生效了.
skip if defined  这个配置勾选了之后会光标会默认跳过这个变量定义处.
注:还有4个变量不能使用,功能如下:

　　1.$VAR$ 可以定义一个变量

　　2.$ARRAY$ 可输入一个数组

　　3.$PARAM$ 可变长度参数

　　4.$END$ 光标结束符号
导出配置:

如果你已经定义好了你的配置可以导出一份配置文件

 导入

第三方JS配置快捷包导入下载地址https://github.com/blakedietz/js-live-template 配详细使用注解

更多详细信息可以查看官网https://www.jetbrains.com/help/webstorm/template-variables.html

 

expression配置
  1. 项目
    描述
    blockCommentEnd
    返回指示当前语言上下文中块注释结束的字符。
    blockCommentStart
    返回指示当前语言上下文中块注释开始的字符。
    camelCase(String)
    将字符串转换为camelCase。例如camelCase(my-text-file)，camelCase(my text file)和camelCase(my_text_file)所有的回报myTextFile。
    capitalize(String)
    大写参数的第一个字母。
    capitalizeAndUnderscore(sCamelCaseName)
    将作为参数传递的CamelCase名称的所有字母大写，并在各部分之间插入下划线。例如，capitalizeAndUnderscore(FooBar)退货 FOO_BAR。
    classNameComplete()
    此表达式替换变量位置处的类名称完成。
    clipboard()
    返回系统剪贴板的内容。
    commentEnd()
    返回指示当前语言上下文中注释结尾的字符。如果以当前语言定义行注释，则返回值为空。
    commentStart()
    返回指示当前语言上下文中注释开头的字符。如果使用当前语言定义行注释，则最好使用它们的开始指示符。
    complete()
    在变量的位置调用代码完成。
    completeSmart()
    在变量的位置调用智能类型完成。
    concat(expressions...)
    返回作为参数传递给函数的所有字符串的串联。
    dartIterableVariable()
    返回可以迭代的变量的名称。
    dartListVariable()
    返回数组的元素列表。
    dartSuggestIndexName()
    返回一个建议的名称从最常用的一个指标变量： i，j，k等未在当前范围内尚未使用的名称是第一个显示。
    dartSuggestVariableName()
    根据引用变量命名规则的代码样式设置，根据变量类型和初始化表达式返回变量的建议名称。
    例如，如果它是一个在迭代中保存元素的变量，WebStorm会考虑最合理的名称，并考虑迭代的容器的名称。
    date(sDate)
    以指定格式返回当前系统日期。
    如果没有参数，则以默认系统格式返回当前日期。
    decapitalize(sName)
    用相应的小写字母替换参数的第一个字母。
    defaultReturnValues
    如果在return语句中使用表达式，则返回默认值。errorVariableName如果表达式是错误类型，则使用 参数。
    enum(sCompletionString1,sCompletionString2,...)
    返回扩展模板时建议完成的以逗号分隔的字符串列表。
    escapeString(sEscapeString)
    转义指定为参数的字符串。
    expectedType()
    返回模板扩展到的表达式的预期类型。如果模板在作业的正确部分，之后return等扩展，则会有意义。
    fileName()
    返回当前文件的名称及其扩展名。
    fileNameWithoutExtension()
    返回没有扩展名的当前文件的名称。
    firstWord(sFirstWord)
    返回作为参数传递的字符串的第一个单词。
    groovyScript("groovy code", arg1)
    返回具有指定代码的Groovy脚本。
    您可以使用groovyScript()具有多个参数的函数。第一个参数是执行的脚本的文本或包含脚本的文件的路径。接下来的参数被绑定到_1，_2，_3，... _n变量中提供的脚本中。此外，该_editor变量在脚本中可用。此变量绑定到当前编辑器。
    JsArrayVariable()
    返回当前JavaScript数组的名称。
    jsClassName()
    返回当前JavaScript类的名称。
    jsComponentTypeOf()
    返回当前JavaScript组件的类型。
    jsDefineParameter
    根据模块的名称，返回参数 define(["module"], function (<parameter_in_question>>) {})。
    jsMethodName()
    返回当前JavaScript方法的名称。
    jsQualifiedClassName()
    返回当前JavaScript类的完整名称。
    jsSuggestIndexName()
    返回一个建议的名称从最常用的一个指标变量： i，j，k等未在当前范围内尚未使用的名称是第一个显示。
    jsSuggestVariableName()
    根据引用变量命名规则的代码样式设置，根据变量类型和初始化表达式返回变量的建议名称。
    例如，如果它是一个在迭代中保存元素的变量，WebStorm会考虑最合理的名称，并考虑迭代的容器的名称。
    jsSuggestDefaultVariableKind(Boolean)
    Boolean参数确定当前上下文中是否允许常量。如果未指定参数，则允许使用常量。当模板扩展，下拉列表显示有var，let，const为打字稿和ES6和只有一个选项var为早期版本的JavaScript选项。
    jsSuggestImportedEntityName()
    建议该类型的import语句的名称 `import * as $ITEM$ from "$MODULE$"`或`import $ITEM$ from "$MODULE$"` 基于文件名。
    lineCommentStart
    返回指示当前语言上下文中行注释开头的字符。
    lineNumber()
    返回当前行号。
    lowercaseAndDash(String)
    将camelCase字符串转换为小写，并将n-dashes作为分隔符插入。例如，lowercaseAndDash(MyExampleName)退货my-example-name。
    regularExpression(String, Pattern, Replacement)
    将camelCase字符串转换为小写，并将n-dashes作为分隔符插入。例如，lowercaseAndDash(MyExampleName)退货my-example-name。
    snakeCase(String)
    将字符串转换为snake_case。例如，snakeCase(fooBar)退货foo_bar。
    spaceSeparated(String)
    将字符串转换为小写并将空格作为分隔符插入。例如，spaceSeparated(fooBar)退货foo bar。
    spacesToUnderscores(sParameterWithSpaces)
    用作为参数传递的字符串中的下划线替换空格。例如，spacesToUnderscores(foo bar)退货foo_bar。
    substringBefore(String,Delimiter)
    在指定的分隔符后删除扩展名并仅返回文件名。这是测试的文件名有帮助（例如，substringBefore($FileName$,".")返回component-test的component-test.js）。
    time(sSystemTime)
    以指定格式返回当前系统时间。
    underscoresToCamelCase(String)
    用作为参数传递的字符串中的camelCase字母替换下划线。例如，underscoresToCamelCase(foo_bar)退货fooBar。
    underscoresToSpaces(sParameterWithUnderscores)
    用作为参数传递的字符串中的空格替换下划线。例如，underscoresToSpaces(foo_bar)退货foo bar。
    user()
    返回当前用户的名称。