Tslint: "variable-name" rule for certain instances

Created on 25 Jun 2018  路  4Comments  路  Source: palantir/tslint

Bug Report

  • __TSLint version__: 5.10.0
  • __TypeScript version__: 2.7.2
  • __Running TSLint via__: vscode

TypeScript code being linted

export const SupportForm = withFormik<IOtherProps, IFormValues>({
  handleSubmit: (values, { props }) => {
    props.supportStore.submitSupportformHandler(values);
  },
  mapPropsToValues: props => {
    return {
      message: '',
      subject: '',
    };
  },
  validationSchema: Yup.object().shape({
    message: Yup.string()
      .required('Message is required!'),
    subject: Yup.string()
      .required('Email is required!'),
  }),
})(BaseForm);

with tslint.json configuration:

{
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-airbnb"],
    "rules": {
        "no-trailing-whitespace": false,
        "object-literal-shorthand": false,
        "trailing-comma": false,
        "quotemark": [true, "single", "jsx-double", "avoid-escape"],
        "jsx-no-lambda": false,
        "jsx-no-multiline-js": false,
        "jsx-wrap-multiline": false,
        "max-line-length": false,
        "variable-name": [true, "check-format", "allow-leading-underscore"],
        "ter-arrow-parens": [ true, "as-needed" ],
        "ter-indent": [ true, 2, { "SwitchCase": 1 } ],
        "import-name": false,
        "no-increment-decrement": false,
        "no-namespace": false,
        "max-classes-per-file": false
    }
}

Actual behavior

So it highlighting SupportForm saying
[tslint] variable name must be in lowerCamelCase or UPPER_CASE (variable-name)

Expected behavior

Would like to have it not complain in cases where the variable is a HoC or Functional Stateless component

Not A Bug

Most helpful comment

@giladgray If I add that option then it allows it everywhere. I need it only for certain sections like Functional components.

All 4 comments

@pmonty you are looking for the "allow-pascal-case" option. PascalCase is the name for "camelCase with a leading uppercase letter."

@giladgray If I add that option then it allows it everywhere. I need it only for certain sections like Functional components.

we are running in to the same issue. react components should be allowed in PascalCase even when we don't allow them for general variables.

I believe @giladgray didn't entirely understand the issue because the example is somewhat convoluted and doesn't give a slightest hint that it's about React.

The related issue has been reported here:
https://github.com/palantir/tslint-react/issues/120

Was this page helpful?
0 / 5 - 0 ratings