@mizdra/eslint-plugin-layout-shift

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

Motivation

The Web has been using <img> tags to load images since ancient times. However, the <img> 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 occurs on the page.

To solve this problem, the idea of computing the layout using the width and height attributes 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:

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

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

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

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

Supported Rules

@mizdra/layout-shift/require-size-attributes: Forbid media element without an explicit size attributes

Release (for contributor)

$ # Wait for passing CI...
$ git switch master
$ git pull
$ yarn version
$ npm publish
$ git push --follow-tags