Composer

Simplify your project setup with a single command.

By using Composer, you can easily set up the following items:

NOTE: Items are ordered by the software development lifecycle stages they are associated with. You may click on the links to learn more about each item.

• EditorConfig
• TypeScript
• ESLint
• Prettier
• husky
• commitlint
• gitignore
• Release It
• Docker

Table of Contents

• Prerequisites
• Installation
• Usage
• Customization
  • TypeScript
  • ESLint
  • Prettier
  • husky
  • Git
  • Release It
  • Docker

Prerequisites

Environment Requirements:

• Node.js >= 16.20.0
• npm >= 8.19.0

Project Requirements:

• package.json (REQUIRED)
• The directory is a git repository (REQUIRED if you want to set up husky and commitlint)

NOTE: You may either initialize a new git repository with git init or clone an existing one

Installation

Install the package as a dev dependency:

NPM

1$ npm install -D @gtomato-web/composer

Yarn

1$ yarn add -D @gtomato-web/composer

Usage

Add scripts to package.json

1. Add the following scripts to your package.json:

// package.json
{
  //  ...
  "scripts": {
    "compose": "composer"
  }
  //  ...
}

2. Run the following command to start the Composer:

NPM

1$ npm run compose

Yarn

1$ yarn compose

3. Follow the instructions to set up your project:

There are 2 types of controls in Composer:

NOTE: Both List and Checkbox can loop through the options by just pressing one of the arrow keys (↑/↓).

List

1. Use arrow keys (↑/↓) to navigate
2. Press Enter to select

Checkbox

1. Use arrow keys (↑/↓) to navigate
2. Press Space to ◉ check / ◯ uncheck
3. Press Enter to proceed

Customization

TypeScript

tsconfig.json

After setting up Typescript with Composer, please revisit your tsconfig.json file and ensure the following:

Options	Related Options	Can remove when...	Explain
exclude include	-	N/A	Correctly define which files are considered during compilation
declaration	-	N/A	TypeScript will generate type definitions(.d.ts) files to declarationDir
└	declarationDir	declaration=false or declarationDir=outDir	Define where to put the type definitions(.d.ts) files
└	declarationMap	declaration=false	TypeScript will generate source map files (.js.map) files to declarationDir
noEmit	-	N/A	Set it to true for exclusive type checking
└	outDir	noEmit=true	Define where to put .js (as well as .d.ts, .js.map, etc.) files
rootDir	-	N/A	Specifies the root directory of your TypeScript source files

You may also update other options to suit your needs. Read TSConfig Reference for more information.

---

ESLint

Scripts

You may update the scripts under the ESLint section in package.json to suit your needs. Read Command Line Interface Reference for more information.

.eslintrc

After setting up ESLint with Composer, please revisit your .eslintrc file and ensure the following:

Options	Explain
extends	Extend any preset configuration file(s) if you need
rules	Modify rules for your project, to switch rules on/off according to your practice

You may also update other options to suit your needs. Read Configure ESLint for more information.

.eslintignore

You can tell ESLint to ignore specific files and directories. Read The .eslintignore File for more information.

---

Prettier

Scripts

You may update the scripts under the Prettier section in package.json to suit your needs. Read Prettier CLI for more information.

.prettierignore

You can tell Prettier to ignore specific files and directories. Read Ignoring Files: .prettierignore for more information.

---

husky

Create a hook

After setting up husky with Composer, Composer already took care of the commit-msg hook for you, you can add more action within, or you may create your own hook by following the steps in Create a hook

---

Git

.gitignore

You can tell Git to ignore specific files and directories. Read .gitignore Documentation for more information.

---

Release It

.release-it.json

After setting up Release It with Composer, you may revisit your .release-it.json file and config github, gitlab, and npm sections to set up your release process. Read Release It Options for more information.

---

Docker

Dockerfile

As Composer won't know how you want to build your Docker image, you may need to set up your own Dockerfile. Read Dockerfile format for more information.

compose.yaml

As Composer won't know how you want to build your Docker image, you may need to set up your own compose.yaml. Read The Compose file for more information.

.dockerignore

You can tell Docker to ignore specific files and directories. Read .dockerignore file for more information.

---

^ Back to top