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