Code Monkey home page Code Monkey logo

vim-svelte's Introduction

vim-svelte

vim-svelte

Vim syntax highlighting and indentation for Svelte 3 components.

This is mostly just HTML syntax highlighting with some keywords added and all expressions inside of { and } highlighted as JavaScript.

Highlighting includes:

  • HTML attributes with a colon like on:click or transition:fade highlighted as Keyword.
  • #if, /if, :else, and :else if highlighted as Conditional.
  • #await, /await, :catch, :then, and @html highlighted as Keyword.
  • #each and /each highlighted as Repeat.

Dependencies

  1. pangloss/vim-javascript for JavaScript syntax highlighting.
  2. othree/html5.vim for HTML indent.

Both of those dependencies are included in sheerun/vim-polyglot so if you're already using that then you should be set.

Installation

The simplest way to install vim-svelte is via a package manager like Pathogen, Vundle, NeoBundle, Plug, or minpac.

For example, using minpac:

call minpac#add('othree/html5.vim')
call minpac#add('pangloss/vim-javascript')
call minpac#add('evanleck/vim-svelte')

Or using Plug:

Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte', {'branch': 'main'}

vim-svelte works just fine with Vim 8's native package loading as well.

Options

To disable indentation within <script> and <style> tags, set one of these variables in your vimrc:

let g:svelte_indent_script = 0
let g:svelte_indent_style = 0

Preprocessed languages

Syntax highlighting for additional languages is supported, assuming you have a corresponding syntax definition installed. For example, newer versions of Vim ship with a TypeScript syntax definition, so you wouldn't need anything additional installed for that to work. Supported languages include:

  • less
  • scss
  • sass
  • stylus
  • typescript

Since Svelte doesn't support these out of the box (see svelte-preprocess for how to set up some common language preprocessors with e.g. Rollup), they're all disabled by default so the first thing you'll need to do is enable your languages via the g:svelte_preprocessors variable:

let g:svelte_preprocessors = ['typescript']

Then, use your language in your Svelte components like this:

<script lang='typescript'>
</script>

<!-- Or... -->
<style type='text/scss'>
</style>

Customizing the list of preprocessed languages

In addition to enabling the built-in preprocessors, you can add your own preprocessors that this plugin will detect using the g:svelte_preprocessor_tags variable. It should be a list of dictionaries with at least a name and a tag attribute. You can optionally include an as attribute which maps to the syntax you'd like to use within the tag.

Here's an example:

let g:svelte_preprocessor_tags = [
  \ { 'name': 'postcss', 'tag': 'style', 'as': 'scss' }
  \ ]
" You still need to enable these preprocessors as well.
let g:svelte_preprocessors = ['postcss']

This would highlight <style type="postcss"> contents as scss, useful if you use something like postcss-nested.

You can also create shorthand names if, for example, writing out lang='typescript' takes too long:

let g:svelte_preprocessor_tags = [
  \ { 'name': 'ts', 'tag': 'script', 'as': 'typescript' }
  \ ]
let g:svelte_preprocessors = ['ts']
Field Usage Required Default value
name The value within the attribute lang or type on the tag as well as the value to include in g:svelte_preprocessors. Yes None
tag The HTML tag to target e.g. script or style. Yes None
as The syntax name to use for highlighting. No The name attribute.

Note, that enabling and loading a lot of different syntax definitions can considerably degrade Vim's performance. Consider yourself warned.

Integrations

  • ALE: vim-svelte should work out of the box with eslint and a few other linters/fixers. PRs welcome if the one you want is missing.
  • matchit.vim: vim-svelte should work out of the box and allow moving between HTML tags as well as flow control like #if/:else//if.
  • Syntastic: vim-syntastic will work with javascript and html checkers, for example:
    let g:syntastic_svelte_checkers = ['javascript/eslint', 'html/htmlhint']

Tests

Indentation tests are provided and any contributions would be much appreciated. They can be run with make test which will clone vader.vim into the current working directory and run the test suite.

Alternatives

  1. burner/vim-svelte
  2. leafOfTree/vim-svelte-plugin

vim-svelte's People

Contributors

chrisputnam9 avatar davidroeca avatar djanowski avatar eriktate avatar evanleck avatar larrybotha avatar non25 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vim-svelte's Issues

Good plugin but you should set user free about indentation of <script> and <style> tags

