{"id":13721904,"url":"https://github.com/evanleck/vim-svelte","last_synced_at":"2025-03-31T07:07:38.821Z","repository":{"id":44959984,"uuid":"188918820","full_name":"evanleck/vim-svelte","owner":"evanleck","description":"Vim syntax highlighting and indentation for Svelte 3 components.","archived":false,"fork":false,"pushed_at":"2022-10-27T16:39:24.000Z","size":54,"stargazers_count":322,"open_issues_count":4,"forks_count":9,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-24T05:05:22.182Z","etag":null,"topics":["neovim","plugin","svelte","sveltejs","vim"],"latest_commit_sha":null,"homepage":"","language":"Vim Script","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evanleck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-27T23:01:08.000Z","updated_at":"2025-02-08T12:12:33.000Z","dependencies_parsed_at":"2022-08-14T13:30:23.672Z","dependency_job_id":null,"html_url":"https://github.com/evanleck/vim-svelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanleck%2Fvim-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanleck%2Fvim-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanleck%2Fvim-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanleck%2Fvim-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evanleck","download_url":"https://codeload.github.com/evanleck/vim-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429469,"owners_count":20775806,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["neovim","plugin","svelte","sveltejs","vim"],"created_at":"2024-08-03T01:01:22.647Z","updated_at":"2025-03-31T07:07:38.794Z","avatar_url":"https://github.com/evanleck.png","language":"Vim Script","funding_links":[],"categories":["integrations","Dev Tools"],"sub_categories":["editor tools","Editors"],"readme":"# vim-svelte\n\n[![vim-svelte](https://github.com/evanleck/vim-svelte/actions/workflows/main.yml/badge.svg)](https://github.com/evanleck/vim-svelte/actions/workflows/main.yml)\n\nVim syntax highlighting and indentation for [Svelte 3][svelte] components.\n\nThis is mostly just HTML syntax highlighting with some keywords added and all\nexpressions inside of `{` and `}` highlighted as JavaScript.\n\nHighlighting includes:\n\n- HTML attributes with a colon like `on:click` or `transition:fade` highlighted\n    as `Keyword`.\n- `#if`, `/if`, `:else`, and `:else if` highlighted as `Conditional`.\n- `#await`, `/await`, `:catch`, `:then`, and `@html` highlighted as `Keyword`.\n- `#each` and `/each` highlighted as `Repeat`.\n\n\n## Dependencies\n\n1. [pangloss/vim-javascript][vim-javascript] for JavaScript syntax highlighting.\n2. [othree/html5.vim][html5-vim] for HTML indent.\n\nBoth of those dependencies are included in [sheerun/vim-polyglot][vim-polyglot]\nso if you're already using that then you should be set.\n\n\n## Installation\n\nThe simplest way to install vim-svelte is via a package manager like\n[Pathogen][pathogen], [Vundle][vundle], [NeoBundle][neobundle],\n[Plug][vim-plug], or [minpac][minpac].\n\nFor example, using minpac:\n\n```vimscript\ncall minpac#add('othree/html5.vim')\ncall minpac#add('pangloss/vim-javascript')\ncall minpac#add('evanleck/vim-svelte')\n```\n\nOr using Plug:\n\n```vimscript\nPlug 'othree/html5.vim'\nPlug 'pangloss/vim-javascript'\nPlug 'evanleck/vim-svelte', {'branch': 'main'}\n```\n\nvim-svelte works just fine with Vim 8's native package loading as well.\n\n\n## Options\n\nTo disable indentation within `\u003cscript\u003e` and `\u003cstyle\u003e` tags, set one of these\nvariables in your `vimrc`:\n\n```vim\nlet g:svelte_indent_script = 0\nlet g:svelte_indent_style = 0\n```\n\n\n## Preprocessed languages\n\nSyntax highlighting for additional languages is supported, assuming you have a\ncorresponding syntax definition installed. For example, newer versions of Vim\nship with a TypeScript syntax definition, so you wouldn't need anything\nadditional installed for that to work. Supported languages include:\n\n- `less`\n- `scss`\n- `sass`\n- `stylus`\n- `typescript`\n\nSince Svelte doesn't support these out of the box (see\n[svelte-preprocess][preprocess] for how to set up some common language\npreprocessors with e.g. Rollup), they're all disabled by default so the first\nthing you'll need to do is enable your languages via the\n`g:svelte_preprocessors` variable:\n\n```vim\nlet g:svelte_preprocessors = ['typescript']\n```\n\nThen, use your language in your Svelte components like this:\n\n```html\n\u003cscript lang='typescript'\u003e\n\u003c/script\u003e\n\n\u003c!-- Or... --\u003e\n\u003cstyle type='text/scss'\u003e\n\u003c/style\u003e\n```\n\n### Customizing the list of preprocessed languages\n\nIn addition to enabling the built-in preprocessors, you can add your own\npreprocessors that this plugin will detect using the\n`g:svelte_preprocessor_tags` variable. It should be a list of dictionaries with\nat least a `name` and a `tag` attribute. You can optionally include an `as`\nattribute which maps to the syntax you'd like to use within the tag.\n\nHere's an example:\n\n```vim\nlet g:svelte_preprocessor_tags = [\n  \\ { 'name': 'postcss', 'tag': 'style', 'as': 'scss' }\n  \\ ]\n\" You still need to enable these preprocessors as well.\nlet g:svelte_preprocessors = ['postcss']\n```\n\nThis would highlight `\u003cstyle type=\"postcss\"\u003e` contents as `scss`, useful if you\nuse something like [postcss-nested][nested].\n\nYou can also create shorthand names if, for example, writing out\n`lang='typescript'` takes too long:\n\n```vim\nlet g:svelte_preprocessor_tags = [\n  \\ { 'name': 'ts', 'tag': 'script', 'as': 'typescript' }\n  \\ ]\nlet g:svelte_preprocessors = ['ts']\n```\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eField\u003c/th\u003e\n      \u003cth\u003eUsage\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault value\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ename\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        The value within the attribute \u003ccode\u003elang\u003c/code\u003e or \u003ccode\u003etype\u003c/code\u003e on\n        the \u003ccode\u003etag\u003c/code\u003e as well as the value to include in\n        \u003ccode\u003eg:svelte_preprocessors\u003c/code\u003e.\n      \u003c/td\u003e\n      \u003ctd\u003eYes\u003c/td\u003e\n      \u003ctd\u003eNone\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etag\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe HTML tag to target e.g. \u003ccode\u003escript\u003c/code\u003e or \u003ccode\u003estyle\u003c/code\u003e.\u003c/td\u003e\n      \u003ctd\u003eYes\u003c/td\u003e\n      \u003ctd\u003eNone\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eas\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe syntax name to use for highlighting.\u003c/td\u003e\n      \u003ctd\u003eNo\u003c/td\u003e\n      \u003ctd\u003eThe \u003ccode\u003ename\u003c/code\u003e attribute.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nNote, that enabling and loading a lot of different syntax definitions can\nconsiderably degrade Vim's performance. Consider yourself warned.\n\n\n## Integrations\n\n- [ALE][ale]: vim-svelte should work out of the box with `eslint` and a few\n  other linters/fixers. PRs welcome if the one you want is missing.\n- [matchit.vim][matchit]: vim-svelte should work out of the box and allow moving\n  between HTML tags as well as flow control like `#if/:else//if`.\n- [Syntastic][syntastic]: vim-syntastic will work with javascript and html checkers, for example:\n  ```vim\n  let g:syntastic_svelte_checkers = ['javascript/eslint', 'html/htmlhint']\n  ```\n\n\n## Tests\n\nIndentation tests are provided and any contributions would be much appreciated.\nThey can be run with `make test` which will clone [vader.vim][vader] into the\ncurrent working directory and run the test suite.\n\n\n## Alternatives\n\n1. [burner/vim-svelte][burner]\n2. [leafOfTree/vim-svelte-plugin][leafOfTree]\n\n\n[ale]: https://github.com/dense-analysis/ale\n[burner]: https://github.com/burner/vim-svelte\n[html5-vim]: https://github.com/othree/html5.vim\n[leafOfTree]: https://github.com/leafOfTree/vim-svelte-plugin\n[matchit]: https://github.com/adelarsq/vim-matchit\n[minpac]: https://github.com/k-takata/minpac\n[neobundle]: https://github.com/Shougo/neobundle.vim\n[nested]: https://github.com/postcss/postcss-nested\n[pathogen]: https://github.com/tpope/vim-pathogen\n[preprocess]: https://github.com/sveltejs/svelte-preprocess\n[svelte]: https://svelte.dev\n[syntastic]: https://github.com/vim-syntastic/syntastic\n[vader]: https://github.com/junegunn/vader.vim\n[vim-javascript]: https://github.com/pangloss/vim-javascript\n[vim-plug]: https://github.com/junegunn/vim-plug\n[vim-polyglot]: https://github.com/sheerun/vim-polyglot\n[vundle]: https://github.com/VundleVim/Vundle.vim\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevanleck%2Fvim-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevanleck%2Fvim-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevanleck%2Fvim-svelte/lists"}