Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden-VSCode-php.cn

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

青灯夜游

Freigeben： 2020-09-04 10:24:08

nach vorne

6187 Leute haben es durchsucht

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

Da sich das Projektteam kürzlich auf die Migration von javascript zu typescript vorbereitet, sind einige Typdefinitionen und -Codes enthalten Der Prozess der Verwendung von ts-Fragmenten wird dupliziert, also zwei vscodejavascript迁移到typescript；在使用ts过程中有部分类型定义及代码片段有重复；所以编写了两个 vscode插件；如有需要可以查阅。【推荐：vscode基础教程】

tools1: JSON转换成typescript的interface

特色

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

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

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

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

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

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

下载

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

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

tools2: vscode-react-typescript-snippet

使用ts编写react代码片段。

下载

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

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

支持文件

TypeScript (.ts)
TypeScript React (.tsx)

代码片段

]

tools1: Konvertieren Sie JSON in Schnittstelle des Typoskripts

Funktionen

1. Konvertieren Sie die JSON-Daten der Zwischenablage in interface (Windows: Strg + Alt+ C , Mac: ^+?+C)

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语句` Plugins wurden geschrieben; Sie können es bei Bedarf überprüfen. [Empfohlen: Vscode Basic Tutorial

2. Wählen Sie JSON-Daten aus, die in interface konvertiert werden sollen (Windows: Strg+Alt+S , Mac: <code>^+?+S) Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

3. Konvertieren Sie die JSON-Datei in `interface` (Windows: `Strg+Alt+F` , Mac: `^+?+F`)

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

Herunterladen

Das obige Geschenk-Bild kann möglicherweise schneller abgespielt werden: Öffnen Sie das vscode-Plug-in und suchen Sie nach json to ts

tools2: vscode-react-typescript-snippet

Verwenden Sie ts, um react-Codefragmente zu schreiben.

Herunterladen

Öffnen Sie das vscode-Plug-in und suchen Sie nach vscode-react-typescript-snippet.

Zwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden

Unterstützende Dateien h3>

TypeScript (.ts)

TypeScript React (.tsx)

Code-Snippet li>

Trigger	Content
`tsrcc→`	`React-Class-Komponente`
`tsrcstate`	`Klassenkomponente mit Requisiten, Status und Konstruktor`
`tsrpcc→`	`React PureComponent`
`tsrpfc`🎜	`React Functional Component`🎜 🎜
`tsdrpfc`🎜	`Funktionale Reaktionskomponente mit Standardexport`🎜🎜
`tsrfc`🎜	`Zustandslose funktionale Reaktionskomponente`🎜🎜
`conc→`🎜	react-Konstruktor-Methode🎜🎜
`cwm→`🎜	`componentWillMount-Methode`🎜🎜
`render method`🎜🎜
`cdm→ code >🎜<td> <code>componentDidMount-Methode`🎜🎜
`cwrp→`🎜	`componentWillReceiveProps-Methode` 🎜 🎜
`scu→`🎜	`shouldComponentUpdate-Methode`🎜🎜
`cwu→`🎜	`componentWillUpdate-Methode`🎜🎜
`cdu→`🎜	`componentDidUpdate-Methode` 🎜🎜
`cwum→`🎜	`componentWillUnmount-Methode`🎜🎜
`sst→`🎜	`this.setState generiert`🎜🎜
`bnd→`🎜 `Bind-Anweisung`🎜🎜
`met→`🎜	`Erstellen Sie eine Methode`🎜 🎜	`tscredux→`🎜	`Erstellen Sie einen Klassenredux, einschließlich connect`🎜🎜
`tsrfredux->`🎜	`Erstellen Sie einen funktionalen Redux, einschließlich Connect`🎜🎜
`imt` 🎜	`Generieren Sie eine Importanweisung`🎜🎜🎜🎜🎜zustandsbezogen🎜🎜🎜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>; } } Nach dem Login kopieren 🎜funktionsbezogen🎜🎜🎜tsrfc🎜🎜 import * as React from "react"; interface IAppProps {} const App: React.FC<IAppProps> = (props) => { return <div></div>; }; export default App; Nach dem Login kopieren 🎜reduxbezogen🎜 🎜 🎜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); Nach dem Login kopieren 🎜 🎜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); Nach dem Login kopieren 🎜🎜tsrpfc🎜🎜 import * as React from "react"; export interface IAppProps {} export function App(props: IAppProps) { return <div></div>; } Nach dem Login kopieren 🎜Verwandte Empfehlungen: 🎜Programmierunterricht🎜! ! 🎜

h3>ren→🎜

Trigger Content

tsrcc→ React-Class-Komponente
tsrcstate Klassenkomponente mit Requisiten, Status und Konstruktor

tsrpcc→ React PureComponent

tsrpfc🎜 React Functional Component🎜 🎜

tsdrpfc🎜 Funktionale Reaktionskomponente mit Standardexport🎜🎜

tsrfc🎜 Zustandslose funktionale Reaktionskomponente🎜🎜

conc→🎜 react-Konstruktor-Methode🎜🎜

cwm→🎜 componentWillMount-Methode🎜🎜

render method🎜🎜

cdm→ code >🎜<td> <code>componentDidMount-Methode🎜🎜
cwrp→🎜 componentWillReceiveProps-Methode 🎜 🎜

scu→🎜 shouldComponentUpdate-Methode🎜🎜

cwu→🎜 componentWillUpdate-Methode🎜🎜

cdu→🎜 componentDidUpdate-Methode 🎜🎜

cwum→🎜 componentWillUnmount-Methode🎜🎜

sst→🎜 this.setState generiert🎜🎜

bnd→🎜 Bind-Anweisung🎜🎜

met→🎜 Erstellen Sie eine Methode🎜 🎜 tscredux→🎜 Erstellen Sie einen Klassenredux, einschließlich connect🎜🎜

tsrfredux->🎜 Erstellen Sie einen funktionalen Redux, einschließlich Connect🎜🎜

imt 🎜 Generieren Sie eine Importanweisung🎜🎜🎜🎜🎜zustandsbezogen🎜🎜🎜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>; } }
Nach dem Login kopieren
🎜funktionsbezogen🎜🎜🎜tsrfc🎜🎜
import * as React from "react"; interface IAppProps {} const App: React.FC<IAppProps> = (props) => { return <div></div>; }; export default App;
Nach dem Login kopieren
🎜reduxbezogen🎜 🎜 🎜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);
Nach dem Login kopieren
🎜 🎜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);
Nach dem Login kopieren
🎜🎜tsrpfc🎜🎜
import * as React from "react"; export interface IAppProps {} export function App(props: IAppProps) { return <div></div>; }
Nach dem Login kopieren
🎜Verwandte Empfehlungen: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonZwei nützliche Plug-Ins, die zum Schreiben von Typoskript in vscode empfohlen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!