🧩 VSCode Extension

🧩 VSCode Extension

This is a VSCode extension that consists of a set of commands to use with a T4 App (opens in a new tab) template instance.

πŸ“¦ Install

The T4 App Tools extension is available on the Visual Studio Code Marketplace (opens in a new tab).

πŸ“– Usage

πŸ“± New Screen

Input the new screen name in CapitalizedCamelCase (i.e. the name that you would have used for the screen component). Subsequently this command will generate a new screen.tsx file under the directory packages/app/features/{ScreenName}, add a new index.tsx under apps/expo/app/{ScreenName}.tsx and add a new index.tsx under apps/next/pages/{ScreenName}.tsx importing your new screen in Nextjs. After that it will open the new screen.tsx file for you to modify.

πŸ–¨ New Component

Input the new component name in CapitalizedCamelCase. Subsequently this command will generate a new component under the packages/ui/src/components folder. After that it will open the new {ComponentName}.tsx file for you to modify.

βš™ New API Route

Input the new API route name in lowercaseCamelCase. Subsequently this command will generate a new router in the packages/api/src/routes folder and add that to the index.ts router. After that it will open the new {routeName.ts} file for you to modify.

πŸ”¨ Building

To build the extension follow theses steps:

  1. Head over to .vscode/settings.json and uncomment the first line:
"terminal.integrated.defaultProfile.windows": null,

This will ensure that VSCode uses the correct terminal to run the build script.

  1. Execute the Run T4 App Tools Extension script from the Run and Debug tab in VSCode.