{"id":15307943,"url":"https://github.com/wscats/omi-snippets","last_synced_at":"2025-04-09T14:06:31.832Z","repository":{"id":34841585,"uuid":"184223211","full_name":"Wscats/omi-snippets","owner":"Wscats","description":"🔖Visual Studio Code Syntax Highlighting For Single File React And Omi Components - 编写React和Omi单文件组件的VSC语法高亮插件","archived":false,"fork":false,"pushed_at":"2023-01-03T22:50:50.000Z","size":30588,"stargazers_count":187,"open_issues_count":31,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T13:06:22.179Z","etag":null,"topics":["eno","omi","omi-snippets","omil","single-file-component","snippets","vscode","vscode-extension","vscode-omi"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wscats.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-04-30T08:30:07.000Z","updated_at":"2025-02-23T08:23:51.000Z","dependencies_parsed_at":"2023-01-15T09:45:25.783Z","dependency_job_id":null,"html_url":"https://github.com/Wscats/omi-snippets","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fomi-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fomi-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fomi-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fomi-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wscats","download_url":"https://codeload.github.com/Wscats/omi-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054227,"owners_count":21039952,"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":["eno","omi","omi-snippets","omil","single-file-component","snippets","vscode","vscode-extension","vscode-omi"],"created_at":"2024-10-01T08:13:02.386Z","updated_at":"2025-04-09T14:06:31.810Z","avatar_url":"https://github.com/Wscats.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snippets\n\n\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.eno\"\u003e\u003cimg src=\"https://img.shields.io/badge/Download-+-orange\" alt=\"Download\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.eno\"\u003e\u003cimg src=\"https://img.shields.io/badge/Macketplace-v2.00-brightgreen\" alt=\"Macketplace\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Wscats/omi-snippets\"\u003e\u003cimg src=\"https://img.shields.io/badge/Github Page-Wscats-yellow\" alt=\"Github Page\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Wscats\"\u003e\u003cimg src=\"https://img.shields.io/badge/Author-Eno Yao-blueviolet\" alt=\"Eno Yao\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Wscats\"\u003e\u003cimg src=\"https://api.netlify.com/api/v1/badges/b652768b-1673-42cd-98dd-3fd807b2ebca/deploy-status\" alt=\"Status\" /\u003e\u003c/a\u003e\n\n## Basic Methods\n\n|  Prefix | Method                                              |\n| ------: | --------------------------------------------------- |\n|  `imp→` | `import moduleName from 'module'`                   |\n|  `imn→` | `import 'module'`                                   |\n|  `imd→` | `import { destructuredModule } from 'module'`       |\n|  `ime→` | `import * as alias from 'module'`                   |\n|  `ima→` | `import { originalName as aliasName} from 'module'` |\n|  `exp→` | `export default moduleName`                         |\n|  `exd→` | `export { destructuredModule } from 'module'`       |\n|  `exa→` | `export { originalName as aliasName} from 'module'` |\n|  `enf→` | `export const functionName = (params) =\u003e { }`       |\n|  `edf→` | `export default (params) =\u003e { }`                    |\n|  `met→` | `methodName = (params) =\u003e { }`                      |\n|  `fre→` | `arrayName.forEach(element =\u003e { }`                  |\n|  `fof→` | `for(let itemName of objectName { }`                |\n|  `fin→` | `for(let itemName in objectName { }`                |\n| `anfn→` | `(params) =\u003e { }`                                   |\n|  `nfn→` | `const functionName = (params) =\u003e { }`              |\n|  `dob→` | `const {propName} = objectToDescruct`               |\n|  `dar→` | `const [propName] = arrayToDescruct`                |\n|  `sti→` | `setInterval(() =\u003e { }, intervalTime`               |\n|  `sto→` | `setTimeout(() =\u003e { }, delayTime`                   |\n| `prom→` | `return new Promise((resolve, reject) =\u003e { }`       |\n| `cmmb→` | `comment block`                                     |\n|   `cp→` | `const { } = this.props`                            |\n|   `cs→` | `const { } = this.state`                            |\n\n## React\n\n|      Prefix | Method                                                                              |\n| ----------: | ----------------------------------------------------------------------------------- |\n|      `imr→` | `import React from 'react'`                                                         |\n|     `imrd→` | `import ReactDOM from 'react-dom'`                                                  |\n|     `imrc→` | `import React, { Component } from 'react'`                                          |\n|    `imrcp→` | `import React, { Component } from 'react' \u0026 import PropTypes from 'prop-types'`     |\n|    `imrpc→` | `import React, { PureComponent } from 'react'`                                      |\n|   `imrpcp→` | `import React, { PureComponent } from 'react' \u0026 import PropTypes from 'prop-types'` |\n|     `imrm→` | `import React, { memo } from 'react'`                                               |\n|    `imrmp→` | `import React, { memo } from 'react' \u0026 import PropTypes from 'prop-types'`          |\n|     `impt→` | `import PropTypes from 'prop-types'`                                                |\n|     `imrr→` | `import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'`         |\n|     `imbr→` | `import { BrowserRouter as Router} from 'react-router-dom'`                         |\n|    `imbrc→` | `import { Route, Switch, NavLink, Link } from react-router-dom'`                    |\n|    `imbrr→` | `import { Route } from 'react-router-dom'`                                          |\n|    `imbrs→` | `import { Switch } from 'react-router-dom'`                                         |\n|    `imbrl→` | `import { Link } from 'react-router-dom'`                                           |\n|   `imbrnl→` | `import { NavLink } from 'react-router-dom'`                                        |\n|     `imrs→` | `import React, { useState } from 'react'`                                           |\n|    `imrse→` | `import React, { useState, useEffect } from 'react'`                                |\n|    `redux→` | `import { connect } from 'react-redux'`                                             |\n|   `rconst→` | `constructor(props) with this.state`                                                |\n|    `rconc→` | `constructor(props, context) with this.state`                                       |\n|      `est→` | `this.state = { }`                                                                  |\n|      `cwm→` | `componentWillMount = () =\u003e { }` DEPRECATED!!!                                      |\n|      `cdm→` | `componentDidMount = () =\u003e { }`                                                     |\n|      `cwr→` | `componentWillReceiveProps = (nextProps) =\u003e { }` DEPRECATED!!!                      |\n|      `scu→` | `shouldComponentUpdate = (nextProps, nextState) =\u003e { }`                             |\n|     `cwup→` | `componentWillUpdate = (nextProps, nextState) =\u003e { }` DEPRECATED!!!                 |\n|     `cdup→` | `componentDidUpdate = (prevProps, prevState) =\u003e { }`                                |\n|     `cwun→` | `componentWillUnmount = () =\u003e { }`                                                  |\n|    `gdsfp→` | `static getDerivedStateFromProps(nextProps, prevState) { }`                         |\n|     `gsbu→` | `getSnapshotBeforeUpdate = (prevProps, prevState) =\u003e { }`                           |\n|      `ren→` | `render() { return( ) }`                                                            |\n|      `sst→` | `this.setState({ })`                                                                |\n|      `ssf→` | `this.setState((state, props) =\u003e return { })`                                       |\n|    `props→` | `this.props.propName`                                                               |\n|    `state→` | `this.state.stateName`                                                              |\n| `rcontext→` | `const ${1:contextName} = React.createContext()`                                    |\n|     `cref→` | `this.${1:refName}Ref = React.createRef()`                                          |\n|     `fref→` | `const ref = React.createRef()`                                                     |\n|      `bnd→` | `this.methodName = this.methodName.bind(this)`                                      |\n\n## React Hooks\n\n- All hooks from [official docs](https://reactjs.org/docs/hooks-reference.html) are added with hook name prefix.\n\n## React Native\n\n|     Prefix | Method                                 |\n| ---------: | -------------------------------------- |\n|    `imrn→` | `import { $1 } from 'react-native'`    |\n| `rnstyle→` | `const styles = StyleSheet.create({})` |\n\n## Redux\n\n|       Prefix | Method                    |\n| -----------: | ------------------------- |\n|  `rxaction→` | `redux action template`   |\n|   `rxconst→` | `export const $1 = '$1'`  |\n| `rxreducer→` | `redux reducer template`  |\n|  `rxselect→` | `redux selector template` |\n\n## PropTypes\n\n|    Prefix | Method                                   |\n| --------: | ---------------------------------------- |\n|    `pta→` | `PropTypes.array`                        |\n|   `ptar→` | `PropTypes.array.isRequired`             |\n|    `ptb→` | `PropTypes.bool`                         |\n|   `ptbr→` | `PropTypes.bool.isRequired`              |\n|    `ptf→` | `PropTypes.func`                         |\n|   `ptfr→` | `PropTypes.func.isRequired`              |\n|    `ptn→` | `PropTypes.number`                       |\n|   `ptnr→` | `PropTypes.number.isRequired`            |\n|    `pto→` | `PropTypes.object`                       |\n|   `ptor→` | `PropTypes.object.isRequired`            |\n|    `pts→` | `PropTypes.string`                       |\n|   `ptsr→` | `PropTypes.string.isRequired`            |\n|   `ptnd→` | `PropTypes.node`                         |\n|  `ptndr→` | `PropTypes.node.isRequired`              |\n|   `ptel→` | `PropTypes.element`                      |\n|  `ptelr→` | `PropTypes.element.isRequired`           |\n|    `pti→` | `PropTypes.instanceOf(name)`             |\n|   `ptir→` | `PropTypes.instanceOf(name).isRequired`  |\n|    `pte→` | `PropTypes.oneOf([name])`                |\n|   `pter→` | `PropTypes.oneOf([name]).isRequired`     |\n|   `ptet→` | `PropTypes.oneOfType([name])`            |\n|  `ptetr→` | `PropTypes.oneOfType([name]).isRequired` |\n|   `ptao→` | `PropTypes.arrayOf(name)`                |\n|  `ptaor→` | `PropTypes.arrayOf(name).isRequired`     |\n|   `ptoo→` | `PropTypes.objectOf(name)`               |\n|  `ptoor→` | `PropTypes.objectOf(name).isRequired`    |\n|   `ptsh→` | `PropTypes.shape({ })`                   |\n|  `ptshr→` | `PropTypes.shape({ }).isRequired`        |\n|  `ptany→` | `PropTypes.any`                          |\n| `ptypes→` | `static propTypes = {}`                  |\n\n## GraphQL\n\n|     Prefix | Method                                                  |\n| ---------: | ------------------------------------------------------- |\n| `graphql→` | `import { compose, graphql } from react-apollo'`        |\n| `expgql-\u003e` | `export default compose(graphql($1, { name: $2 }))($3)` |\n\n## Console\n\n| Prefix | Method                              |\n| -----: | ----------------------------------- |\n| `clg→` | `console.log(object)`               |\n| `clo→` | `console.log(\"object\", object)`     |\n| `ctm→` | `console.time(\"timeId\")`            |\n| `cte→` | `console.timeEnd(\"timeId\")`         |\n| `cas→` | `console.assert(expression,object)` |\n| `ccl→` | `console.clear()`                   |\n| `cco→` | `console.count(label)`              |\n| `cdi→` | `console.dir`                       |\n| `cer→` | `console.error(object)`             |\n| `cgr→` | `console.group(label)`              |\n| `cge→` | `console.groupEnd()`                |\n| `ctr→` | `console.trace(object)`             |\n| `cwa→` | `console.warn`                      |\n| `cin→` | `console.info`                      |\n\n\n## Omi\n\n\u003cdetails\u003e\u003csummary\u003eOmi Snippets\u003c/summary\u003e\n\n\u003c!-- [![Netlify Status](https://api.netlify.com/api/v1/badges/b652768b-1673-42cd-98dd-3fd807b2ebca/deploy-status)](https://marketplace.visualstudio.com/items?itemName=Wscats.eno) --\u003e\n\n[Try it Now!](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) Visual Studio Code syntax highlighting for single-file Omi.js components (enabled by omil). Or [Download Vsix!](https://github.com/Wscats/omi-snippets/releases/download/2.03/eno-2.0.3.vsix) to install in Visual Studio Code\n\n\u003e 下载地址 \u0026 Download： https://marketplace.visualstudio.com/items?itemName=Wscats.eno\n\n\u003e 项目地址 \u0026 Source Code ： https://github.com/Wscats/omi-snippets\n\n# Detailed Documentation\n\n\u003e 详细文档 \u0026 Document： https://github.com/Wscats/omi-docs\n\n* [介绍 \u0026\u0026 Introduce](https://wscats.github.io/omi-docs/public/home)\n* [安装 \u0026\u0026 Install](https://wscats.github.io/omi-docs/public/install/)\n* [配合Omi Snippets插件 \u0026\u0026 Cooperative plugin with Omi Snippets](https://wscats.github.io/omi-docs/public/plugin)\n* [配合React开发 \u0026\u0026 Cooperative with React](https://wscats.github.io/omi-docs/public/react)\n* [语言块规范 \u0026\u0026 Language Block Specification](https://wscats.github.io/omi-docs/public/spec)\n* [JSX](https://wscats.github.io/omi-docs/public/jsx)\n* [Props](https://wscats.github.io/omi-docs/public/props)\n* [事件处理 \u0026\u0026 Event](https://wscats.github.io/omi-docs/public/event)\n* [生命周期 \u0026\u0026 Lifecycle](https://wscats.github.io/omi-docs/public/lifecycle)\n* [更新方法 \u0026\u0026 Update](https://wscats.github.io/omi-docs/public/update)\n* [Ref](https://wscats.github.io/omi-docs/public/ref)\n* [Store](https://wscats.github.io/omi-docs/public/store)\n* [CSS](https://wscats.github.io/omi-docs/public/css)\n* [高阶组件 \u0026\u0026 HOC](https://wscats.github.io/omi-docs/public/hoc)\n\n# Quick Start\n\n- Install [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets).\n- Try it with [omil](https://github.com/Wscats/omil)✌️😜, a Omi.js components loader based on webpack.\n- Via Marketplace Control: search for `Omi Snippets` and click install.\n- Manual: clone this repo and install `omi-snippets.vsix` into your Visual Studio Code.\n\u003e In addition, if you want to build and install the extension from source, you need to install [vsce](https://code.visualstudio.com/api/working-with-extensions/publishing-extension), like this.\n\n```bash\n# Then, clone the repository and compile it.\ngit clone https://github.com/Wscats/omi-snippets\ncd omi-snippets\nyarn\nvsce package\n```\n![wscats](https://wscats.github.io/omi-snippets/images/omi-snippets.gif)\n\nThis will setup a basic `webpack` + [omil](https://github.com/Wscats/omil) project for you, with `*.omi` or `*.eno` files and hot-reloading working out of the box!\n\nFor example, you can create `test.omi` in Visual Studio Code before install [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets)\n```html\n\u003c!-- test.omi --\u003e\n\u003ctemplate name=\"component-name\"\u003e\n    \u003cdiv\u003e{this.data.name}\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport style from './style.css';\nexport default class {\n    static css = style\n    install(){\n        this.data = {\n            name: 'Eno Yao',\n        }\n    }\n}\n\u003c/script\u003e\n\u003cstyle lang=\"scss\"\u003e\n    div{ color:red; }\n\u003c/style\u003e\n```\n\nAfter you save the code in editor`(Ctrl+S)`, it will be converted into `test.js`\n```jsx\n// test.js\nimport { WeElement, define, h } from \"omi\";\nimport style from \"./style.css\";\nconst componentName = class extends WeElement {\n  render() { return h(\"div\", null, this.data.name); }\n  static css =\n    `div{color:red;}` + style;\n  install() {\n    this.data = { name: \"Eno Yao\" };\n  }\n};\ndefine(\"component-name\", componentName);\n```\n\n## Usage In Omi\n\nA `*.omi` file is a custom file format that uses HTML-like syntax to describe a Omi component. Each `*.omi` file consists of three types of top-level language blocks: `\u003ctemplate\u003e, \u003cscript\u003e, and \u003cstyle\u003e`, and optionally additional custom blocks:\n\n```html\n\u003ctemplate lang=\"html\" name=\"component-name\"\u003e\n  \u003c!-- replace render function --\u003e\n  \u003cheader onClick=\"${this.test}\"\u003e${this.data.title}\u003c/header\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport style from './_oHeader.css'\nexport default class {\n  static css = style + `p{color:red}` // it will combine scoped css，only support static css = xxx\n  test(){ console.log('Hello Eno!') }\n  install() {\n    this.data = { title: 'Omi' }\n  }\n}\n\u003c/script\u003e\n\u003cstyle\u003e\n/* scoped css */\nheader {\n  height: 50px;\n  background-color: #07c160;\n  color: white;\n  text-align: center;\n  line-height: 50px;\n  width: 100%;\n}\n\u003c/style\u003e\n```\n\u003e [Single-File Components Demo](https://github.com/Wscats/omil/blob/master/src/components/oHeader.omi)\n\nIt also supports [JSX](https://github.com/facebook/jsx), if you want to do that, you only write `\u003ctemplate\u003e` without `lang=\"html\"` attribute in your component like this:\n```html\n\u003ctemplate\u003e\n  \u003cheader onClick={this.test}\u003e{this.data.title}\u003c/header\u003e\n\u003c/template\u003e\n```\n\u003e [JSX Demo](https://github.com/Wscats/omil/blob/master/src/components/oPanel.omi)\n\n`omil` supports using non-default languages, such as CSS pre-processors and compile-to-HTML template languages, by specifying the lang attribute for a language block. For example, you install [node-sass](https://www.npmjs.com/package/node-sass) after you can use [Sass](https://sass-lang.com/) for the style of your component like this:\n```html\n\u003cstyle lang=\"scss\"\u003e\n$height: 50px;\n$color: #07c160;\nheader {\n  height: $height;\n  background-color: $color;\n}\n\u003c/style\u003e\n```\n\n\u003e [Sass Demo](https://github.com/Wscats/omil/blob/master/src/components/oGallery.omi)\n\n## Support React\n\n```bash\nnpm install styled-components --save\n```\nYou can also use an ES6 class to define a class component by omil.\n```html\n\u003ctemplate name=\"ComponentName\"\u003e\n    \u003cp\u003e{this.state.title}\u003c/p\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    export default class {\n        constructor(props) {\n            super(props)\n            this.state.title = \"Eno Yao\"\n        }\n    }\n\u003c/script\u003e\n\u003cstyle lang=\"scss\"\u003e\n    p {color: #58bc58;}\n\u003c/style\u003e\n```\n\n\u003e [React Demo](https://github.com/Wscats/omil/blob/master/src/components/React/Eno.eno)\n\nA higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. Here's a concrete example.\n```html\n\u003ctemplate name=\"ComponentName\"\u003e\n    \u003cdiv\u003e\u003cp\u003e{this.state.title}\u003c/p\u003e\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    const HOC = (props) =\u003e {\n        return (WraooedComponent) =\u003e {\n            return class HOC extends WeElement {\n                state = {\n                    name: 'Eno Yao',\n                    ...props\n                }\n                render() {\n                    return (\n                        \u003cdiv\u003eHello World\u003cWraooedComponent name={{ ...this.state }} /\u003e\u003c/div\u003e\n                    )\n                }\n            }\n        }\n    }\n    export default HOC({\n        age: 18\n    })(class {\n        constructor(props) {\n            super(props)\n            this.state = { title: 'Lemon' }\n        }\n        componentDidMount() { console.log(this) }\n        handleChange() {}\n    })\n\u003c/script\u003e\n\u003cstyle lang=\"scss\"\u003e\n    p { color: #58bc58; }\n\u003c/style\u003e\n```\n\n# Cooperate With TypeScript\n\nA static type system can help prevent many potential runtime errors, especially as applications grow. You can use `Single File Components(SFC)` cooperate with `Higher Order Components(HOC)` to get support with `TypeScript`\n```html\n\u003ctemplate name=\"Eno\"\u003e\n    \u003cdiv\u003e\u003cp\u003e{this.state.name}\u003c/p\u003e\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    // TypeScript Support\n    import EnoType from './EnoType.tsx'\n    export default EnoType(class {\n        constructor(props) {\n            super(props);\n            this.state = { name: 'abc', age: 18}\n        }\n    })\n\u003c/script\u003e\n\u003cstyle lang=\"scss\"\u003e\n    p { color: #58bc58; }\n\u003c/style\u003e\n```\nNow, you can create `EnoType.tsx` in editor which provides TypeScript inference inside SFCs and many other great features.\n```ts\n// EnoType.ts\nimport React from 'react';\ninterface EnoTypeProps { }\ninterface EnoTypeState { name: string }\nexport default (Component: React.ComponentType) =\u003e {\n    return class EnoType extends React.Component\u003cEnoTypeProps, EnoTypeState\u003e {\n        constructor(props: EnoTypeProps) {\n            super(props)\n            this.state = { name: 'Eno Yao' }\n        }\n        render() { return \u003cComponent /\u003e }\n    }\n}\n```\n\n\u003e [React Demo](https://github.com/Wscats/omil/blob/master/src/components/React/Eno.eno)\n\n\u003e [Typescript Demo](https://github.com/Wscats/omil/blob/master/src/components/React/EnoType.tsx)\n\nThere are many cool features provided by `omil`:\n\n- Allows using other webpack loaders for each part of a Omi component, for example Sass for `\u003cstyle lang=\"scss\"\u003e` and JSX/HTML for `\u003ctemplate lang=\"html\"\u003e` and ES5+ for `\u003cscript type=\"text/babel\"\u003e`;\n- Allows custom blocks in a `.omi` or `.eno` file that can have custom loader chains applied to them [Here Online Demo](https://github.com/Wscats/omil/tree/master/src/components);\n- Treat static assets referenced in `\u003cstyle\u003e` and `\u003ctemplate\u003e` as module dependencies and handle them with webpack loaders (Such as [htm](https://www.npmjs.com/package/htm), [to-string-loader](https://www.npmjs.com/package/to-string-loader));\n- Simulate scoped CSS for each component (Use Shadow DOM);\n- State-preserving hot-reloading during development.\n\nIn a nutshell, the combination of webpack and `omil` gives you a modern, flexible and extremely powerful front-end workflow for authoring Omi.js applications.\n\n# Cooperate With Sass\n\nAutomatically compiles sass/scss files to .css saving. You may also quickly compile sass/scss files in your project.\n\n# Code Snippets\n\n|trigger|snippet|\n|-|-|\n|!omi/t-omi|`\u003ctemplate\u003e\u003cscript\u003e\u003cstyle\u003e`|\n|!react/t-react|`\u003ctemplate\u003e\u003cscript\u003e\u003cstyle\u003e`|\n|import|`import { * } from 'omi'`|\n|export default|`export default {}`|\n|modult.export\"|`modult.export = {}`|\n|render|`render(){}`|\n|css|`css(){}`|\n|template|`\u003ctemplate\u003e\u003c/template\u003e`|\n|templateLang|`\u003ctemplate lang\u003e\u003c/template\u003e`|\n|script|`\u003cscript\u003e\u003c/script\u003e`|\n|style|`\u003cstyle\u003e\u003c/style\u003e`|\n|styleLang|`\u003cstyle lang\u003e\u003c/style\u003e`|\n|scaffold/t|`\u003ctemplate\u003e\u003cscript\u003e\u003cstyle\u003e`|\n|...|...|\n\n**NOTE:** You still need to install corresponding packages for pre-processors (e.g. `JSX, SASS, TypeScript`) to get proper syntax highlighting for them.\n\n# Enabling JSX Highlighting\n\nThe `\u003cscript\u003e` 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](https://packagecontrol.io/packages/Babel), which supports JSX, as your default JS highlighting. \n\n\u003e Note you may need to explicitly disable Sublime's default `JavaScript` package to make it work.\n\n\n# Contributors\n\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/17243165?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eEno Yao\u003c/sub\u003e](https://github.com/Wscats)| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/5805270?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eAaron Xie\u003c/sub\u003e](https://github.com/aaron-xie)| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/12515367?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eDK Lan\u003c/sub\u003e](https://github.com/dk-lan)| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/30917929?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eYong\u003c/sub\u003e](https://github.com/flowerField)| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/33544236?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLi Ting\u003c/sub\u003e](https://github.com/Liting1)| \u003cimg src=\"https://wscats.github.io/omi-snippets/images/xin.jpg\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eXin\u003c/sub\u003e| [\u003cimg src=\"https://wscats.github.io/omi-snippets/images/lemon.jpg\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLemon\u003c/sub\u003e](https://github.com/lemonyyye)  |  [\u003cimg src=\"https://wscats.github.io/omi-snippets/images/jing.jpg\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eJing\u003c/sub\u003e](https://github.com/vickySC)  |  [\u003cimg src=\"https://wscats.github.io/omi-snippets/images/lin.jpg\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eLin\u003c/sub\u003e](https://github.com/shirley3790)  | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/23230108?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003eTian Fly\u003c/sub\u003e](https://github.com/tiantengfly)| \n| - | - | - | - | - | - | - | - | - | - |\n\nIf you think it's useful, you can leave us a [message and like it](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\u0026ssr=false#review-details), Your support is our driving force😀\n\u003c/details\u003e\n\n# Thanks\n\n- [omi](https://github.com/Tencent/omi)\n- [omil](https://github.com/Wscats/omil)\n- [babel](https://babeljs.io/)\n- [prettier](https://prettier.io/)\n- [html-snippets](https://github.com/abusaidm/html-snippets)\n- [vsc-css-snippets](https://github.com/joy-yu/vsc-css-snippets)\n- [vscode-javascript](https://github.com/xabikos/vscode-javascript)\n- [vscode-javascript-snippets](https://github.com/nathanchapman/vscode-javascript-snippets)\n- [vscode-es7-javascript-react-snippets](https://github.com/dsznajder/vscode-es7-javascript-react-snippets)\n\n\n# License\n\nOmi Snippets is released under the \n[MIT](http://opensource.org/licenses/MIT)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwscats%2Fomi-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwscats%2Fomi-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwscats%2Fomi-snippets/lists"}