Omi Snippets

Try it Now!

Visual Studio Code syntax highlighting for single-file Omi.js components (enabled by omil).

Or Download Vsix! to install in Visual Studio Code

Contributors

| Eno Yao| Aaron Xie| DK Lan| Yong| Li Ting| Xin| Lemon | Jing | Lin | Tian Fly| | - | - | - | - | - | - | - | - | - | - |

Quick Start

• Install Omi Snippets.
• Try it with omil, a Omi.js components loader based on webpack.
• Via Marketplace Control: search for Omi Snippets and click install.
• Manual: clone this repo and install omi-snippets.vsix into your Visual Studio Code.

In addition, if you want to build and install the extension from source, you need to install vsce, like this.

# Then, clone the repository and compile it.
git clone https://github.com/Wscats/omi-snippets
cd omi-snippets
yarn
vsce package

This will setup a basic webpack + omil project for you, with *.omi or *.eno files and hot-reloading working out of the box!

For example, you can create test.omi in Visual Studio Code before install Omi Snippets

<!-- test.omi -->
<template name="component-name">
    <div>
        {this.data.name}
    </div>
</template>
<script>
import style from './style.css';
export default class {
    static css = style
    install(){
        this.data = {
            name: 'Eno Yao',
        }
    }
}
</script>
<style lang="scss">
    div{
        color:red;
    }
</style>

It will be converted into test.js and test.html

// test.js
import { WeElement, define, h } from "omi";
import style from "./style.css";
const componentName = class extends WeElement {
  render() {
    return h("div", null, this.data.name);
  }
  static css =
    `
      div{
          color:red;
      }
    ` + style;
  install() {
    this.data = {
      name: "Eno Yao"
    };
  }
};
define("component-name", componentName);

Code Snippets

|trigger|snippet| |-|-| |import|import { * } from 'omi'| |export default|export default {}| |modult.export"|modult.export = {}| |render|render(){}| |css|css(){}| |template|<template></template>| |templateLang|<template lang></template>| |script|<script></script>| |style|<style></style>| |styleLang|<style lang></style>| |scaffold|<template><script><style>| |...|...|

NOTE: You still need to install corresponding packages for pre-processors (e.g. JSX, SASS, TypeScript) to get proper syntax highlighting for them.

Enabling JSX Highlighting

The <script> block uses the syntax highlighting currently active for you normal .js files. To support JSX highlighting inside Omi files, just set Babel javascript highlighting package, which supports JSX, as your default JS highlighting.

Note you may need to explicitly disable Sublime's default JavaScript package to make it work.

Thanks

• html-snippets
• vscode-javascript
• vscode-javascript-snippets
• vsc-css-snippets
• prettier
• babel

License

MIT