New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider accepting whitespaces in Template literals/Template strings in jsx #9575

Open
kud opened this Issue Nov 3, 2017 · 9 comments

Comments

Projects
None yet
3 participants
@kud

kud commented Nov 3, 2017

I've got this with whitespaces

more={`Texte N° ${object._embedded.latestText.reference}`}

image

but eslint returns me: error Irregular whitespace not allowed no-irregular-whitespace

which is sad.

Could you consider accepting whitespaces there?

I read this https://eslint.org/docs/rules/no-irregular-whitespace#skiptemplates apparently you already support it but is it something linked to jsx?

My config

module.exports = {
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true,
  },

  "extends": ["eslint:recommended", "plugin:react/recommended"],

  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true,

    // enable JSX
    "ecmaFeatures": {
      "jsx": true,
    },

  },

  "plugins": [
    "react",
  ],

  "rules": {
    "comma-dangle": ["error", "always-multiline"],
    // "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "no-unused-vars": ["warn"],
    "no-console": 0,
  },

  "globals": {
    "API_URL": true,
    "Raven": true,
    "analytics": true,
  }
}

@eslint eslint bot added the triage label Nov 3, 2017

@kud kud changed the title from Consider accepting whitespaces in Template literals/Template strings to Consider accepting whitespaces in Template literals/Template strings in jsx Nov 3, 2017

@platinumazure

This comment has been minimized.

Show comment
Hide comment
@platinumazure

platinumazure Nov 3, 2017

Member

Hi @kud, thanks for the issue!

I'm not sure I follow. According to your configuration, unless eslint:recommended or plugin:react/recommended sets no-irregular-whitespace with a different configuration, then your configuration is not using skipTemplates: true for this rule. The rule mentions only the skipStrings: true option is set by default, and eslint:recommended (at least) does not usually deviate from default settings.

You can use eslint --print-config path/to/file.js to see the full, effective configuration for a given rule. Hopefully this will show you if skipTemplates is configured or not.

If you do not see skipTemplates in the full config, please try adding a rule configuration for this rule:

{
    // omitted
    "rules": {
        "no-irregular-whitespace": ["error", { "skipStrings": true, "skipTemplates": true }],
        // omitted
    }
}
Member

platinumazure commented Nov 3, 2017

Hi @kud, thanks for the issue!

I'm not sure I follow. According to your configuration, unless eslint:recommended or plugin:react/recommended sets no-irregular-whitespace with a different configuration, then your configuration is not using skipTemplates: true for this rule. The rule mentions only the skipStrings: true option is set by default, and eslint:recommended (at least) does not usually deviate from default settings.

You can use eslint --print-config path/to/file.js to see the full, effective configuration for a given rule. Hopefully this will show you if skipTemplates is configured or not.

If you do not see skipTemplates in the full config, please try adding a rule configuration for this rule:

{
    // omitted
    "rules": {
        "no-irregular-whitespace": ["error", { "skipStrings": true, "skipTemplates": true }],
        // omitted
    }
}

@platinumazure platinumazure added question and removed triage labels Nov 3, 2017

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Nov 3, 2017

image

I've indeed misread the doc, I thought it was the default for everything here. I'll add skipTemplates so.

Thank you very much for your time and your kind explanation @platinumazure.

kud commented Nov 3, 2017

image

I've indeed misread the doc, I thought it was the default for everything here. I'll add skipTemplates so.

Thank you very much for your time and your kind explanation @platinumazure.

@kud kud closed this Nov 3, 2017

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Nov 3, 2017

However I've put what you said,

it still renders errors.

  "rules": {
    "comma-dangle": ["error", "always-multiline"],
    "no-irregular-whitespace": ["error", { "skipStrings": true, "skipTemplates": true }],
    // "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "no-unused-vars": ["warn"],
    "no-console": "off",
  },

and eslint print config renders this:

    "no-irregular-whitespace": [
      "error",
      {
        "skipStrings": true,
        "skipTemplates": true
      }
    ],

kud commented Nov 3, 2017

However I've put what you said,

it still renders errors.

  "rules": {
    "comma-dangle": ["error", "always-multiline"],
    "no-irregular-whitespace": ["error", { "skipStrings": true, "skipTemplates": true }],
    // "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "no-unused-vars": ["warn"],
    "no-console": "off",
  },

and eslint print config renders this:

    "no-irregular-whitespace": [
      "error",
      {
        "skipStrings": true,
        "skipTemplates": true
      }
    ],

@kud kud reopened this Nov 3, 2017

@platinumazure

This comment has been minimized.

Show comment
Hide comment
@platinumazure

platinumazure Nov 3, 2017

Member

Thanks, I guess we'll need to investigate 😄

