lukasbach/intellij-ts-react-livetemplatesPublic

NotificationsYou must be signed in to change notification settings
Fork14
Star51

Live Templates for Typescript and React

plugins.jetbrains.com/plugin/16796-live-templates-for-typescript-and-react

51 stars 14 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 51 Commits
.github/workflows		.github/workflows
.idea		.idea
gradle/wrapper		gradle/wrapper
scripts		scripts
src/main/resources		src/main/resources
.gitignore		.gitignore
build.gradle		build.gradle
gradlew		gradlew
gradlew.bat		gradlew.bat
plugin.template.xml		plugin.template.xml
readme.md		readme.md
readme.template.md		readme.template.md
settings.gradle		settings.gradle

Repository files navigation

IntelliJ Live Templates for TypeScript and React

Live templates for TypeScript and typed React code, for IntelliJ IDEA,WebStorm, PHPStorm and other JetBrains IDEs. With sensible variableexpressions and useful skeleton templates.

Supported templates:

uses:React.useState()
usee:React.useEffect()
useh:React use Hook
rfc:React Functional Component
rfct:React typed Functional Component
rfr:React forward Ref
int:TypeScript Interface
type:TypeScript Type
arr:Anonymous arrow function
el:JSX element
rcctx:React create new Context with type, hook and provider
ifs:import fs
ipath:import path
funarr:Arrow function variable
fun:Function
asyncarr:Async anonymous arrow function
prom:New Promise
timeout:setTimeout
interval:setInterval
usem:React.useMemo()
usec:React.useCallback()

If the library benefits, you can consider supporting it bysponsoring me.

Template code

React.useState()

Invoked viauses.

const [$VAR$, set$VAR_SET$] = useState($DEFAULT_VAL$);$END$

Variables:

Name	Expression	Skip if defined
`VAR`	`-`	false
`VAR_SET`	`capitalize(VAR)`	false
`DEFAULT_VAL`	`-`	false

React.useEffect()

Invoked viausee.

useEffect(() => {    $END$}, [$1$]);

Variables:

Name	Expression	Default Value	Skip if defined
`1`	`-`		false

React use Hook

Invoked viauseh.

const $3$ = use$1$($2$);$END$

Variables:

Name	Expression	Default Value	Skip if defined
`1`	`completeSmart()`		false
`2`	`completeSmart()`	{}	false
`3`	`-`		false

React Functional Component

Invoked viarfc.

export const $1$: React.FC<{$2$}> = props => {    return (        <$3$>            $END$        </$3$>    );};

Variables:

Name	Expression	Skip if defined
`1`	`-`	false
`2`	`-`	false
`3`	`-`	false

React typed Functional Component

Invoked viarfct.

export const $1$ = <$2$>(props: PropsWithChildren<$3$>) => {    return (        <$4$>            $END$        </$4$>    );};

Variables:

Name	Expression	Skip if defined
`1`	`-`	false
`2`	`-`	false
`3`	`-`	false
`4`	`-`	false

React forward Ref

Invoked viarfr.

export const $COMP$ = React.forwardRef<HTML$ELEMENT_TYPE$ | null, $PROPS$>((props, ref) => {    const elementRef = useRef<HTML$ELEMENT_TYPE$>(null);    useImperativeHandle<HTML$ELEMENT_TYPE$ | null, HTML$ELEMENT_TYPE$ | null>(        ref,        () => elementRef.current && {            ...elementRef.current,        },    );    $END$    return (        <$INNER_COMP$ ref={elementRef} />    );});

Variables:

Name	Expression	Default Value	Skip if defined
`COMP`	`-`		false
`ELEMENT_TYPE`	`completeSmart()`		false
`PROPS`	`-`	{}	false
`INNER_COMP`	`completeSmart()`		false

TypeScript Interface

Invoked viaint.

export interface $1$ {    $END$}

Variables:

Name	Expression	Default Value	Skip if defined
`1`	`-`		false

TypeScript Type

Invoked viatype.

export type $1$ = {    $END$}

Variables:

Name	Expression	Default Value	Skip if defined
`1`	`-`		false

Anonymous arrow function

Invoked viaarr.

($1$) => $2$

Variables:

Name	Expression	Default Value	Skip if defined
`1`	`-`		false
`2`	`-`		false

JSX element

Invoked viael.

<$ELEMENT$PROPS$>    $END$</$ELEMENT$>

Variables:

Name	Expression	Default Value	Skip if defined
`ELEMENT`	`-`	div	false
`PROPS`	`-`		false

