feat(vscode-react-typescript-snippet): change command

MrGaoGang · Dec 31, 2020 · 3e87d3f · 3e87d3f
1 parent aca0823
commit 3e87d3f
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -4,11 +4,11 @@
 
 - [lucky_tools](#lucky_tools)
   - [1. vscode-plugin-json-to-ts](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vscode-plugin-json-to-ts)
-  - [2. vue-cli-plugin-uibuilder-widget](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vue-cli-plugin-uibuilder-widget)
-  - [3. mendix-cli](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/mendix-cli)
-  - [4. vue-cli-plugin-oview](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vue-cli-plugin-oview)
-  - [5. vscode-react-typescript-snippet](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vscode-react-typescript-snippet)
-  - [6. react-native-file-hash-plugin](https://github.com/MrGaoGang/react-native-file-hash-plugin)
+  - [2. vscode-react-typescript-snippet](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vscode-react-typescript-snippet)
+  - [3. react-native-file-hash-plugin](https://github.com/MrGaoGang/react-native-file-hash-plugin)
+  - [4. mendix-cli](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/mendix-cli)
+  - [5. vue-cli-plugin-oview](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vue-cli-plugin-oview)
+  - [6. vue-cli-plugin-uibuilder-widget](https://github.com/MrGaoGang/lucky_tools/blob/master/packages/vue-cli-plugin-uibuilder-widget)
 
 此工程主要记录一些日常工作中常用的 vscode 插件。
 
@@ -66,6 +66,5 @@ mendix create your-project
 > [oview](https://github.com/MrGaoGang/oview) is a mobile chart library!
 
 ### 5. react-native-file-hash-plugin
-[react-native-file-hash-plugin](https://github.com/MrGaoGang/react-native-file-hash-plugin)  create file hash in react-native!
-
 
+[react-native-file-hash-plugin](https://github.com/MrGaoGang/react-native-file-hash-plugin) create file hash in react-native!
diff --git a/packages/vscode-react-typescript-snippet/README.md b/packages/vscode-react-typescript-snippet/README.md
@@ -16,31 +16,31 @@
 
 |       Trigger | Content                                      |
 | ------------: | -------------------------------------------- |
-|      `tsrcc→` | `react 类式组件`                             |
-|   `tsrcstate` | `包含Props, State, 和 constructor的类式组件` |
-|     `tsrpcc→` | `react PureComponent组件`                    |
-|      `tsrpfc` | `react 函数式组件`                           |
-|     `tsdrpfc` | `拥有default export的函数式react组件`        |
-|       `tsrfc` | `无状态的函数式react组件`             |
-|       `conc→` | `react constructor 方法`                      |
-|        `cwm→` | `componentWillMount 方法`                    |
-|        `ren→` | `render 方法`                                |
-|        `cdm→` | `componentDidMount 方法`                     |
-|       `cwrp→` | `componentWillReceiveProps 方法`             |
-|        `scu→` | `shouldComponentUpdate 方法`                 |
-|        `cwu→` | `componentWillUpdate 方法`                   |
-|        `cdu→` | `componentDidUpdate 方法`                    |
-|       `cwum→` | `componentWillUnmount 方法`                  |
-|        `sst→` | `this.setState生成`                          |
-|        `bnd→` | `绑定语句`                                   |
-|        `met→` | `创建一个方法`                               |
-|   `tscredux→` | `创建一个类式的redux，包含connect`           |
-| `tsrfredux->` | `创建一个函数式的redux，包含connect`         |
+|      `tslrcc→` | `react 类式组件`                             |
+|   `tslrcstate` | `包含Props, State, 和 constructor的类式组件` |
+|     `tslrpcc→` | `react PureComponent组件`                    |
+|      `tslrpfc` | `react 函数式组件`                           |
+|     `tsldrpfc` | `拥有default export的函数式react组件`        |
+|       `tslrfc` | `无状态的函数式react组件`             |
+|       `tslconc→` | `react constructor 方法`                      |
+|        `tslcwm→` | `componentWillMount 方法`                    |
+|        `tslren→` | `render 方法`                                |
+|        `tslcdm→` | `componentDidMount 方法`                     |
+|       `tslcwrp→` | `componentWillReceiveProps 方法`             |
+|        `tslscu→` | `shouldComponentUpdate 方法`                 |
+|        `tslcwu→` | `componentWillUpdate 方法`                   |
+|        `tslcdu→` | `componentDidUpdate 方法`                    |
+|       `tslcwum→` | `componentWillUnmount 方法`                  |
+|        `tslsst→` | `this.setState生成`                          |
+|        `tslbnd→` | `绑定语句`                                   |
+|        `tslmet→` | `创建一个方法`                               |
+|   `tslcredux→` | `创建一个类式的redux，包含connect`           |
+| `tslrfredux->` | `创建一个函数式的redux，包含connect`         |
 |         `imt` | `生成一个import语句`                         |
 
 ### state 相关
 
-**tsrcstate**
+**tslrcstate**
 
 ```js
 import * as React from "react";
@@ -56,15 +56,15 @@ export default class App extends React.Component<IAppProps, IAppState> {
     this.state = {};
   }
 
-  render() {
+  public render() {
     return <div></div>;
   }
 }
 ```
 
 ### functional 相关
 
-**tsrfc**
+**tslrfc**
 
 ```js
 import * as React from "react";
@@ -80,7 +80,7 @@ export default App;
 
 ### redux 相关
 
-**tsrcredux**
+**tslrcredux**
 
 ```js
 import * as React from "react";
@@ -96,7 +96,7 @@ export type ReduxType = ReturnType<typeof mapStateToProps> &
   IAppProps;
 
 class App extends React.Component<ReduxType> {
-  render() {
+  public render() {
     return <div></div>;
   }
 }
@@ -111,7 +111,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
 export default connect(mapStateToProps, mapDispatchToProps)(App);
 ```
 
-**tsrfredux**
+**tslrfredux**
 
 ```js
 import * as React from "react";
@@ -140,7 +140,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
 export default connect(mapStateToProps, mapDispatchToProps)(App);
 ```
 
-**tsrpfc**
+**tslrpfc**
 
 ```js
 import * as React from "react";

diff --git a/packages/vscode-react-typescript-snippet/package.json b/packages/vscode-react-typescript-snippet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vscode-react-typescript-snippet",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Recent Code snippets for react in typescript",
   "displayName": "React code snippets Typescript",
   "publisher": "mrgaogang",

diff --git a/packages/vscode-react-typescript-snippet/snippets/snippets.json b/packages/vscode-react-typescript-snippet/snippets/snippets.json
@@ -1,6 +1,6 @@
 {
-  "React Component": {
-    "prefix": "tsrcc",
+  "Luckly React Component": {
+    "prefix": "tslrcc",
     "body": [
       "import * as React from 'react';",
       "",
@@ -20,8 +20,8 @@
     ],
     "description": "Lucky tools React Component with typescript."
   },
-  "React Component - Full": {
-    "prefix": "tsrcstate",
+  "Luckly React Component - Full": {
+    "prefix": "tslrcstate",
     "body": [
       "import * as React from 'react';",
       "",
@@ -52,8 +52,8 @@
     "description": "Lucky tools Create a stateful React Component with typescript with Props, State, and a constructor."
   },
 
-  "React PureComponent": {
-    "prefix": "tsrpcc",
+  "Luckly React PureComponent": {
+    "prefix": "tslrpcc",
     "body": [
       "import * as React from 'react';",
       "",
@@ -74,8 +74,8 @@
     "description": "Lucky tools Create a React PureComponent."
   },
 
-  "React Pure Function Component": {
-    "prefix": "tsrpfc",
+  "Luckly React Pure Function Component": {
+    "prefix": "tslrpfc",
     "body": [
       "import * as React from 'react';",
       "",
@@ -93,8 +93,8 @@
     ],
     "description": "Lucky tools Create a React Pure Function Component."
   },
-  "Export Default React Pure Function Component": {
-    "prefix": "tsdrpfc",
+  "Luckly Export Default React Pure Function Component": {
+    "prefix": "tsldrpfc",
     "body": [
       "import * as React from 'react';",
       "",
@@ -112,8 +112,8 @@
     ],
     "description": "Lucky tools Create a default-exported React Pure Function Component."
   },
-  "React Functional Component": {
-    "prefix": "tsrfc",
+  "Luckly React Functional Component": {
+    "prefix": "tslrfc",
     "body": [
       "import * as React from 'react';",
       "",
@@ -129,80 +129,80 @@
     ],
     "description": "Lucky tools Create a React Functional Component."
   },
-  "constructor": {
-    "prefix": "conc",
-    "body": ["constructor(props) {", "  super(props);", "  ${1:}", "}"],
+  "Luckly constructor": {
+    "prefix": "tslconc",
+    "body": ["public constructor(props) {", "  super(props);", "  ${1:}", "}"],
     "description": "Lucky tools  Add a constructor in class."
   },
-  "componentWillMount": {
-    "prefix": "cwm",
-    "body": ["componentWillMount() {", "  ${1:}", "}"],
+  "Luckly componentWillMount": {
+    "prefix": "tslcwm",
+    "body": ["public componentWillMount(): void {", "  ${1:}", "}"],
     "description": "Lucky tools  Invoked immediately before mounting occurs. It is called before render()."
   },
-  "render": {
-    "prefix": "ren",
-    "body": ["render() {", "  return (", "    ${1:}", "  );", "}"],
+  "Luckly render": {
+    "prefix": "tslren",
+    "body": ["public render() {", "  return (", "    ${1:}", "  );", "}"],
     "description": "Lucky tools  When called, it should examine this.props and this.state and return a single React element."
   },
-  "componentDidMount": {
-    "prefix": "cdm",
-    "body": ["componentDidMount() {", "  ${1:}", "}"],
+  "Luckly componentDidMount": {
+    "prefix": "tslcdm",
+    "body": ["public componentDidMount(): void{", "  ${1:}", "}"],
     "description": "Lucky tools  Invoked immediately after a component is mounted."
   },
-  "componentWillReceiveProps": {
-    "prefix": "cwrp",
-    "body": ["componentWillReceiveProps(nextProps: ${1:}) {", "  ${2:}", "}"],
+  "Luckly componentWillReceiveProps": {
+    "prefix": "tslcwrp",
+    "body": ["public componentWillReceiveProps(nextProps: ${1:}): void {", "  ${2:}", "}"],
     "description": "Lucky tools  Invoked before a mounted component receives new props."
   },
-  "shouldComponentUpdate": {
-    "prefix": "scu",
+  "Luckly shouldComponentUpdate": {
+    "prefix": "tslscu",
     "body": [
-      "shouldComponentUpdate(nextProps: ${1:}, nextState) {",
+      "public shouldComponentUpdate(nextProps: ${1:}, nextState): void {",
       "  ${2:}",
       "}"
     ],
     "description": "Lucky tools  Invoked before rendering when new props or state are being received."
   },
-  "componentWillUpdate": {
-    "prefix": "cwu",
+  "Luckly componentWillUpdate": {
+    "prefix": "tslcwu",
     "body": [
-      "componentWillUpdate(nextProps: ${1:}, nextState) {",
+      "public componentWillUpdate(nextProps: ${1:}, nextState): void {",
       "  ${2:}",
       "}"
     ],
     "description": "Lucky tools  Invoked immediately before rendering when new props or state are being received."
   },
-  "componentDidUpdate": {
-    "prefix": "cdu",
+  "Luckly componentDidUpdate": {
+    "prefix": "tslcdu",
     "body": [
-      "componentDidUpdate(prevProps: ${1:}, prevState) {",
+      "public componentDidUpdate(prevProps: ${1:}, prevState): void {",
       "  ${2:}",
       "}"
     ],
     "description": "Lucky tools  Invoked immediately after updating occurs. This method is not called for the initial render"
   },
-  "componentWillUnmount": {
-    "prefix": "cwum",
-    "body": ["componentWillUnmount() {", "  ${1:}", "}"],
+  "Luckly componentWillUnmount": {
+    "prefix": "tslcwum",
+    "body": ["public componentWillUnmount(): void {", "  ${1:}", "}"],
     "description": "Lucky tools Invoked immediately before a component is unmounted and destroyed"
   },
-  "componentSetState": {
-    "prefix": "sst",
+  "Luckly componentSetState": {
+    "prefix": "tslsst",
     "body": ["this.setState(${1:});"],
     "description": "Lucky tools Performs a shallow merge of nextState into current state"
   },
-  "bind method": {
-    "prefix": "bnd",
+  "Luckly bind method": {
+    "prefix": "tslbnd",
     "body": ["this.${1:} = this.${1:}.bind(this);"],
     "description": "Lucky tools  bind this in method"
   },
-  "method": {
-    "prefix": "met",
+  "Luckly method": {
+    "prefix": "tslmet",
     "body": ["${1:methodName} = (${2:e}) => {", "  ${3:}", "}"],
     "description": "Lucky tools  Create a method"
   },
-  "React redux container": {
-    "prefix": "tsrcredux",
+  "Luckly React redux container": {
+    "prefix": "tslrcredux",
     "body": [
       "import * as React from 'react';",
       "import { connect } from 'react-redux'",
@@ -239,13 +239,12 @@
     ],
     "description": "Lucky tools React Redux container"
   },
-  "React redux function container": {
-    "prefix": "tsrfredux",
+  "Luckly React redux function container": {
+    "prefix": "tslrfredux",
     "body": [
       "import * as React from 'react';",
       "import { connect } from 'react-redux'",
       "import { Dispatch } from 'redux'",
-      "// you can define global interface ConnectState in @/state/connect.d",
       "import { ConnectState } from '@/state/connect.d';",
       "",
       "export interface I${1:App}Props {$2",
@@ -271,8 +270,8 @@
     ],
     "description": "Lucky tools React Redux function container"
   },
-  "import": {
-    "prefix": "imt",
+  "Luckly import": {
+    "prefix": "tslimt",
     "body": ["import { $2 } from '$1';"],
     "description": "Create a import"
   }

diff --git a/packages/vscode-react-typescript-snippet/vscode-react-typescript-snippet-1.0.8.vsix b/packages/vscode-react-typescript-snippet/vscode-react-typescript-snippet-1.0.8.vsix