@mizdra/eslint-plugin-layout-shift
v1.0.1
Published
ESLint plugin to force responsive media elements to set the width/height attributes
Downloads
12,678
Maintainers
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 <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