https://github.com/mizdra/eslint-plugin-layout-shift

ESLint plugin to force responsive media elements to set the width/height attributes
https://github.com/mizdra/eslint-plugin-layout-shift

css eslint eslint-plugin html image jsx layout-shift

Last synced: 19 days ago
JSON representation

ESLint plugin to force responsive media elements to set the width/height attributes

• Host: GitHub
• URL: https://github.com/mizdra/eslint-plugin-layout-shift
• Owner: mizdra
• License: mit
• Created: 2020-05-24T11:12:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T19:42:05.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T14:07:25.832Z (about 1 month ago)
• Topics: css, eslint, eslint-plugin, html, image, jsx, layout-shift
• Language: JavaScript
• Homepage:
• Size: 262 KB
• Stars: 21
• Watchers: 2
• Forks: 3
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @mizdra/eslint-plugin-layout-shift

ESLint plugin to force responsive media elements to set the width/height attributes

## Motivation

The Web has been using `` tags to load images since ancient times. However, the `` tag does not have any attribute to embed the aspect ratio. As a result, the size of the responsive img element cannot be determined until the browser fetches the image from the network and finishes loading, and there is a problem that [Layout Shift](https://web.dev/cls) occurs on the page.

To solve this problem, [the idea of computing the layout using the width and height attributes](https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping) has been proposed and is starting to be implemented in browsers.

- Chrome: https://www.chromestatus.com/feature/5695266130755584

- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1547231

- Safari: https://trac.webkit.org/changeset/254669/webkit

This plugin forbids media element without an explicit size attributes to prevent Layout Shift from occurring.

## Installation

You'll first need to install [ESLint](http://eslint.org):

```

$ npm i eslint --save-dev

$ yarn add eslint --save-dev

```

Next, install `@mizdra/eslint-plugin-layout-shift`:

```

$ npm install @mizdra/eslint-plugin-layout-shift --save-dev

$ yarn add @mizdra/eslint-plugin-layout-shift --save-dev

```

## Usage

Add `@mizdra/layout-shift` to the plugins section of your `.eslintrc` configuration file.

```json

{

  "plugins": ["@mizdra/layout-shift"]

}

```

Then configure the rules you want to use under the rules section.

```json

{

  "rules": {

    "@mizdra/layout-shift/require-size-attributes": 2

  }

}

```

## Supported Rules

- [@mizdra/layout-shift/require-size-attributes](https://github.com/mizdra/eslint-plugin-layout-shift/blob/master/docs/rules/require-size-attributes.md): Forbid media element without an explicit size attributes

## Release (for contributor)

```console

$ # Wait for passing CI...

$ git switch master

$ git pull

$ yarn version

$ npm publish

$ git push --follow-tags

```