webstorm的live templates快速編輯功能,讓你的css JS代碼書寫速度飛起來

前言:

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()	返回當前用戶的名稱。