TSLint rules for Ionic Angular v4 Migration
npm install @ionic/v4-migration-tslint[![Build Status][circle-badge]][circle-badge-url]
An effort to warn about and automatically fix syntax changes listed in BREAKING.md using tslint, codelyzer, and the Angular compiler.
We are looking for contributors to help build these rules out! See CONTRIBUTING.md to help out. :sparkling_heart:
1. Install the lint rules:
``
npm i -D @ionic/v4-migration-tslint
1. Add a file called ionic-migration.json at the root of your project and paste in the following JSON.
`json`
{
"rulesDirectory": ["@ionic/v4-migration-tslint/rules"],
"rules": {
"ion-action-sheet-method-create-parameters-renamed": true,
"ion-alert-method-create-parameters-renamed": true,
"ion-back-button-not-added-by-default": { "options": [true], "severity": "warning" },
"ion-button-attributes-renamed": true,
"ion-button-is-now-an-element": true,
"ion-buttons-attributes-renamed": true,
"ion-col-attributes-renamed": true,
"ion-datetime-capitalization-changed": true,
"ion-fab-attributes-renamed": true,
"ion-fab-button-is-now-an-element": true,
"ion-fab-fixed-content": true,
"ion-icon-attribute-is-active-removed": true,
"ion-item-attributes-renamed": true,
"ion-item-divider-ion-label-required": true,
"ion-item-ion-label-required": true,
"ion-item-is-now-an-element": true,
"ion-item-option-is-now-an-element": true,
"ion-item-option-method-get-sliding-percent-renamed": true,
"ion-item-options-attribute-values-renamed": true,
"ion-label-attributes-renamed": true,
"ion-list-header-ion-label-required": true,
"ion-loading-method-create-parameters-renamed": true,
"ion-menu-events-renamed": true,
"ion-menu-toggle-is-now-an-element": true,
"ion-navbar-is-now-ion-toolbar": true,
"ion-option-is-now-ion-select-option": true,
"ion-overlay-method-create-should-use-await": true,
"ion-overlay-method-present-should-use-await": true,
"ion-radio-attributes-renamed": true,
"ion-radio-group-is-now-an-element": true,
"ion-radio-slot-required": true,
"ion-range-attributes-renamed": true,
"ion-segment-button-ion-label-required": true,
"ion-spinner-attribute-values-renamed": true,
"ion-tabs-refactored": { "options": [true], "severity": "warning" },
"ion-text-is-now-an-element": true
}
}
1. Lint your project:
`bash`
npx tslint -c ionic-migration.json -p tsconfig.json
:memo: Hints:
- Run tslint with -t verbose to output the rule names of lint errors which correspond to the table of rules below.--fix
- Run tslint with to attempt automatic fixes (_note_: not all rules have fixes, and be sure to save a backup in version control before running with --fix)
:white_large_square: – These rules need to be completed! See CONTRIBUTING.md to get started.
:wrench: – These rules can be automatically fixed with --fix`.
| category | rule | contributors | ||
|---|---|---|---|---|
| Code Changes | ||||
Action Sheet | :wrench: | :white_check_mark: | ion-action-sheet-method-create-parameters-renamed | @cwoolum |
Alert | :wrench: | :white_check_mark: | ion-alert-method-create-parameters-renamed | @cwoolum |
Datetime | :wrench: | :white_check_mark: | ion-datetime-capitalization-changed | @mhartington |
Item Sliding | :wrench: | :white_check_mark: | ion-item-option-method-get-sliding-percent-renamed | @mhartington |
Loading | :wrench: | :white_check_mark: | ion-loading-method-create-parameters-renamed | @areo |
Nav | :white_large_square: | ion-nav-controller-method-remove-renamed | ||
Option | :white_large_square: | ion-option-class-renamed | ||
Overlays | :white_check_mark: | ion-overlay-method-create-should-use-await | @cwoolum | |
| :white_check_mark: | ion-overlay-method-present-should-use-await | @cwoolum | ||
| Markup Changes | ||||
Back Button | :white_check_mark: | ion-back-button-not-added-by-default | @dwieeb | |
Button | :wrench: | :white_check_mark: | ion-button-attributes-renamed | @cwoolum |
| :wrench: | :white_check_mark: | ion-button-is-now-an-element | @cwoolum, @j3gb3rt | |
FAB | :wrench: | :white_check_mark: | ion-fab-button-is-now-an-element | @dwieeb, @j3gb3rt |
| :wrench: | :white_check_mark: | ion-fab-attributes-renamed | @dwieeb | |
| :wrench: | :white_check_mark: | ion-fab-fixed-content | @dwieeb | |
Grid | :wrench: | :white_check_mark: | ion-col-attributes-renamed | @dwieeb |
Icon | :white_check_mark: | ion-icon-attribute-is-active-removed | @dwieeb | |
Item | :wrench: | :white_check_mark: | ion-item-is-now-an-element | @dwieeb, @j3gb3rt |
| :white_check_mark: | ion-item-ion-label-required | @dwieeb | ||
| :wrench: | :white_check_mark: | ion-item-attributes-renamed | @dwieeb | |
Item Divider | :white_check_mark: | ion-item-divider-ion-label-required | @dwieeb | |
Item Options | :wrench: | :white_check_mark: | ion-item-options-attribute-values-renamed | @dwieeb |
Item Sliding | :white_check_mark: | ion-item-option-is-now-an-element | @dwieeb | |
Label | :wrench: | :white_check_mark: | ion-label-attributes-renamed | @dwieeb |
List Header | :white_check_mark: | ion-list-header-ion-label-required | @dwieeb | |
Menu | :wrench: | :white_check_mark: | ion-menu-events-renamed | @mhartington |
Menu Toggle | :white_check_mark: | ion-menu-toggle-is-now-an-element | @dwieeb | |
Navbar | :wrench: | :white_check_mark: | ion-navbar-is-now-ion-toolbar | @cwoolum |
Option | :wrench: | :white_check_mark: | ion-option-is-now-ion-select-option | @dwieeb |
Radio | :wrench: | :white_check_mark: | ion-radio-attributes-renamed | @dwieeb |
| :wrench: | :white_check_mark: | ion-radio-slot-required | @dwieeb | |
| :wrench: | :white_check_mark: | ion-radio-group-is-now-an-element | @dwieeb, @j3gb3rt | |
Range | :wrench: | :white_check_mark: | ion-range-attributes-renamed | @dwieeb |
Segment Button | :wrench: | :white_check_mark: | ion-segment-button-ion-label-required | @dwieeb |
Select | :white_large_square: | ion-select-attributes-renamed | ||
Spinner | :wrench: | :white_check_mark: | ion-spinner-attribute-values-renamed | @dwieeb |
Tabs | :white_check_mark: | ion-tabs-refactored | @mhartington, | |
Text / Typography | :wrench: | :white_check_mark: | ion-text-is-now-an-element | @dwieeb, @j3gb3rt |
Toolbar | :wrench: | :white_check_mark: | ion-buttons-attributes-renamed | @dwieeb |
Some changes are not covered by this fixer due to their complexity or because it would make no sense to do in automated fashion. They are:
- Colors
- Dynamic Mode
- Icon » Fonts Removed
- Theming
[circle-badge]: https://circleci.com/gh/ionic-team/v4-migration-tslint.svg?style=shield
[circle-badge-url]: https://circleci.com/gh/ionic-team/v4-migration-tslint