@co-it/schematics

Automated & opinionated setup for large scaled Angular applications

Usage no npm install needed!

<script type="module">
  import coItSchematics from 'https://cdn.skypack.dev/@co-it/schematics';
</script>

README

Build Status npm-version

@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:

ng generate @co-it/schematics:name [options]

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 optionally
configure 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 configure
a pre-push hook using husky.		 details
ng g @co-it/schematics:prettier Set up prettier and optionally configure
a 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
Example scenarios
  • Enable all strict compiler options: ng g @co-it/schematics:tsconfig --no-interactive
Resulting changes in workspace
  • Configures the compilerOptions parameters in tsconfig.json.

@co-it/schematics is internally used and maintained by co-IT.eu GmbH.

Orange co-IT.eu GmbH Logo