两个vscode中编写typescript的好用插件推荐-VSCode-PHP中文网

两个vscode中编写typescript的好用插件推荐

青灯夜游

发布： 2020-09-04 10:19:04

转载

6970人浏览过

两个vscode中编写typescript的好用插件推荐

由于项目组最近准备从javascript迁移到typescript；在使用ts过程中有部分类型定义及代码片段有重复；所以编写了两个vscode插件；如有需要可以查阅。【推荐：vscode基础教程】

tools1: JSON转换成typescript的interface

特色

1、从剪切板json数据转换成vscode (windows: interface , Mac : ctrl+alt+C )

2、选择json数据转换成^+?+C (windows: interface , Mac : ctrl+alt+S )

3、将json文件转换成^+?+S (windows: interface , Mac : ctrl+alt+F )

下载

上面的^+?+F图可能播放较快，有兴趣同学可以下载使用：打开gift并搜索vscode插件

两个vscode中编写typescript的好用插件推荐

tools2: vscode-react-typescript-snippet

使用json转ts编写ts代码片段。

Discuz插件制作教程[入门+精通+实战] 中文WORD版

插件机制Discuz! 拥有一套完整的插件机制。合理使用插件机制，你可以更好的将自己的个性功能需求整合到Discuz!产品中的同时，保持代码独立，并且不受后续Discuz!产品版本升级的影响。我们鼓励并推荐，使用插件机制进行个性需求定制和研发。感兴趣的朋友可以过来看看

查看详情

下载

打开react并搜索vscode插件即可。

两个vscode中编写typescript的好用插件推荐

支持文件

TypeScript (.ts)
TypeScript React (.tsx)

代码片段

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`
`imt`	`生成一个import语句`

state 相关

tsrcstate

import * as React from "react";

export interface IAppProps {}

export interface IAppState {}

export default class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props);

    this.state = {};
  }

  render() {
    return <div></div>;
  }
}

登录后复制

functional 相关

tsrfc

import * as React from "react";

interface IAppProps {}

const App: React.FC<IAppProps> = (props) => {
  return <div></div>;
};

export default App;

登录后复制

redux 相关

tsrcredux

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 IAppProps {}

export type ReduxType = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps> &
  IAppProps;

class App extends React.Component<ReduxType> {
  render() {
    return <div></div>;
  }
}

const mapStateToProps = (state: ConnectState) => {
  return {};
};
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

登录后复制

tsrfredux

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 IAppProps {}

export type ReduxType = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps> &
  IAppProps;

const App: React.FC<ReduxType> = (props) => {
  return <div></div>;
};

const mapStateToProps = (state: ConnectState) => {
  return {};
};
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

登录后复制

tsrpfc

import * as React from "react";

export interface IAppProps {}

export function App(props: IAppProps) {
  return <div></div>;
}

登录后复制

大家都在看：

VSCode设置同步详解_多设备开发环境无缝迁移 VSCode语言服务器协议_实现自定义编程语言支持 VSCode设置界面_自定义配置项与UI扩展 VSCode工作区信任机制_安全开发环境保障策略 VS Code代码片段：占位符转换与正则表达式使用