eslint-plugin-react-i18next-prettier ·

Description

It is quite common to use auto formatting tools like "Prettier" in IDEs or autofix by Node commands. Unfortunately those tools tend to reformat these JSX code parts as soon as they become too complex. It will always break the component.

Plugin resolves a problem between a component <Tras></Trans>and prettier(max length) adding /*prettier-ignore*/ before the component.

/*
  <0/> is <b>bold</b>
  <1/> is ' unbolded '
  <2/> is <i>italicized</i>
 */
<Trans>
  <span>
    <b>bold</b> unbolded <i>italicized</i>
  </span>
</Trans>

/*
  <0/> is <b>bold</b>
  <1/> is ' '
  <2/> is 'unbolded'
  <3/> is ' '
  <4/> is <i>italicized</i>

  Prettier will insert the spaces if these strings are very long.
 */
<Trans>
  <span>
    <b>bold</b>
    {' '}unbolded{' '}
    <i>italicized</i>
  </span>
</Trans>

Installation

npm install eslint-plugin-react-i18next-prettier -D

yarn add eslint-plugin-react-i18next-prettier -D

Usage:

The most important when you use a plugin eslint-plugin-prettier.

If you’re fixing large of amounts of previously unformatted code, consider temporarily disabling the prettier/prettier rule and running eslint --fix and prettier --write separately.

.eslintrc.js

module.export = {
    plugin: ['another-plugin', 'prettier', 'react-i18next-prettier'],
    rules: {
        'react-i18next-prettier/no-trans-without-prettier-ignore': 'error',
        "prettier/prettier": "error"
    }
}

Examples

JS/Typescript code:

const fn = () => {
  return (<Trans>Test <span>span element</span></Trans>)
}

const fn = () => () =>  <Trans>Test <span>span element</span></Trans>;                 

const fn = () => <Trans>Test <span>span element</span></Trans>

(() => <Trans>Test <span>span element</span></Trans>)()

const fn = (testArg, testArg2 = <Trans>Test <span>span element</span></Trans>, testArg3) => {}

const Obj = {
  '2':23,
  "test": <Trans>Test <span>span element</span></Trans>,
  "3": 'sdfsdf'
}

const value = 343,  value2 = <Trans>Test <span>span element</span></Trans>

const value = <Trans>Test <span>span element</span></Trans>

const boleanExpression = true ? null : <Trans>Test <span>span element</span></Trans>

const array = [1, 2, <Trans>Test <span>span element</Trans>, 3 ]

<div>
    <Trans></Trans>
    
    <Component attr={<Trans>Test <span>span element</Trans>}></Test>
    
    {true ? null : (<Trans>Test <span>span element</Trans>)}
    
    {true && 1 &&  <Trans>Test <span>span element</Trans>}
</div>

// RESULT

const fn = () => {
  /* prettier-ignore */
  return (<Trans>Test <span>span element</span></Trans>)
}

/* prettier-ignore */
const fn = () => () =>  <Trans>Test <span>span element</span></Trans>;

/* prettier-ignore */
const fn = () => <Trans>Test <span>span element</span></Trans>

/* prettier-ignore */
(() => <Trans>Test <span>span element</span></Trans>)()

const fn = (testArg, /* prettier-ignore */ testArg2 = <Trans>, testArg3) => {}

const TestObj = {
  '2': 23,
  /* prettier-ignore */
  "test": <Trans>Test <span>span element</span></Trans>,
  "3": 'sdfsdf'
}

const value = 343, /* prettier-ignore */ value2 = <Trans>Test <span>span element</span></Trans>

/* prettier-ignore */
const value = <Trans>Test <span>span element</span></Trans>

const Test2 = true ? null : /* prettier-ignore */ <Trans>Test <span>span element</span></Trans>

const array = [1, 2, /* prettier-ignore */ <Trans>Test <span>span element</span></Trans>, 3 ]

<div>
    {/* prettier-ignore */}
    <Trans></Trans>
    
    <Component attr={/* prettier-ignore */ <Trans>Test <span>span element</span></Trans>}></Test>
    
    {true ? null : (/* prettier-ignore */ <Trans>Test <span>span element</span></Trans>)}
    
    {true && 1 &&  /* prettier-ignore */ <Trans>Test <span>span element</span></Trans>}
</div>