https://github.com/rayraegah/sfc-language

Better syntax for Single File Components (like Riot, Vue, Svelte etc.)
https://github.com/rayraegah/sfc-language

html-element polymer riotjs sublime-syntax sveltejs vuejs web-components

Last synced: 11 months ago
JSON representation

Better syntax for Single File Components (like Riot, Vue, Svelte etc.)

• Host: GitHub
• URL: https://github.com/rayraegah/sfc-language
• Owner: Rayraegah
• Created: 2017-02-20T17:38:52.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-30T09:11:35.000Z (over 8 years ago)
• Last Synced: 2025-02-07T14:39:54.873Z (about 1 year ago)
• Topics: html-element, polymer, riotjs, sublime-syntax, sveltejs, vuejs, web-components
• Homepage:
• Size: 9.77 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# Single File Component Syntax

![riotjs badge](https://img.shields.io/badge/syntax-riot-%23fc0e49.svg) ![vuejs badge](https://img.shields.io/badge/syntax-vue-4fc08d.svg)

Components extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that a compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special attributes like `is`, `for`, `if`, `each` etc.

This component syntax for Sublime Text 3 and 2, has been tested to work with  `Riotjs components`, `Web components` and `Polymer components`. Support for `Vuejs components` is a bit wonky; but works.

## Features

 - Additional syntax sugar over the default HTML sublime syntax.

 - CSS is scoped as`source.css.embedded.html` and uses native syntax.

 - JavaScript is scopeed as `scope.js.embedded.html` and uses native syntax.

 - Tag bindindings example: `...` are scoped as `scope.js.embedded.html` and content between`{ ... }` is scoped as `meta.entity.block` while `{` and `}` are scoped as tag start and end.

 - Also supports [tagged template literals](https://github.com/sublimehq/Packages/issues/179).

## Installation

Copy the `sfc.sublime-syntax` file into your packages folder.

For Sublime Text 2 compile to tmLanguage using `PackageDev` and copy the `sfc.tmLanguage` file.

## License

MIT © [Rayraegah](https://github.com/rayraegah)