As title says and another issue is (probably it is caused by vim's html syntax plugin though) when there's tags in a html comment like this (it is a html file but it happens on svelte files too, belive me):

Although, when you close them in comments, it fixes it.

Probably html syntax plugins should skip tags inside comment tags.
Your sincerely.

Wrong indentation in <script>

How to reproduce:

  • In a svelte file type <script>. Enter. New line will have one-size indentation.
  • Type import foo from 'foo'. Enter.
  • New line will have two-sized indentation. Expected one-size indentation.

Versions:

  • vim v 8.2
  • vim-svelte plugin downloaded the 17 feb 2022.

I suspect it is nothing to do with the vim-svelte plugin. I use pangloss/vim-javascript plugin for JS. However, it seems that its up to the vim-svelte plugin to decide which plugin to use for the <script> section. If so, a hint in the documentation would be appreciated.

script attributes like context="module" or lang="ts" break indent

To reprocude, simply add some attributes to the script tag:

<script lang="ts">
  // Pressing S will place cursor here:
  let obj = {
|  
  }
</script>
<script lang="ts">
  let obj = {<CR>};

  // will place cursor like this:
  let obj = {
  |
  };
</script>

Can't seem to figure out what causes this behavior. I've read indent script and haven't found anything that could mess with it.
Perhaps that's another indent/html.vim feature for me.

sass/scss syntax highlighting looks strange compared to .sass/.scss files

Hi. Thanks for the plugin.

I've enabled sass/scss syntax in .svelte files by using: let g:svelte_preprocessors = ['scss', 'sass'] and it looks strange.
It breaks highlighting for <> in style tag, and breaks highlighting for css properties.

Here's how it looks:
Bad

Here's how default looks:
Default

Here's how it should look imo:
Good

I tried to debug and disabled all of my configs and plugins except this,

Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte'

but it didn't help
Vim version 8.2 (2019 Dec 12, compiled Jun 21 2020 16:11:23) (Arch Linux)

indent bug

Hi!

I think something is wrong.

<script>
  let name;
    let text
    let yes;

    $: document.title = name;
</script>

Syntax not applied on load

I'm experiencing a strange issue where the syntax highlighting from this plugin is not applied on load. However, if I source my .init.vim it applies.

Add support for postCSS

The svelte-preprocess package includes support for preprocessing CSS with PostCSS. Style blocks can be identified with <style lang="postcss">. With plugins (such as postcss-nested), styles can be nested in the same way they are in SASS.

Alternatively, is there a way to identify a style block as SASS so that this plugin treats it as such, but without Svelte attempting to process it with that language? If so, I could mark my style blocks as SASS even though I actually use PostCSS.

Line doubled?

Hello Evan,

seems that the line is doubled.

syntax match svelteKeyword "\<[a-z]\+:[a-zA-Z|]\+=" contained containedin=htmlTag

syntax match svelteKeyword "\<[a-z]\+:[a-zA-Z|]\+=" contained containedin=htmlTag

Due to the comment, maybe "<[a-z]+:[a-zA-Z|]+=" should be "<[a-z]+[A-Z]+[a-zA-Z|]+=" ???

But maybe I've misread it. So if I'm wrong, just delete this Issue.
And I don't understand the | -sign in [a-zA-Z|], so my proposal is probably wrong.

Parsing error: Unexpected token <

Not sure whether it's a configuration error or something else but I kept on getting Parsing error: Unexpected token < when I open up any svelte file that starts with <script>. This is on neovim 0.6 and I do see the filetype is set to svelte already.

Syntax highlighting show an error with inline-function

Hi, @evanleck, I get the weird in syntax-highlighting.

vim-svelte-bug

syntax on
....
....
Plug 'scrooloose/nerdtree'
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'

Plug 'maxboisvert/vim-simple-complete'
Plug 'ktonga/vim-follow-my-lead'

" colorscheme
Plug 'tekannor/ayu-vim'


" ======= Syntax Highlighting  ======
Plug 'evanleck/vim-svelte', {'branch': 'main'}

I just use above plugin, and I get something weird if I use svelte inline-function

any suggest

Changing the indent length

Is there a way to change how many spaces make an indent? Currently it seems the default is 2 and it doesn't appear to be configurable.

Tags are not matched

Steps to reproduce

  1. Open a Svelte file with an opening <script> tag and a closing </script> tag.
  2. Move the cursor to some letter in the opening <script> tag
  3. Press %

Expected result

Cursor jumps to </script>

Actual result

Cursor does not jump to </script>

Other notes

Try repeating the same steps with an HTML file. It should work by default. If not run this and then try again:

runtime macros/matchit.vim

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.