Skip to content
SnipForm Docs

IDE Setup

Get autocomplete, validation, and documentation for SnipForm attributes in your IDE.

Install the Package

Section titled “Install the Package”

Add the intellisense package to your project:

Terminal window
npm install -D @snipform/html-intellisense

VS Code

Section titled “VS Code”

VS Code should automatically pick up the custom HTML data. If not, add to your .vscode/settings.json:

{
  "html.customData": [
    "./node_modules/@snipform/html-intellisense/vscode/html-custom-data.json"
  ]
}

Then restart VS Code.

What You Get

Section titled “What You Get”
  • Autocomplete for <snip-form>, <sf-success>, <sf-success-script>
  • Autocomplete for all sf-validate:* rules
  • Autocomplete for error, valid, and submit directives
  • Hover documentation for each attribute

JetBrains (WebStorm, PhpStorm, etc.)

Section titled “JetBrains (WebStorm, PhpStorm, etc.)”

JetBrains IDEs automatically detect the web-types.json file from npm dependencies. Just install the package and restart your IDE.

Manual Configuration

Section titled “Manual Configuration”

If not auto-detected, add to your package.json:

{
  "web-types": [
    "./node_modules/@snipform/html-intellisense/web-types.json"
  ]
}

Supported Attributes

Section titled “Supported Attributes”

The intellisense package provides completions for:

Elements

Section titled “Elements”
  • <snip-form> with key and mode attributes
  • <sf-success> success template
  • <sf-success-script> success handler

Validation Rules

Section titled “Validation Rules”

All sf-validate:* rules with parameter hints:

  • sf-validate:required
  • sf-validate:email
  • sf-validate:min[value]
  • sf-validate:max_length[value]
  • And 30+ more…

State Directives

Section titled “State Directives”
  • Error: if-error, then-show, then-text, then-class, error-class, etc.
  • Valid: valid-class, valid-style, else-text, else-class
  • Submit: on-submit-show, on-submit-text, etc.

Example

Section titled “Example”

With the package installed, type sf- and your IDE will suggest:

sf-validate:required
sf-validate:email
sf-validate:min[
sf-validate:max_length[
...

Type on-submit- and see:

on-submit-show
on-submit-hide
on-submit-class
on-submit-text
on-submit-style