WebStorm 中自定义文档注释模板（也叫设置文档头部注释）

时间 2021-04-15 标签 html+js+jquery+css

前提：

　　用WebStrom不管写HTML，还是JavaScript都会涉及到一些文档说明。尤其是文档的头部注解说明。

　　只要是你写的页面，头部注解说明基本一致。每次都写一遍？这不像是一个玩计算机人的风格。

　　下面的方法。就解决了此问题。

　　同时提示：养成良好的代码习惯，规范化代码，规范的注释便于后续维护。

实现效果如下：

文档说明注释 ：
Webstorm 中，自定义说明注释模板，模板内容包括(文档描述、作者、创建日期等信息)：

自定义注释模板开始：

一、在菜单栏 --->文档中 ---> 找到设置。

　　或者直接快捷键 Ctrl + Alt + S 打开Webstorm设置，找不到的可以直接搜索 ‘Live Template’，然后选择进入到右侧菜单，如下：

二、点击右上角 “+” --> Live Template，添加注释模板，出现以下界面，填写相关的信息。参考如下：

<!--
@name: 
@description: 
@author: byx
@time: $date$
-->

详细信息图如下：

　　第五步，“Edit variables” ,这里说一下，时间（$date$）的具体格式，这个格式和 java中的还不一样，百度也是一半对，一半错，记录下来。防止下回换电脑再应用到。

　　　　　　date("yyyy-MM-dd HH:mm:ss")

　　第六步，“Change” 选择模板应用的范围。一般不会的就全选就好了。嘿嘿。我只HTML中用到此快捷键。就只勾选了HTML相关。

　　　　　　选择模板应用范围项为必选项，不选会报错。保存不了。

三、在HTML代码中，输入 /// + Tab 键即可自动生成自定的文档头部注释模板了!!!

　　番外：最后，详细介绍的一下第五步的 Edit variables 到底有哪些参数可用。如下图：（图片来源于网络，byx收集记录）

