Skip to content
Tommaso Negri edited this page Jan 3, 2022 · 3 revisions

All the Clips bundled with the extension.

Groups of Clips:

ERB

Expression

  • name: ERB expression
  • shortcut: ctrl-x
  • syntax: html+erb
  • trigger: <%
  • content: <% $0 %>

Insertion

  • name: ERB insert
  • shortcut: ctrl-z
  • syntax: html+erb
  • trigger: <%=
  • content: <%= $0 %>

Rails

Concern

  • name: concern
  • syntax: ruby
  • trigger: concern
  • content: module $0\n\textend ActiveSupport::Concern\n\n\t$1\nend

Params

  • name: params
  • shortcut: ctrl-p
  • syntax: ruby
  • trigger: params
  • content: params[:${:id}]

Test Case

  • name: test case
  • syntax: ruby
  • trigger: test
  • content: test \"$0\" do\n\t$1\nend

Ruby

Block

  • name: block
  • syntax: ruby
  • trigger: {
  • content: { |${0:e}| $1

Do

  • name: do/end
  • syntax: ruby
  • trigger: do
  • content: do\n\t$0\nend

Do Yield

  • name: do/end yield
  • syntax: ruby
  • trigger: doo
  • content: do |$0|\n\t$1\nend

New Method

  • name: New Method
  • shortcut: command-return
  • syntax: ruby
  • trigger: def
  • content: def $0\n\t$1\nend

Stimulus (HTML)

Controller

  • name: Stimulus Controller
  • syntax: html
  • trigger: stimulus controller
  • content: data-controller=\"${:controller-identifier}\"

Action

  • name: Stimulus Action
  • syntax: html
  • trigger: stimulus action
  • content: data-action=\"${:event}->${:controller-identifier}#${:actionName}\"

Action + Option

  • name: Stimulus Action + Option
  • syntax: html
  • trigger: stimulus action + option
  • content: data-action=\"${:event}->${:controller-identifier}#${:actionName}:${:option}\"

Target

  • name: Stimulus Target
  • syntax: html
  • trigger: stimulus target
  • content: data-${:controller-identifier}-target=\"${:targetName}\"

Value

  • name: Stimulus Value
  • syntax: html
  • trigger: stimulus value
  • content: data-${:controller-identifier}-${:value-name}-value=\"${:value}\"

Class

  • name: Stimulus Class
  • syntax: html
  • trigger: stimulus class
  • content: data-${:controller-identifier}-${:class-name}-class=\"${:css-class}\"

Stimulus (JS)

Controller

  • name: Stimulus Controller
  • syntax: javascript
  • trigger: stimulus controller
  • content: import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n\t${:Code}\n}

Targets

  • name: Stimulus Targets
  • syntax: javascript
  • trigger: stimulus targets
  • content: static targets = [\"${:targetName}\"]

Values

  • name: Stimulus Values
  • syntax: javascript
  • trigger: stimulus values
  • content: static values = {\n\t${:valueName}: ${:Type}\n}

Values + Defaults

  • name: Stimulus Values + Defaults
  • syntax: javascript
  • trigger: stimulus values defaults
  • content: static values = {\n\t${:valueName}: {\n\t\ttype: ${:Type},\n\t\tdefault: ${:value}\n\t}\n}

Classes

  • name: Stimulus Classes
  • syntax: javascript
  • trigger: stimulus classes
  • content: static classes = [\"${:className}\"]

Dispatch

  • name: Stimulus Dispatch
  • syntax: javascript
  • trigger: stimulus dispatch
  • content: this.dispatch(\"${:eventName}\", { detail: ${:payloadObject} })
Clone this wiki locally