Could you edit your post with a minimum complete example (i.e., maybe include a JSX tag around the attribute that you've posted in your example)? Basically something that would be valid JS/JSX by itself. Thanks!

Member

platinumazure commented Nov 3, 2017

Thanks, I guess we'll need to investigate 😄

Could you edit your post with a minimum complete example (i.e., maybe include a JSX tag around the attribute that you've posted in your example)? Basically something that would be valid JS/JSX by itself. Thanks!

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Nov 3, 2017

import React from "react"
import PropTypes from "prop-types"
import moment from "moment"

import Card from "~/components/Card"
import StepTranslator from "~/components/StepTranslator"
import WatchBillButton from "~/components/WatchBillButton"

class WatchBill extends React.PureComponent {
  static propTypes = {
    watch: PropTypes.object.isRequired,
    onChange: PropTypes.func,
  }

  static defaultProps = {
    onChange: () => {},
  }

  handleChangeWatchButton = () => {
    this.props.onChange()
  }

  render() {
    const { watch: object } = this.props

    const stepRelation =
      object._embedded.latestText.stepRelation === "produced_at"
        ? "output"
        : "input"

    return (
      <Card
        to={`/bill-${object.id}/step-${object._embedded.currentStep
          .position}/${stepRelation}/`}
        heading={object.title}
        date={moment(object._embedded.latestText.date).format("Do MMMM YYYY")}
        fate={object.accelerated ? "accelerated" : null}
        step={
          <StepTranslator
            when={object._embedded.currentStep.when}
            where={object._embedded.currentStep.where}
            who={object._embedded.currentStep.who}
            relation={stepRelation}
            short
          />
        }
        watch={
          <WatchBillButton
            id={object.id}
            onChange={this.handleChangeWatchButton}
          />
        }
        more={`Texte<NBSP>N°<NBSP>${object._embedded.latestText.reference}`}
      />
    )
  }
}

export default WatchBill

kud commented Nov 3, 2017

import React from "react"
import PropTypes from "prop-types"
import moment from "moment"

import Card from "~/components/Card"
import StepTranslator from "~/components/StepTranslator"
import WatchBillButton from "~/components/WatchBillButton"

class WatchBill extends React.PureComponent {
  static propTypes = {
    watch: PropTypes.object.isRequired,
    onChange: PropTypes.func,
  }

  static defaultProps = {
    onChange: () => {},
  }

  handleChangeWatchButton = () => {
    this.props.onChange()
  }

  render() {
    const { watch: object } = this.props

    const stepRelation =
      object._embedded.latestText.stepRelation === "produced_at"
        ? "output"
        : "input"

    return (
      <Card
        to={`/bill-${object.id}/step-${object._embedded.currentStep
          .position}/${stepRelation}/`}
        heading={object.title}
        date={moment(object._embedded.latestText.date).format("Do MMMM YYYY")}
        fate={object.accelerated ? "accelerated" : null}
        step={
          <StepTranslator
            when={object._embedded.currentStep.when}
            where={object._embedded.currentStep.where}
            who={object._embedded.currentStep.who}
            relation={stepRelation}
            short
          />
        }
        watch={
          <WatchBillButton
            id={object.id}
            onChange={this.handleChangeWatchButton}
          />
        }
        more={`Texte<NBSP>N°<NBSP>${object._embedded.latestText.reference}`}
      />
    )
  }
}

export default WatchBill
@platinumazure

This comment has been minimized.

Show comment
Hide comment
@platinumazure

platinumazure Nov 10, 2017

Member

I've reduced the example down to this and can see that this is not reproducible in the demo. @kud Could you please confirm your latest configuration?

/* eslint no-irregular-whitespace: [error, { skipTemplates: true }], no-undef: off */
class WatchBill {
  render() {
    return (
      <Card
        more={`Texte N° 1`}  // NOTE: Uses NBSP characters as spaces
      />
    )
  }
}

export default WatchBill

Which can also be verified in our online demo.

(Note: Oops, I had misconfigured the rule in the demo originally and said the bug was reproducible. Sorry for the error.)

Member

platinumazure commented Nov 10, 2017

I've reduced the example down to this and can see that this is not reproducible in the demo. @kud Could you please confirm your latest configuration?

/* eslint no-irregular-whitespace: [error, { skipTemplates: true }], no-undef: off */
class WatchBill {
  render() {
    return (
      <Card
        more={`Texte N° 1`}  // NOTE: Uses NBSP characters as spaces
      />
    )
  }
}

export default WatchBill

Which can also be verified in our online demo.

(Note: Oops, I had misconfigured the rule in the demo originally and said the bug was reproducible. Sorry for the error.)

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Nov 10, 2017

Yeah sure, I'll a try. :) Thanks for your deep search.

kud commented Nov 10, 2017

Yeah sure, I'll a try. :) Thanks for your deep search.

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Nov 13, 2017

import React from "react"

class WatchAmendment extends React.PureComponent {
  render() {
    const { watch: object } = this.props

    return (
      <Card
        to={`/bill-${object._embedded.bill.id}/step-${
          object._embedded.step.position
        }/input/amendment-${object.id}/`}
        heading={`Amendement N° ${object.name}`}
        subheading={
          <span>
            <Text weight="bold" upperFirst>
              {object._embedded.bill.title}
            </Text>{" "}
            <Text weight="light">
              (Texte N° {object._embedded.text.reference})
            </Text>
          </span>
        }
        committee={
          object._embedded.committee && (
            <span>
              <FormattedMessage upperFirst id="committee" />
              {" : "}
              <Text upperFirst>{object._embedded.committee.name}</Text>
            </span>
          )
        }
        target={
          object._embedded.article
            ? `Article ${object._embedded.article.name}`
            : null
        }
        author={object.authorName}
        fate={object.fate ? object.fate.label : "submitted"}
        step={
          <StepTranslator
            when={object._embedded.step.when}
            where={object._embedded.step.where}
            who={object._embedded.step.who}
            relation="input"
            short
          />
        }
        watch={
          <WatchAmendmentButton
            id={object.id}
            onChange={this.handleChangeWatchButton}
          />
        }
      />
    )
  }
}

export default WatchAmendment

image

See? :p

kud commented Nov 13, 2017

import React from "react"

class WatchAmendment extends React.PureComponent {
  render() {
    const { watch: object } = this.props

    return (
      <Card
        to={`/bill-${object._embedded.bill.id}/step-${
          object._embedded.step.position
        }/input/amendment-${object.id}/`}
        heading={`Amendement N° ${object.name}`}
        subheading={
          <span>
            <Text weight="bold" upperFirst>
              {object._embedded.bill.title}
            </Text>{" "}
            <Text weight="light">
              (Texte N° {object._embedded.text.reference})
            </Text>
          </span>
        }
        committee={
          object._embedded.committee && (
            <span>
              <FormattedMessage upperFirst id="committee" />
              {" : "}
              <Text upperFirst>{object._embedded.committee.name}</Text>
            </span>
          )
        }
        target={
          object._embedded.article
            ? `Article ${object._embedded.article.name}`
            : null
        }
        author={object.authorName}
        fate={object.fate ? object.fate.label : "submitted"}
        step={
          <StepTranslator
            when={object._embedded.step.when}
            where={object._embedded.step.where}
            who={object._embedded.step.who}
            relation="input"
            short
          />
        }
        watch={
          <WatchAmendmentButton
            id={object.id}
            onChange={this.handleChangeWatchButton}
          />
        }
      />
    )
  }
}

export default WatchAmendment

image

See? :p

@kud

This comment has been minimized.

Show comment
Hide comment
@kud

kud Sep 20, 2018

I still have the problem.
I've got this settings:

    "no-irregular-whitespace": [
      "warn",
      { skipStrings: true, skipTemplates: true },
    ],

and it stills show me a warning about this:

import React from "react"
import PropTypes from "prop-types"
import _ from "lodash"

import shortenArticle from "~/candies/shortenArticle"

import connect from "~/hoc/elfi"

import Text from "~/components/Text"
import FormattedMessage from "~/components/FormattedMessage"
import Card from "~/components/Card"
import StepTranslator from "~/components/StepTranslator"
import WatchAmendmentButton from "~/components/WatchAmendmentButton"

class WatchPageMainWatchAmendment extends React.PureComponent {
  static propTypes = {
    apiBills: PropTypes.object.isRequired,
    apiTexts: PropTypes.object.isRequired,
    apiCommittees: PropTypes.object.isRequired,
    apiSteps: PropTypes.object.isRequired,
    watch: PropTypes.object.isRequired,
  }

  render() {
    const {
      watch: object,
      apiBills,
      apiTexts,
      apiSteps,
      apiCommittees,
    } = this.props

    const apiBill = apiBills.getById(object._embedded.bill)
    const apiText = apiTexts.getById(object._embedded.text)
    const apiCommittee = apiCommittees.getById(object._embedded.committee)
    const apiStep = apiSteps.getById(object._embedded.step)

    const { body: bill } = apiBill.toJS()
    const { body: text } = apiText.toJS()
    const { body: committee } = apiCommittee.toJS()
    const { body: step } = apiStep.toJS()

    return (
      <Card
        to={`/bill-${bill.id}/step-${step.position}/input/amendment-${
          object.id
        }/`}
        heading={
          object._embedded.parent
            ? `Sous-Amendement N° ${object.name}`
            : `Amendement N° ${object.name}`
        }
        headingN1={
          object._embedded.parent
            ? `Amendement N° ${object._embedded.parent.name}`
            : null
        }
        subheading={
          <React.Fragment>
            <Text weight="bold" upperFirst>
              {bill.title}
            </Text>{" "}
            <Text weight="light">
              (Texte N° {text.reference})
            </Text>
          </React.Fragment>
        }
        committee={
          object._embedded.committee && (
            <React.Fragment>
              <FormattedMessage upperFirst id="committee" />
              {" : "}
              <Text upperFirst>{committee.name}</Text>
            </React.Fragment>
          )
        }
        target={shortenArticle(_.startCase(_.lowerCase(object.rawArticle)))}
        author={object.authorName}
        fate={object.fate ? object.fate.label : "filed"}
        step={
          <StepTranslator
            when={step.when}
            where={step.where}
            who={step.who}
            relation="input"
            short
          />
        }
        watch={
          <WatchAmendmentButton
            id={`bills_amendment_${object.id}`}
            objectTitle={`Amendement N° ${object.name}`}
          />
        }
      />
    )
  }
}

export default connect(
  WatchPageMainWatchAmendment,
  state => ({
    apiBills: state.apiBills,
    apiTexts: state.apiTexts,
    apiSteps: state.apiSteps,
    apiCommittees: state.apiCommittees,
  }),
)

kud commented Sep 20, 2018

I still have the problem.
I've got this settings:

    "no-irregular-whitespace": [
      "warn",
      { skipStrings: true, skipTemplates: true },
    ],

and it stills show me a warning about this:

import React from "react"
import PropTypes from "prop-types"
import _ from "lodash"

import shortenArticle from "~/candies/shortenArticle"

import connect from "~/hoc/elfi"

import Text from "~/components/Text"
import FormattedMessage from "~/components/FormattedMessage"
import Card from "~/components/Card"
import StepTranslator from "~/components/StepTranslator"
import WatchAmendmentButton from "~/components/WatchAmendmentButton"

class WatchPageMainWatchAmendment extends React.PureComponent {
  static propTypes = {
    apiBills: PropTypes.object.isRequired,
    apiTexts: PropTypes.object.isRequired,
    apiCommittees: PropTypes.object.isRequired,
    apiSteps: PropTypes.object.isRequired,
    watch: PropTypes.object.isRequired,
  }

  render() {
    const {
      watch: object,
      apiBills,
      apiTexts,
      apiSteps,
      apiCommittees,
    } = this.props

    const apiBill = apiBills.getById(object._embedded.bill)
    const apiText = apiTexts.getById(object._embedded.text)
    const apiCommittee = apiCommittees.getById(object._embedded.committee)
    const apiStep = apiSteps.getById(object._embedded.step)

    const { body: bill } = apiBill.toJS()
    const { body: text } = apiText.toJS()
    const { body: committee } = apiCommittee.toJS()
    const { body: step } = apiStep.toJS()

    return (
      <Card
        to={`/bill-${bill.id}/step-${step.position}/input/amendment-${
          object.id
        }/`}
        heading={
          object._embedded.parent
            ? `Sous-Amendement N° ${object.name}`
            : `Amendement N° ${object.name}`
        }
        headingN1={
          object._embedded.parent
            ? `Amendement N° ${object._embedded.parent.name}`
            : null
        }
        subheading={
          <React.Fragment>
            <Text weight="bold" upperFirst>
              {bill.title}
            </Text>{" "}
            <Text weight="light">
              (Texte N° {text.reference})
            </Text>
          </React.Fragment>
        }
        committee={
          object._embedded.committee && (
            <React.Fragment>
              <FormattedMessage upperFirst id="committee" />
              {" : "}
              <Text upperFirst>{committee.name}</Text>
            </React.Fragment>
          )
        }
        target={shortenArticle(_.startCase(_.lowerCase(object.rawArticle)))}
        author={object.authorName}
        fate={object.fate ? object.fate.label : "filed"}
        step={
          <StepTranslator
            when={step.when}
            where={step.where}
            who={step.who}
            relation="input"
            short
          />
        }
        watch={
          <WatchAmendmentButton
            id={`bills_amendment_${object.id}`}
            objectTitle={`Amendement N° ${object.name}`}
          />
        }
      />
    )
  }
}

export default connect(
  WatchPageMainWatchAmendment,
  state => ({
    apiBills: state.apiBills,
    apiTexts: state.apiTexts,
    apiSteps: state.apiSteps,
    apiCommittees: state.apiCommittees,
  }),
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment