omi-snippets

1.7.9 • Public • Published

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

wscats

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

License

MIT

Package Sidebar

Install

npm i omi-snippets

Weekly Downloads

10

Version

1.7.9

License

MIT

Unpacked Size

20.5 MB

Total Files

46

Last publish

Collaborators

  • autumnswind