Skip to content

mizdra/eslint-plugin-layout-shift

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •