https://github.com/takuya-nakayasu/eslint-plugin-ionic-tappable

ESLint plugin for Ionic tappable attribute
https://github.com/takuya-nakayasu/eslint-plugin-ionic-tappable

angular eslint eslint-plugin eslintplugin html ionic typescript

Last synced: about 1 month ago
JSON representation

ESLint plugin for Ionic tappable attribute

• Host: GitHub
• URL: https://github.com/takuya-nakayasu/eslint-plugin-ionic-tappable
• Owner: takuya-nakayasu
• License: mit
• Created: 2021-06-19T09:28:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-11T08:31:29.000Z (over 3 years ago)
• Last Synced: 2024-11-17T07:23:04.137Z (2 months ago)
• Topics: angular, eslint, eslint-plugin, eslintplugin, html, ionic, typescript
• Language: TypeScript
• Homepage:
• Size: 523 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# eslint-plugin-ionic-tappable

An ESLint plugin that click must be accompanied by `tappable`, except for ``, `` and ``.


[![npm version](https://img.shields.io/npm/v/eslint-plugin-ionic-tappable.svg)](https://www.npmjs.com/package/eslint-plugin-ionic-tappable)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Twitter](https://img.shields.io/twitter/follow/takuya_nakayasu?style=social)](https://twitter.com/takuya_nakayasu)

## What’s `tappable` ?

`tappable` is an Ionic directive.

https://ionicframework.com/docs/troubleshooting/runtime#-

> In general, we recommend only adding `(click)` events to elements that are normally clickable. This includes `` and `` elements. This improves accessibility as a screen reader will be able to tell that the element is clickable


> However, you may need to add a `(click)` event to an element that is not normally clickable. When you do this you may experience a 300ms delay from the time you click the element to the event firing. To remove this delay, you can add the tappable attribute to your element.

```html

I am clickable!

```


## Installation

```

npm install --save-dev eslint-plugin-ionic-tappable

```

Or

```

yarn add --dev eslint-plugin-ionic-tappable

```

## Usage

Modify your `.eslintrc`

```js

// .eslintrc.json

module.exports = {

  "overrides": [

    ...,

    {

      "files": ["*.html"],

      "parser": "@angular-eslint/template-parser",

      "plugins": [

        ...,

        "ionic-tappable"

      ],

      "rules": [

        ...,

        "ionic-tappable/click-events-have-tappable": "warn"

      ]

    }

  ]

}

```

## Rules

| Rule ID                                                                  | Description                                                                                                |

| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |

| [click-events-have-tappable](./docs/rules/click-events-have-tappable.md) | Ensures that the click event is accompanied by `tappable`, except for ``, `` and `` |


## Examples

Examples of **incorrect** code:

```html

I am clickable!

```


Examples of **correct** code:

```html

I am clickable!


I am clickable!

```

## License

MIT