vscode 插件

纳里健康微信端vscode插件

安装

首先下载相应.vsix文件，然后使用本地化安装方式安装vscode插件。

代码片段

ngr_page

纳里page

@Page()
export default class $1 extends BasePage {
  get packageName(): string {
    return 'main';
  }
  render() {
    return <View className='$2'></View>;
  }
}

ngr_component

纳里component

class $1 extends BaseComponent {
  render() {
    return <View ></View>;
  }
}

ngr_json

纳里json序列化

@Serializable()
export class $1 {
     @JsonProperty($2) $3: $4; 
}

ngr_action_define 纳里action定义

export const $1 = Action.define('$1');

创建文件模板

目录的文件夹右键可以快速创建模板文件

New Page

创建的文件目录如下

├──page
|  |-- page.config.ts
|  |-- page.scss
|  |-- page.tsx
|

文件模板如下

page.tsx

import { BasePage, Page } from "@ngari/ngari";
import { View } from "@ngari/components";
import React from "react";
import "./$NAME.scss";

type PageOwnProps = {};
type IProps = PageOwnProps;

@Page({}, {})
export default class $NAME_UP extends BasePage<IProps> {

  get packageName(): string {
    return "main";
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return <View className='$NAME'></View>;
  }
}

page.config.ts

module.exports = {
    navigationBarTitleText: "",
  };
  

page.scss

.$NAME{
    background-color: white;
}

New Reducer

创建reducer单文件，文件模板如下

import { } from "./action";

const INITIAL_STATE = {  };

export default function reducer(state = INITIAL_STATE, action) {
  switch (action.type) {
  default:
    return state;
  }
}

New Action

创建reducer单文件，文件模板如下

import { Action } from "../../redux/action";

export const ADD = Action.define("ADD");

export const add = () => ({
  type: ADD
});

New Event

创建reducer单文件，文件模板如下

import { Event } from "./event";

export class Event$NAME_UP implements Event {

  constructor() {}

  static EVENT_NAME = Event.define("Event$NAME_UP");

  eventName: string = Event$NAME_UP.EVENT_NAME;

}

自定义创建文件模板

本插件可以取用项目中自定义的模板进行创建文件。在.vscode文件中创建相应模板，本插件就会引用相应的模板文件

自定义模板文件目录如下

├──.vscode
|  └──template
|     ├──action.template.js
|     ├──event.template.js 
|     ├──page_config.template.js
|     ├──page.template.js
|     ├──reducer.template.js
|     └──scss.template.scss
|
└──package.json