Item	Description
`blockCommentEnd`	Returns the characters that indicate the end of a block comment in the current language context.返回指示当前语言上下文中块注释结尾的字符。
`blockCommentStart`	Returns the characters that indicate the start of a block comment in the current language context.返回指示当前语言上下文中块注释开头的字符。
`camelCase(String)`	Converts a string into camelCase. For example, `camelCase(my-text-file)`, `camelCase(my text file)`, and `camelCase(my_text_file)` all return `myTextFile`. 将字符串转换为驼色大小写。例如, camelCase(my-text-file), camelCase(my text file), and camelCase(my_text_file) 这三种都返回 myTextFile.
`capitalize(String)`	Capitalizes the first letter of the parameter. 将参数的第一个字母大写。
`capitalizeAndUnderscore(sCamelCaseName)`	Capitalizes all the letters of a CamelCase name passed as the parameter, and inserts an underscore between the parts. For example, `capitalizeAndUnderscore(FooBar)` returns`FOO_BAR`. 将参数所有字母大写，并在各部分之间插入下划线。例如，如`capitalizeAndUnderscore`（FooBar），返回FOO_BAR
`classNameComplete()`	This expression substitutes for the class name completion at the variable position. 此表达式在变量位置替换类名完成。
`clipboard()`	Returns the contents of the system clipboard. 返回系统剪贴板的内容。
`commentEnd()`	Returns the characters that indicate the end of a comment in the current language context. The return value is empty if line comments are defined in the current language. 返回指示当前语言上下文中注释结尾的字符。如果行注释是用当前语言定义的，则返回值为空。
`commentStart()`	Returns the characters that indicate the start of a comment in the current language context. If line comments are defined in the current language, their start indicator is preferable. 返回指示当前语言上下文中注释开头的字符。如果行注释是用当前语言定义的，则它们的开始指示符更可取。
`complete()`	Invokes code completion at the position of the variable. 在变量的位置自动识别代码
`completeSmart()`	Invokes smart type completion at the position of the variable. 在变量的位置调用智能类型完成。
`concat(expressions...)`	Returns a concatenation of all the strings passed to the function as parameters. 返回串联的所有参数
`dartIterableVariable()`	Returns the name of a variable that can be iterated. 返回可迭代的变量的名称。
`dartListVariable()`	Returns a list of elements of an array. 返回数组元素的列表。
`dartSuggestIndexName()`	Returns a suggested name for an index variable from most commonly used ones: `i`, `j`, `k`, etc. The names that are not used in the current scope yet are shown first. 返回最常用的索引变量的建议名称：i、j、k等。当前作用域中尚未使用的名称将首先显示。
`dartSuggestVariableName()`	Returns the suggested name for a variable based on its variable type and initializer expression, according to your code style settings that refer to the variable naming rules. For example, if it is a variable that holds an element within an iteration, WebStorm makes a guess on the most reasonable name, taking into account the name of the container that is iterated.
`date(sDate)`	Returns the current system date in the specified format. Without a parameter, the current date is returned in the default system format. 以指定格式返回当前系统日期。如果没有参数，则以默认系统格式返回当前日期。
`decapitalize(sName)`	Replaces the first letter of the parameter with the corresponding lowercase letter. 将参数的第一个字母替换为相应的小写字母。
`enum(sCompletionString1,sCompletionString2,...)`	Returns a list of comma-separated strings suggested for completion when the template is expanded. 返回在扩展模板时建议完成的逗号分隔字符串列表。
`escapeString(sEscapeString)`	Escapes the string specified as the parameter. 转义指定为参数的字符串。
`expectedType()`	Returns the expected type of the expression into which the template expands. Makes sense if the template expands in the right part of an assignment, after `return`, etc. 当模板扩展中返回表达式的预期类型，如果模板在分配的正确部分、返回后等进行扩展，则是有意义的。
`fileName()`	Returns the name of the current file with its extension. 返回当前文件的名称及其扩展名。
`fileNameWithoutExtension()`	Returns the name of the current file without its extension. 返回不带扩展名的当前文件的名称。
`firstWord(sFirstWord)`	Returns the first word of the string passed as the parameter. 返回作为参数传递的字符串的第一个字。
`groovyScript("groovy code", arg1)`	Returns a Groovy script with the specified code. You can use the `groovyScript()` function with multiple arguments. The first argument is the text of the script that is executed or the path to the file that contains the script. The next arguments are bound to the `_1`, `_2`, `_3`, ...`_n` variables that are available inside your script. Also, the `_editor` variable is available inside the script. This variable is bound to the current editor.
`JsArrayVariable()`	Returns the name of the current JavaScript array.
`jsClassName()`	Returns the name of the current JavaScript class. 返回当前javascript类的名称。
`jsComponentTypeOf()`	Returns the type of the current JavaScript component. 返回当前javascript组件的类型。
`jsDefineParameter`	Based on the name of the module, returns the parameter from`define(["module"], function (<parameter_in_question>>) {})`. 根据模块的名称，返回参数fromdefine（[“module”]、function（<parameter_in_question>>））。
`jsMethodName()`	Returns the name of the current JavaScript method. 返回当前javascript方法的名称。
`jsQualifiedClassName()`	Returns the complete name of the current JavaScript class.
`jsSuggestIndexName()`	Returns a suggested name for an index variable from most commonly used ones: `i`, `j`, `k`, etc. The names that are not used in the current scope yet are shown first.
`jsSuggestVariableName()`	Returns the suggested name for a variable based on its variable type and initializer expression, according to your code style settings that refer to the variable naming rules. For example, if it is a variable that holds an element within an iteration, WebStorm makes a guess on the most reasonable name, taking into account the name of the container that is iterated.
`jsSuggestDefaultVariableKind(Boolean)`	The Boolean parameter determines whether constants are allowed or not in the current context. If no parameter is specified, constants are allowed. When the templates expands, a drop-down list is shown with `var`, `let`, `const` options for TypeScript and ES6 and with only one `var` option for earlier JavaScript versions.
`jsSuggestImportedEntityName()`	Suggests the name for import statements of the type`import * as $ITEM$ from "$MODULE$"` or `import $ITEM$ from "$MODULE$"` based on the file name.
`lineCommentStart`	Returns the characters that indicate the start of a line comment in the current language context. 返回在当前语言上下文中指示行注释开头的字符。
`lineNumber()`	Returns the current line number. 返回当前行号。
`lowercaseAndDash(String)`	Converts a camelCase string into lower case and inserts n-dashes as separators. For example, `lowercaseAndDash(MyExampleName)` returns `my-example-name`. 字符串转换为小写，并插入n个-作为分隔符，例如 lowercaseAndDash(MyExampleName) returns my-example-name
`snakeCase(String)`	Converts a string into snake_case. For example, `snakeCase(fooBar)` returns `foo_bar`. 将字符串转换为蛇形命名法。例如，snakecase（foo bar）返回foo_bar。
`spaceSeparated(String)`	Converts a string into lowercase and inserts spaces as separators. For example, `spaceSeparated(fooBar)` returns `foo bar`. 将字符串转换为小写并插入空格作为分隔符。例如，spaceseparated（foo bar）返回foo bar。
`substringBefore(String,Delimiter)`	Removes the extension after the specified delimiter and returns only the file name. This is helpful for test file names (for example, `substringBefore($FileName$,".")` returns `component-test` in `component-test.js`). 删除指定分隔符后的扩展名，并仅返回文件名。这有助于测试文件名（例如，$filename$，“.”之前的子字符串）返回component test in component test.js。
`time(sSystemTime)`	Returns the current system time in the specified format. 以指定格式返回当前系统时间。
`underscoresToCamelCase(String)`	Replaces underscores with camelCase letters in the string passed as the parameter. For example, `underscoresToCamelCase(foo_bar)` returns `fooBar`. 替换下划线。例如，underlinestocamelcase（foo_bar）返回foo bar。
`underscoresToSpaces(sParameterWithUnderscores)`	Replaces underscores with spaces in the string passed as the parameter. For example, `underscoresToSpaces(foo_bar)` returns `foo bar`. 将参数中的下划线替换成空格，如`underscoresToSpaces`（foo_bar）返回foo bar
`user()`	Returns the name of the current user. 返回当前用户的名称。