svenliebig / react-typescript-toolbox Goto Github PK

Helpful toolbox for React Web Applications with Typescript

TypeScript 100.00%

react-typescript-toolbox's Introduction

react-typescript-toolbox

Extension to create TypeScript React Components from Visual Studio Code explorer menu. Available in the VSCode Marketplace.

Features

Create React Components, Typescript Enums, Model Classes (or just ordinary classes), and index files by rightclicking in the context menu of the file explorer and generate it. The files are created with index export files, and the export will be appended to the root index, if it is present.

Tip: Rightclick in Visual Studio Code Explorer and > Generate Component. Tip: Use the settings.json to disable test generation or changing the stylesheet type.

Root Index Sort

If this feature is activated, your root index exports will be sorted if you have a structure like this:

// Models
export a from "./a"
export d from "./c"

// Components
export b from "./b"

// Utils
export c from "./c"

The comments represent layers, the extension will not sort between Components and Models exports for example. There is a selection menu after creating a file, so you can select to which layer the new export is appended.

Requirements

This extension has no dependencies to other extensions. Maybe node.js installed ist required!

Extension Settings

Available Settings:

reactTypeScriptToolbox.stylesheet: ('none' | 'less' | 'css' | 'sass')
reactTypeScriptToolbox.test: (true | false)
reactTypeScriptToolbox.regexCheck: (true | false)
reactTypeScriptToolbox.indentation: (tabs | spaces)
reactTypeScriptToolbox.sortIndex: (true | false)
reactTypeScriptToolbox.testFolder: (same | flat | structured)
reactTypeScriptToolbox.removeSemicolonsFromImportsOnSave (still experimental): (true | false)
reactTypeScriptToolbox.quotemarksString: double | single | back-tick
reactTypeScriptToolbox.quotemarksImportExport: double | single
reactTypeScriptToolbox.semicolons: true | false

Known Issues

Changelog

For more information

Github
Any ideas? Mail me: [email protected]

react-typescript-toolbox's People

Contributors

Stargazers

Watchers

Forkers

mrmanicou majklovec jefferymills tgrstack mak-elena garwin4j jeredian

react-typescript-toolbox's Issues

Typo in ComponentTest

There is a typo to the word "Enviroment" in the Component test template (src\Templates\ComponentTest\ComponentTest.ts). Can it please be updated to "Environment" please?

semicolon after props import children

newline after index.ts - layers

Implement setting to choose quotemark

The TSLint on our project is set up to allow single quotes only for strings, however the templates generate them with a double quote. Could this be implemented as a setting for the user to choose between a single and a double quote mark please?

Add functionality to edit aut-generated filenames

Try to use editor.tabSize to get number of spaces

The module always use 4 spaces but it woud be nice to use editor.tabSize so it is coherent on project using 2 spaces for example.

Path issue on generating component

I generate a component on "components" directory and

It creates a folder right outside components called "components\Contact"
It generates 2 files right outside components folder "components\Contact\Contact.tsx" and "components\Contact\index.tsx"

Assuming it tries to use the forward slash, it won't work on Linux systems like mine. Instead it should use /path/to/component and not \path\to\component. I haven't checked out your code, I will try to fix this but I'm not 100% sure I can.

Support more components types

It would be great to create other components types like FunctionComponent or StatelesFunction

import * as React from 'react'

interface IAppProps {}

const App: React.FunctionComponent<IAppProps> = props => {
    return
}

export default App

import * as React from 'react'

export interface IAppScreenProps {}

export function AppScreen(props: IAppScreenProps) {
    return <div></div>
}

Update template to have Props and State reflect Component name

I was wondering whether you would be able to include a feature which sets the

export interface Props {
}

export interface State {
}

generated parts of the template to reflect the component name, so it is easier to avoid naming conflicts.

I would expect a component of FilterBox to have:

export interface FilterBoxProps {
}

export interface FilterBoxState {
}

This could be a setting that could be toggled to prefix component name on state and props

Thanks,

Implement getSemicolon

Could get semicolon be implemented properly so that users can choose whether the code can generate a semicolon or not

I have a PR, but I couldn't push a new branch :/