{"id":15391417,"url":"https://github.com/mizdra/eslint-plugin-layout-shift","last_synced_at":"2025-04-15T23:10:39.769Z","repository":{"id":40830362,"uuid":"266524293","full_name":"mizdra/eslint-plugin-layout-shift","owner":"mizdra","description":"ESLint plugin to force responsive media elements to set the width/height attributes","archived":false,"fork":false,"pushed_at":"2023-01-07T19:42:05.000Z","size":268,"stargazers_count":22,"open_issues_count":8,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T14:28:48.973Z","etag":null,"topics":["css","eslint","eslint-plugin","html","image","jsx","layout-shift"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mizdra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-24T11:12:41.000Z","updated_at":"2024-11-02T06:49:13.000Z","dependencies_parsed_at":"2023-02-07T23:15:45.858Z","dependency_job_id":null,"html_url":"https://github.com/mizdra/eslint-plugin-layout-shift","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizdra%2Feslint-plugin-layout-shift","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizdra%2Feslint-plugin-layout-shift/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizdra%2Feslint-plugin-layout-shift/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizdra%2Feslint-plugin-layout-shift/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mizdra","download_url":"https://codeload.github.com/mizdra/eslint-plugin-layout-shift/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249167446,"owners_count":21223506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","eslint","eslint-plugin","html","image","jsx","layout-shift"],"created_at":"2024-10-01T15:11:05.073Z","updated_at":"2025-04-15T23:10:39.753Z","avatar_url":"https://github.com/mizdra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @mizdra/eslint-plugin-layout-shift\n\nESLint plugin to force responsive media elements to set the width/height attributes\n\n## Motivation\n\nThe Web has been using `\u003cimg\u003e` tags to load images since ancient times. However, the `\u003cimg\u003e` 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.\n\nTo 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.\n\n- Chrome: https://www.chromestatus.com/feature/5695266130755584\n- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1547231\n- Safari: https://trac.webkit.org/changeset/254669/webkit\n\nThis plugin forbids media element without an explicit size attributes to prevent Layout Shift from occurring.\n\n## Installation\n\nYou'll first need to install [ESLint](http://eslint.org):\n\n```\n$ npm i eslint --save-dev\n$ yarn add eslint --save-dev\n```\n\nNext, install `@mizdra/eslint-plugin-layout-shift`:\n\n```\n$ npm install @mizdra/eslint-plugin-layout-shift --save-dev\n$ yarn add @mizdra/eslint-plugin-layout-shift --save-dev\n```\n\n## Usage\n\nAdd `@mizdra/layout-shift` to the plugins section of your `.eslintrc` configuration file.\n\n```json\n{\n  \"plugins\": [\"@mizdra/layout-shift\"]\n}\n```\n\nThen configure the rules you want to use under the rules section.\n\n```json\n{\n  \"rules\": {\n    \"@mizdra/layout-shift/require-size-attributes\": 2\n  }\n}\n```\n\n## Supported Rules\n\n- [@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\n\n## Release (for contributor)\n\n```console\n$ # Wait for passing CI...\n$ git switch master\n$ git pull\n$ yarn version\n$ npm publish\n$ git push --follow-tags\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizdra%2Feslint-plugin-layout-shift","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmizdra%2Feslint-plugin-layout-shift","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizdra%2Feslint-plugin-layout-shift/lists"}