{"id":21250771,"url":"https://github.com/calm/eslint-plugin-react-intl","last_synced_at":"2025-07-11T01:31:28.788Z","repository":{"id":45619464,"uuid":"182134049","full_name":"calm/eslint-plugin-react-intl","owner":"calm","description":"An eslint plugin to enforce react-intl translations and formatting in web apps.","archived":false,"fork":false,"pushed_at":"2023-07-18T20:20:15.000Z","size":213,"stargazers_count":13,"open_issues_count":11,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-08T22:15:33.226Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/calm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-18T17:57:34.000Z","updated_at":"2023-03-08T14:36:24.000Z","dependencies_parsed_at":"2024-06-18T18:35:01.916Z","dependency_job_id":"792ab116-1b48-4359-ae1c-0a454e5cbe25","html_url":"https://github.com/calm/eslint-plugin-react-intl","commit_stats":{"total_commits":19,"total_committers":3,"mean_commits":6.333333333333333,"dds":0.1578947368421053,"last_synced_commit":"7b6dce728da944ac61d90a956d0e800f33d42a80"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calm%2Feslint-plugin-react-intl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calm%2Feslint-plugin-react-intl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calm%2Feslint-plugin-react-intl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calm%2Feslint-plugin-react-intl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calm","download_url":"https://codeload.github.com/calm/eslint-plugin-react-intl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225470715,"owners_count":17479368,"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":[],"created_at":"2024-11-21T03:38:48.794Z","updated_at":"2024-11-21T03:38:49.287Z","avatar_url":"https://github.com/calm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @calm/eslint-plugin-react-intl\n\nThis is a plugin to ensure that Intl translations are being made correctly with [react-intl](https://www.npmjs.com/package/react-intl).\nSince they should be stored in an object for translation, this disables plain\ntext between html tags.\n\nThe plugin is actively supported by the Calm engineering team, and contributions/concerns are welcome at https://github.com/calm/eslint-plugin-react-intl.\n\nThere are three options to enable, and we recommend enabling all of them to ensure\nproper translations in all languages.\n\nThe { noTrailingWhitespace: true } option is set by default and is not necessary to declare in the rules section.\nThis is recommended as some languages don't have spaces between words.\nAdditionally, the option `ignoreLinks` is set to true by default. Depending on your\nuse case, you may want to disable this.\n\n## Use Cases\n\n#### Formatted Message validation\n* Checks to make sure plain text doesn't exist within html tags (should be translated)\n* `\u003ca\u003e` tags by default are not checked (this can be disabled)\n* Numbers are ignored (they're the same in every language)\n* Trailing whitespace is not allowed (this can be disabled)\n* Non-alphanumeric values are ignored (such as `-`)\n* Can enable enforcing label, aria-label attributes being translated (`\u003ctrack label=\"subtitles\" /\u003e`)\n* Can enable enforcing alt attributes being translated (`\u003cimg alt=\"description\" /\u003e`)\n* Can enable enforcing inputProps being translated (`\u003cCheckbox value=\"checkedA\" inputProps={{ 'aria-label': 'Checkbox A' }} /\u003e`)\n  * This is specific to some React libraries, such as MaterialUI\n  * Example can be seen here: https://material-ui.com/components/checkboxes/#accessibility\n\n#### Missing Values validation\n* In defaultMessage attributes within \u003cFormattedMessage/\u003e components, `{variable}` declarations must be declared in the `values` attribute\n* It will look over anything before a comma, allowing for FormatJS plurals\n  * Ex. defaultMessage=\"{number} {number, plural, one {Day} other {Days}}\" will resolve 1 variable as `number`\n\n#### Missing Attribute validation\n* \u003cFormattedMessage/\u003e components must have both `defaultMessage` and `id` attributes set\n  * Calm chooses to always require these, but you can optionally disable defaultMessage with option `requireDefaultMessage : false`\n* `defaultMessage` and `id` attributes cannot be empty\n* Spread operator by default is not allowed\n  * Spread operator can't be evaluated by eslint's AST, so translations can't be guaranteed\n* `requireDescription` can optionally be set to require that all translations contain the description attribute\n* Use the `formatDefineMessages: true` option in order to also check the defineMessages declaration from react-intl\n  * *BE CAREFUL* - This assumes that defineMessages will always mean the react-intl method, so do not declare other defineMessages functions unless they maintain the same formatting as react-intl\n* Optional `requireIdAsString: false` will allow for variables in the id field\n  * *BE CAREFUL* - variables in id fields can result in duplicate strings being translated, as well as the possibility of a changed variable leading to an id without a translation associated with it\n\n## Installation\n\nYou'll first need to install [ESLint](http://eslint.org):\n\n```\n$ npm i eslint --save-dev\n```\n\nNext, install `@calm/eslint-plugin-react-intl`:\n\n```\n$ npm install @calm/eslint-plugin-react-intl --save-dev\n```\n\n**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `@calm/eslint-plugin-react-intl` globally.\n\n## Usage\n\nAdd `@calm/react-intl` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:\n\n```json\n{\n    \"plugins\": [\n        \"@calm/react-intl\"\n    ]\n}\n```\n\n\nThen configure the rules you want to use under the rules section.\nIt's recommended that you explicitly set each option.\n\u003cbr /\u003e\nThe rules (with their default settings) are listed below.\n\n```json\n{\n    \"rules\": {\n        \"@calm/react-intl/missing-formatted-message\": [2,\n          {\n            \"noTrailingWhitespace\": true,\n            \"ignoreLinks\": true,\n            \"enforceLabels\": false,\n            \"enforceImageAlts\": false,\n            \"enforceInputProps\": false\n          }\n        ],\n        \"@calm/react-intl/missing-attribute\": [2,\n            {\n                \"noTrailingWhitespace\": true,\n                \"noSpreadOperator\": true,\n                \"requireDescription\": false,\n                \"formatDefineMessages\": false,\n                \"requireIdAsString\": true,\n                \"requireDefaultMessage\": true,\n            }\n        ],\n        \"@calm/react-intl/missing-values\": 2\n    }\n}\n```\n\n## Supported Rules\n\n* missing-formatted-message\n* missing-attribute\n* missing-values\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalm%2Feslint-plugin-react-intl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalm%2Feslint-plugin-react-intl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalm%2Feslint-plugin-react-intl/lists"}