VS Code TYPO3 Flux Snippets
Visual Studio Code Snippet extension for TYPO3 Flux.
Current status
Snippets overview
Not all arguments are included in a snippet, only the one which are (in my oppinion) mostyl used.
Snippets marked with a * are not used by myself so I dont know which arguments are mostly necessary.
<flux:*>
<flux:form id="$1" label="$2" description="$3" />
flux:grid
<flux:grid />
flux:outlet
<flux:outlet${1: enabled="1"} />
flux:variable
<flux:variable name="$1" />
<flux:content.*>
flux:content.get
<flux:content.get area="$1"${3: limit="$2"}${5: offset="$4"}${7: order="'${6:sorting}'"}${9: sortDirection="'${8:ASC}'"}${11: as="$10"}${13: loadRegister="$12"}${15: render="${14:1}"} />
flux:content.render
<flux:content.render area="$1"${3: limit="$2"}${5: offset="$4"}${7: order="'${6:sorting}'"}${9: sortDirection="'${8:ASC}'"}${11: as="$10"}${13: loadRegister="$12"}${15: render="${14:1}"} />
<flux:field.*>
flux:field.inline.fal
<flux:field.inline.fal name="$1" label="$2"${3: required="1"}${4: multiple="1"}${6: minItems="${5:1}"}${8: maxItems="${7:1}"}${9: collapseAll="1"}${10: expandSingle="1"} allowedExtensions="${11:jpg,jpeg,png,svg}" />
flux:field.tree.category*
<flux:field.tree.category name="$1" label="$2"${3: required="1"}${4: multiple="0"}${6: minItems="$5"}${8: maxItems="$7"}${9: showThumbs="1"}${10: expandAll="1"} />
flux:field.checkbox
<flux:field.checkbox name="$1" label="$2"${4: default="$3"}${5: required="1"}${6: requestUpdate="1"}${7: clear="1"} />
flux:field.controllerActions*
<flux:field.controllerActions name="$1" label="$2" required="1" exclude="1" extensionName="NULL" controllerExtensionName="NULL" pluginName="NULL" controllerName="NULL" actions="{foo: 'bar'}" />
flux:field.custom*
<flux:field.custom name="$1" label="$2"${4: default="$3"}${5: required="1"}${6: requestUpdate="1"}${7: clear="1"}${9: userFunc="${8:FluidTYPO3\\Flux\\UserFunction\\HtmlOutput->renderField}"} />
flux:field.file
<flux:field.file name="$1" label="$2"${4: required="1"}${5: multiple="1"}${7: minItems="$6"}${9: maxItems="$8"}${11: allowed="${10:jpg,png,gif,svg}"}${12: showThumbnails="1"}${13: useFalRelation="1"} />
flux:field.inline*
<flux:field.inline name="$1" label="$2" extensionName="NULL" table="NULL" />
<flux:field.input name="$1" label="$2"${4: default="$3"}${5: required="1"}${7: eval="${6|alpha,alphanum,alphanum_x,double2,email,int,is_in,lower,md5,nospace,num,password,required,saltedPassword,trim,unique,uniquePid,upper,year|}"}${8: maxCharacters="$7"}${10: placeholder="$9"} />
flux:field.multiRelation*
<flux:field.multiRelation name="$1" label="$2" />
flux:field.none
<flux:field.none name="$1" label="$2" default="$3" />
flux:field.radio
<flux:field.radio name="$1" label="$2"${4: default="$3"}${5: required="1"}${6: requestUpdate="1"} items="{0:{0:'One',1:'0'},1:{0:'Two',1:'1'}}" />
flux:field.relation*
<flux:field.relation name="$1" label="$2" />
flux:field.select
<flux:field.select name="$1" label="$2"${4: default="$3"}${5: required="1"}${6: requestUpdate="1"}${8: renderType="${7|selectSingle,selectSingleBox,selectCheckBox,selectMultipleSideBySide,selectTree|}${10: size="$9"}${12: maxItems="$11"} items="{0:{0:'One',1:'0'},1:{0:'Two',1:'1'}}" />
flux:field.text
<flux:field.text name="$1" label="$2"${4: required="1"}${5: enableRichText="1"} />
flux:field.tree*
<flux:field.tree name="$1" label="$2"${4: required="1"} />
flux:field.userFunc*
<flux:field.userFunc name="$1" label="$2"${5: extensionName="$4"} userFunc="$6" />
<flux:form.option.group value="$1" />
<flux:form.option.icon value="/typo3conf/ext/$1/Resources/Public/Icons/${2:icon.svg}" />
<flux:form.option.sorting value="$1" />
<flux:form.option.static value="${1:1}" />
<flux:form.container name="$1" label="$2" />
flux:form.content
<flux:form.content name="$1" label="$2" />
<flux:form.data table="$1" field="$2" uid="$3" record="${4:{foo: 'bar'}}" as="$5" />
<flux:form.object name="$1" label="$2" />
<flux:form.option name="$1" value="$2" />
<flux:form.render form="$1" />
<flux:form.section name="$1" label="$2" />
<flux:form.sheet name="$1" label="$2"${4: description="$3"} shortDescription="$2" >
<flux:form.variable name="$1" value="$2" />
<flux:grid.*>
flux:grid.column
<flux:grid.column name="$1" label="$2" colPos="$3"${5: colspan="$4"}${7: rowspan="$6"}${9: style="$8"} />
flux:grid.row
<flux:grid.row name="$1" label="$2" />
<flux:outlet.*>
flux:outlet.argument
<flux:outlet.argument name="$1" type="$2" />
<flux:outlet.form name="$1" action="$2" controller="$3" extensionName="$4" pluginName="$5" pageUid="$6" />
flux:outlet.validate
<flux:outlet.validate type="$1"${3: options="$2"} />
<flux:pipe.*>
flux:pipe.controller
<flux:pipe.controller direction="$1" action="$2" controller="$3" extensionName="$4" />
flux:pipe.email
<flux:pipe.email direction="$1" body="$2" bodySection="$3" subject="$4" recipient="$5" sender="$6" />
flux:pipe.flashMessage
<flux:pipe.flashMessage direction="$1" message="$2" title="'$3'" severity="$4"${5: storeInSession="1"} />
flux:pipe.typeConverter
<flux:pipe.typeConverter direction="$1" targetType="$2" typeConverter="$3" />
<flux:wizard.*>
flux:wizard.add
<flux:wizard.add label="$1"${2: hideParent="1"}${4: extensionName="$3"} table="$5" pid="$6" setValue="'prepend'" />
flux:wizard.colorPicker
<flux:wizard.colorPicker label="$1" dim="'${2:20x20}'" width="$3" height="$4" exampleImg="'${5:EXT:flux/Resources/Public/Icons/ColorWheel.png}'" />
flux:wizard.edit
<flux:wizard.edit label="$1"${2: hideParent="1"}${4: extensionName="$3"} width="$5" height="$6"${7: openOnlyIfSelected="1"} />
flux:wizard.link
<flux:wizard.link />
flux:wizard.list
<flux:wizard.list label="$1"${2: hideParent="1"}${4: extensionName="$3"} table="$5" pid="$6" width="$7" height="$8" />
flux:wizard.select
<flux:wizard.select label="$1"${2: hideParent="1"}${4: extensionName="$3"} mode="'${5:substitution}'" items="$6" />
flux:wizard.slider
<flux:wizard.slider label="$1"${2: hideParent="1"}${4: extensionName="$3"} mode="'${5:substitution}'" steps="$6" width="$7" />
flux:wizard.suggest
<flux:wizard.suggest label="$1"${2: hideParent="1"}${4: extensionName="$3"} table="$5" pidList="'$6'" pidDepth="$7" minimumCharacters="$8" maxPathTitleLength="$9"${10: searchWholePhrase="1"} searchCondition="'$11'"${13: cssClass="'$12'"}${15: receiverClass="'$14'"}${17: renderFunc="'$16'"} />
Templates overview
flux-ce-template
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form
id="${1:${TM_FILENAME_BASE/(^.)/${1:/downcase}/}}"
label="${2:$TM_FILENAME_BASE}"
description="${3:$TM_FILENAME_BASE}"
>
<flux:form.option name="group" value="${4:Flux}" />
<flux:form.option name="icon" value="EXT:$5/Resources/Public/Icons/Content/Standard.svg" />
$6
</flux:form>
</f:section>
<f:section name="Preview">
<h3>${2:$TM_FILENAME_BASE}</h3>
</f:section>
<f:section name="Main">
$7
</f:section>
</div>
flux-link-template
<flux:field.input name="$1" label="$2"${3: required="1"}>
<flux:wizard.link${4: blindLinkOptions="page,folder,file,mail,url"} />
</flux:field.input>
Source
All snippets have been taken from fluidtypo3.org ViewHelper reference
Recommendations
Works perfectly together with other TYPO3 snippet extension
https://github.com/MrSilaz/typo3snippets
https://github.com/febLey/vscode-typo3-vhs-snippets
License
GNU General Public License (GPL), Version 2.0
