@mizdra/eslint-plugin-layout-shift

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


Keywords
eslint, eslintplugin, eslint-plugin, jsx, layout-shift
License
MIT
Install
npm install @mizdra/eslint-plugin-layout-shift@1.0.1

Documentation

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

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

Release (for contributor)

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