@co-it/schematics NPM

@co-it/schematics

This collection of commands allow you to quickly enhance the quality of your Angular project. You can activate automatic code formatting instrumenting prettier, lint commit messages using commitlint and prevent runtime errors in advance leveraging TypeScript's compiler options.

Furthermore, you can set up jest & cypress. Now, these tools are installed and configured automatically for you.

Installation & Usage

To install @co-it/schematics globally, run the following command:

npm install --global @co-it/schematics

Then you can execute a schematic in your Angular project by running the following command in your project's root folder:

You can find all available values for name in the following overview.

Overview

Command	Description
`ng g @co-it/schematics:commitlint`	Set up commitlint and optionallyconfigure a commit hook using husky.	details
`ng g @co-it/schematics:cypress`	Set up cypress using @nrwl/builders.	details
`ng g @co-it/schematics:jest`	Set up jest and optionally configurea pre-push hook using husky.	details
`ng g @co-it/schematics:prettier`	Set up prettier and optionally configurea commit hook using husky.	details
`ng g @co-it/schematics:tsconfig`	Activate Typescript's strict compiler options.	details

Details

➡️ @co-it/schematics:commitlint

Set up commitlint and configure a commit hook using husky.

Parameters

None.

Resulting changes in workspace

Installs npm packages @commitlint/cli, @commitlint/config-conventional and husky as dev dependencies
Creates commitlint configuration in commitlint.config.js
Configures husky commit-msg hook in .huskyrc

➡️ @co-it/schematics:cypress

Set up cypress using @nrwl/builders.

Parameters

Name	Description	Default
`app`	Name of the application under test as defined in angular.json.	Default project according to angular.json.
`overwrite`	Overwrite existing e2e folder?	false

Example scenarios

Replace existing Protractor e2e tests for default project: ng g @co-it/schematics:cypress --overwrite=true --no-interactive
Replace existing Protractor e2e tests for project my-app: ng g @co-it/schematics:cypress --app=my-app --overwrite=true --no-interactive

Resulting changes in workspace

Installs npm packages cypress and @nrwl/builders as dev dependencies
Creates e2e app named "appname-e2e"
- Deletes existing content if --overwrite is set to true
- Creates cypress configuration and example test
Adds npm scripts:
- "cy:open": "cypress open"
- "cy:run": "cypress run"
Configures the e2e project in angular.json using @nrwl/builders

Cypress usage

After running this schematic, you can use ng e2e to run cypress tests.

Run cypress in watch mode:

ng e2e --watch

Run cypress in headless mode (e.g. on a CI server):

ng e2e --headless

See the Nrwl documentation for details about all available options.

➡️ @co-it/schematics:jest

Set up jest and optionally configure a pre-push hook using husky.

Parameters

Name	Description	Default
`hook`	Enable push hook to run all test before push.	true

Example scenarios

Replace existing Karma/Jasmine configuration for default project by Jest and install pre-push hook: ng g @co-it/schematics:jest --no-interactive

Resulting changes in workspace

Installs npm packages jest, jest-preset-angular, @types/jest and husky as dev dependencies
Replaces existing karma configuration with jest configuration
Configures husky pre-push hook in .huskyrc
adds jest types to ts.config.spec.json
Adds npm scripts:
- "test": "jest"
- "test:watch": "jest --watch"

➡️ @co-it/schematics:prettier

Set up prettier and optionally configure a commit hook using husky.

Parameters

Name	Description	Default
`hook`	Enable commit hook formatting & linting staged files with prettier and tslint.	true

Example scenarios

Install Prettier with pre-commit hook: ng g @co-it/schematics:prettier --no-interactive

Resulting changes in workspace

Installs npm packages prettier, tslint-config-prettier, pretty-quick, lint-staged and husky as dev dependencies
Configures prettier in .prettierrc
Configures lint-staged in .lintstagedrc
Updates tslint.json to be compatible with prettier configuration
Configures husky pre-commit hook in .huskyrc
Adds npm scripts:
- "format": "prettier --write \"**/*.{js,json,css,scss,md,ts,html}\""

➡️ @co-it/schematics:tsconfig

Activate Typescript's strict compiler options.

Parameters

Name	Description	Default
`strict`	Enable typescript's strict mode	true
`noUnusedParameters`	Detect unused parameters	true
`noUnusedLocals`	Detect unused locals	true
`noImplicitAny`	Detect usage of implicit any	true