Skip to content

VSCode extension for intellisense for data, events, slots etc. in components.

Notifications You must be signed in to change notification settings

ArdenIvanov/svelte-intellisense

Repository files navigation

svelte-intellisense

Visual Studio Marketplace

Provides intellisense for data, events, slots etc. in components. Utilizes sveltedoc-parser for getting information about components.

Installation

This extension provides a features for svelte language files. For basic support of svelte files you should install this extension: VSCode Svelte that provides svelte syntax highlighting and syntax checks.

Features

Go to definition

This extension supports a go to definition VSCode feature for quick navigation between components and references.

Just click to component usage in markup or symbol in import section and view its source code.

Go to component definition

Also that works for component attributes, events, bind, slots:

Go to component field Go to component slot

Awesome navigation for methods calling:

Go to method

Hover

Component documentation is provided on hover in template markup, import statement and components section.

Component hover documentation

Documentation of component events, props and slots provided as well.

Component props documentation

Completion

  1. Path resolving for import statement in script path

Allows to quick search for the required files to import, like a script file or a svelte component. Also includes node_modules folder in search results if it exists. Suggestions from node_modules are marked with a special label.

Script path completion

  1. Path resolving for components: import statement (Svelte 2 only)

Component path completion

  1. Standard svelte syntax completion for HTML tags
  • Supports autocompletion for use:, transition:, in:, out:, bind:, class:, ref:.

HTML tag standard attributes

  1. Tag-openning completions for svelte special components and imported component

Tag opening completion

  1. Component data and slots

Component data and slots

  1. Component events and expressions

Component events and expressions

  1. Svelte template blocks

This extension supports all svelte blocks - if, each, await - with inner branching.

Template blocs

  1. Data and computed properties for component state getter (Svelte 2 only)

Get properties of component

The same is supported for writing a computed property.

Computed properties

  1. Data properties for component state setter (Svelte 2 only)

Set properties of component

  1. Svelte methods in script section (Svelte 2 only)

Also provides auto-completion for this.refs. (Svelte 2 only)

Component methods auto completion

JSDoc support

You can make a perfect documentation for your components with JSDoc syntax in comments (see example below). This documentation will be shown in completion items and on hover. You can read about all JSDoc features in sveltedoc-parser package documentation.

Basically, this extensions supports following JSDoc features:

  • Component description
  • Methods description
  • Data and computed properties description
  • Respect for @private, @protected, @public attributes to filter completion items
<button role="button" on:click="handleButtonClick()" disabled={disabled}>
    {#if text}
        {text}
    {:else}
        <!-- Slot to render a custom content when @see text is not specified -->
        <slot></slot>
    {/if}
</button>

<script>
/**
 * Simple button UI element.
 */
export default {
    data() {
        return {
            /**
             * The plain text for button.
             */
            text: '',
            /**
             * Indicates that this button can't be clicked
             */
            disabled: false
        };
    },
    methods: {
        /**
         * Custom button click handler.
         * @private
         */
        handleButtonClick() {
            const { disabled } = this.get();
            if (disabled) {
                return;
            }

            /**
             * Fires when user clicks on the button.
             * @event click 
             */
            this.fire('click');
        }
    }
}
</script>

TODO

  • Signature help for component tags
  • Workspace symbol search
  • Find all references
  • Rename symbol

About

VSCode extension for intellisense for data, events, slots etc. in components.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •