All Projects → evanleck → Vim Svelte

evanleck / Vim Svelte

Vim syntax highlighting and indentation for Svelte 3 components.

Projects that are alternatives of or similar to Vim Svelte

Markdown Preview.vim
⚠️ PLEASE USE https://github.com/iamcco/markdown-preview.nvim INSTEAD
Stars: ✭ 764 (+383.54%)
Mutual labels:  plugin, neovim
Magane
Bringing LINE's sticker to Discord in a chaotic way.
Stars: ✭ 81 (-48.73%)
Mutual labels:  plugin, svelte
Vim Dirvish
Directory viewer for Vim ⚡️
Stars: ✭ 929 (+487.97%)
Mutual labels:  plugin, neovim
Vimpyter
Edit your Jupyter notebooks in Vim/Neovim
Stars: ✭ 308 (+94.94%)
Mutual labels:  plugin, neovim
Nvim Lspconfig
Quickstart configurations for the Nvim LSP client
Stars: ✭ 3,410 (+2058.23%)
Mutual labels:  plugin, neovim
Comfortable Motion.vim
Brings physics-based smooth scrolling to the Vim world!
Stars: ✭ 543 (+243.67%)
Mutual labels:  plugin, neovim
Vim Crates
Handle Cargo dependencies like a Rustavimean.
Stars: ✭ 54 (-65.82%)
Mutual labels:  plugin, neovim
Aerojump.nvim
Aerojump is a fuzzy-match searcher/jumper for Neovim with the goal of quick keyboard navigation
Stars: ✭ 184 (+16.46%)
Mutual labels:  plugin, neovim
Nvim Toggleterm.lua
A neovim lua plugin to help easily manage multiple terminal windows
Stars: ✭ 102 (-35.44%)
Mutual labels:  plugin, neovim
Close Buffers.vim
📖 Quickly close (bdelete) several buffers at once 📕
Stars: ✭ 99 (-37.34%)
Mutual labels:  plugin, neovim
Gen tags.vim
Async plugin for vim and neovim to ease the use of ctags/gtags
Stars: ✭ 288 (+82.28%)
Mutual labels:  plugin, neovim
Vim Laravel
Vim support for Laravel/Lumen projects
Stars: ✭ 128 (-18.99%)
Mutual labels:  plugin, neovim
Vim Yoink
Vim plugin that maintains a yank history to cycle between when pasting
Stars: ✭ 225 (+42.41%)
Mutual labels:  plugin, neovim
Gina.vim
👣 Asynchronously control git repositories in Neovim/Vim 8
Stars: ✭ 587 (+271.52%)
Mutual labels:  plugin, neovim
Vim Sneak
The missing motion for Vim 👟
Stars: ✭ 2,467 (+1461.39%)
Mutual labels:  plugin, neovim
Neoformat
✨ A (Neo)vim plugin for formatting code.
Stars: ✭ 977 (+518.35%)
Mutual labels:  plugin, neovim
Vim Subversive
Vim plugin providing operator motions to quickly replace text
Stars: ✭ 168 (+6.33%)
Mutual labels:  plugin, neovim
Sniprun
A neovim plugin to run lines/blocs of code (independently of the rest of the file), supporting multiples languages
Stars: ✭ 93 (-41.14%)
Mutual labels:  plugin, neovim
Figma Theme Ui
Convert a Theme UI config to Figma Styles
Stars: ✭ 122 (-22.78%)
Mutual labels:  plugin, svelte
Iris.vim
📫 Simple mail client for Vim.
Stars: ✭ 148 (-6.33%)
Mutual labels:  plugin, neovim

vim-svelte

Build Status

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

The JavaScript highlighting depends on pangloss/vim-javascript. That ships with 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('evanleck/vim-svelte')

Or using Plug:

Plug 'evanleck/vim-svelte', {'branch': 'main'}

vim-svelte works just fine with Vim 8's native package loading as well, that's what I use.

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.

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].