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

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.