React create new Context with type, hook and provider

Invoked viarcctx.

type $CONTEXT_NAME_TYPE$ContextType = {    $END$};const $CONTEXT_NAME$Context = React.createContext<$CONTEXT_NAME$ContextType>($DEFAULT_VALUE$);export const use$CONTEXT_NAME_HOOK$ = () => React.useContext($CONTEXT_NAME$Context);export const $CONTEXT_NAME_PROVIDER$Provider: React.FC = props => {    return (        <$CONTEXT_NAME$Context.Provider value={$VAL$}>            {props.children}        </$CONTEXT_NAME$Context.Provider>    );};

Variables:

Name	Expression	Default Value	Skip if defined
`CONTEXT_NAME`	`-`		false
`CONTEXT_NAME_TYPE`	`CONTEXT_NAME`		false
`DEFAULT_VALUE`	`-`	{}	false
`CONTEXT_NAME_HOOK`	`capitalize(CONTEXT_NAME)`		false
`CONTEXT_NAME_PROVIDER`	`capitalize(CONTEXT_NAME)`		false
`VAL`	`-`	{}	false

import fs

Invoked viaifs.

import fs from 'fs';

import path

Invoked viaipath.

import path from 'path';

Arrow function variable

Invoked viafunarr.

const $VAR_NAME$ = ($PARAM$) => $END$;

Variables:

Name	Expression	Default Value	Skip if defined
`VAR_NAME`	`jsSuggestVariableName()`		false
`PARAM`	`-`		false

Function

Invoked viafun.

function $FUNCTION_NAME$($PARAM$) {    $END$}

Variables:

Name	Expression	Default Value	Skip if defined
`FUNCTION_NAME`	`-`		false
`PARAM`	`-`		false

Async anonymous arrow function

Invoked viaasyncarr.

async ($1$) => $2$

Variables:

Name	Expression	Default Value	Skip if defined
`1`	`-`		false
`2`	`-`		false

New Promise

Invoked viaprom.

new Promise<$TYPE$((res, rej) => {    $END$});

Variables:

Name	Expression	Default Value	Skip if defined
`TYPE`	`-`	void	false

setTimeout

Invoked viatimeout.

setTimeout(() => $END$, $TIME$);

Variables:

Name	Expression	Default Value	Skip if defined
`TIME`	`completeSmart()`		false

setInterval

Invoked viainterval.

setInterval(() => $END$, $TIME$);

Variables:

Name	Expression	Default Value	Skip if defined
`TIME`	`completeSmart()`		false

React.useMemo()

Invoked viausem.

const $VAR$ = useMemo(() => $RETURN$, [$DEP$]);

Variables:

Name	Expression	Skip if defined
`RETURN`	`completeSmart()`	false
`DEP`	`completeSmart()`	false
`VAR`	`-`	false

React.useCallback()

Invoked viausec.

const $VAR$ = useCallback(() => $RETURN$, [$DEP$]);

Variables:

Name	Expression	Skip if defined
`RETURN`	`completeSmart()`	false
`DEP`	`completeSmart()`	false
`VAR`	`-`	false

Contributions

Feel free to contribute to existing or new templates with issues or pull requests.

To test if your changes are working, clone the repo and run the gradle scriptrunIde.

Do not update the documentation in the readme.md or plugin.xml files, they are updatedautomatically.

About

Live Templates for Typescript and React

plugins.jetbrains.com/plugin/16796-live-templates-for-typescript-and-react

Topics

react plugin typescript addon intellij jetbrains templates ide live

Resources

Readme

Code of conduct

Releases

No releases published

Sponsor this project

https://www.paypal.com/donate/?hosted_button_id=48D4X8HEP9JYE

Learn more about GitHub Sponsors

Packages

No packages published

Contributors3

Languages

TypeScript100.0%

Movatterモバイル変換

Uh oh!

lukasbach/intellij-ts-react-livetemplates

Folders and files

Latest commit

History

Repository files navigation

IntelliJ Live Templates for TypeScript and React

Template code

React.useState()

React.useEffect()

React use Hook

React Functional Component

React typed Functional Component

React forward Ref

TypeScript Interface

TypeScript Type

Anonymous arrow function

JSX element

React create new Context with type, hook and provider

import fs

import path

Arrow function variable

Function

Async anonymous arrow function

New Promise

setTimeout

setInterval

React.useMemo()

React.useCallback()

Contributions

About

Topics

Resources

Code of conduct

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages0

Uh oh!

Contributors3

Uh oh!

Languages

Packages