Skip to content

ionic-team/v4-migration-tslint

 
 

Repository files navigation

@ionic/v4-migration-tslint

Build Status Code Style: Prettier semantic-release Coverage Status Commitizen friendly

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. 💖

How to Use

  1. Install the lint rules:

    npm i -D @ionic/v4-migration-tslint
    
  2. Add a file called ionic-migration.json at the root of your project and paste in the following 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
      }
    }
  3. Lint your project:

    npx tslint -c ionic-migration.json -p tsconfig.json

    📝 Hints:

    • Run tslint with -t verbose to output the rule names of lint errors which correspond to the table of rules below.
    • Run tslint with --fix to attempt automatic fixes (note: not all rules have fixes, and be sure to save a backup in version control before running with --fix)

Rules

⬜ – These rules need to be completed! See CONTRIBUTING.md to get started.

🔧 – These rules can be automatically fixed with --fix.

category rule contributors
Code Changes
Action Sheet 🔧 ion-action-sheet-method-create-parameters-renamed @cwoolum
Alert 🔧 ion-alert-method-create-parameters-renamed @cwoolum
Datetime 🔧 ion-datetime-capitalization-changed @mhartington
Item Sliding 🔧 ion-item-option-method-get-sliding-percent-renamed @mhartington
Loading 🔧 ion-loading-method-create-parameters-renamed @areo
Nav ion-nav-controller-method-remove-renamed
Option ion-option-class-renamed
Overlays ion-overlay-method-create-should-use-await @cwoolum
ion-overlay-method-present-should-use-await @cwoolum
Markup Changes
Back Button ion-back-button-not-added-by-default @dwieeb
Button 🔧 ion-button-attributes-renamed @cwoolum
🔧 ion-button-is-now-an-element @cwoolum, @j3gb3rt
FAB 🔧 ion-fab-button-is-now-an-element @dwieeb, @j3gb3rt
🔧 ion-fab-attributes-renamed @dwieeb
🔧 ion-fab-fixed-content @dwieeb
Grid 🔧 ion-col-attributes-renamed @dwieeb
Icon ion-icon-attribute-is-active-removed @dwieeb
Item 🔧 ion-item-is-now-an-element @dwieeb, @j3gb3rt
ion-item-ion-label-required @dwieeb
🔧 ion-item-attributes-renamed @dwieeb
Item Divider ion-item-divider-ion-label-required @dwieeb
Item Options 🔧 ion-item-options-attribute-values-renamed @dwieeb
Item Sliding ion-item-option-is-now-an-element @dwieeb
Label 🔧 ion-label-attributes-renamed @dwieeb
List Header ion-list-header-ion-label-required @dwieeb
Menu 🔧 ion-menu-events-renamed @mhartington
Menu Toggle ion-menu-toggle-is-now-an-element @dwieeb
Navbar 🔧 ion-navbar-is-now-ion-toolbar @cwoolum
Option 🔧 ion-option-is-now-ion-select-option @dwieeb
Radio 🔧 ion-radio-attributes-renamed @dwieeb
🔧 ion-radio-slot-required @dwieeb
🔧 ion-radio-group-is-now-an-element @dwieeb, @j3gb3rt
Range 🔧 ion-range-attributes-renamed @dwieeb
Segment Button 🔧 ion-segment-button-ion-label-required @dwieeb
Select ion-select-attributes-renamed
Spinner 🔧 ion-spinner-attribute-values-renamed @dwieeb
Tabs ion-tabs-refactored @mhartington,
Text / Typography 🔧 ion-text-is-now-an-element @dwieeb, @j3gb3rt
Toolbar 🔧 ion-buttons-attributes-renamed @dwieeb

Not Covered

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: