Sp-dev-docs: tslint to strict for React components

[estruyf]

If you want to add one of the lifecycle methods to the React component you get the following TSLint error during the build: error no-unused-variable: unused variable: 'componentWillMount'.

I solved it by adding /* tslint:disable:no-unused-variable */ to the component.

/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:disable:no-unused-variable */

[patmill]

So we need to remove that rule for sure. However they shouldn't fail your build - they should ultimately be treated as warnings (despite the text)

[artokai]

In my opinion tslint is also a bit too strict on variable type declarations in some cases.

It should not complain about missing type declaration for example in this this case:
for (let i=0; i < 10; i++) { ... }

Or this:
let message = "this is a string";

[patmill]

Yes. We made a fix to scale back the tslint to really only appear in areas where there is a strong likelihood of an actual error, and to mark them as warnings only. Apparently that fix didn't make it into the build that went live. The next drop should clear this up. The desire is that anything remotely style related should not be appearing.

[estruyf]

Got another one where it is a bit strict. I have a variable that starts with a uppercase. This is required to render a component in React, but tslint shows the following error: variable-name: variable name must be in camelcase or uppercase.

const CrntComponent: any = this.state.component;
return <CrntComponent {...this.props} results={this.state.results} />;

[iclanton]

Hold on - @estruyf, you shouldn't be getting a no-unused-variable for componentWillMount. Functions like componentWillMount should be public, which shouldn't trigger the no-unused-variable rule. Does your component class have componentWillMount marked as private? Marking functions like componentWillMount as private would trigger that rule.

And React doesn't mandate casing for the name of a component. It's just JS/TS convention to use PascalCase for types. Are you seeing a build error if you write something like this?:

const crntComponent: any = this.state.component;
return <crntComponent {...this.props} results={this.state.results} />;

[estruyf]

@iclanton the component I'm loading doesn't contain a componentWillMount function. The one where I'm using this code does (and marking it as public or private gives the same message). This is just a warning, so it builds perfectly.

When I'm changing it to a lowercase const. It won't build: Property 'crntComponent' does not exist on type 'JSX.IntrinsicElements'.

[nickpape]

Closing this issue, as of drop 2. We have added support for the following in TSLint:

• Option to display tslint violations as warnings, instead of errors
• Option to disable all default lint rules
• Relaxed tslint rules

These are all included in the new generator. Simply update config/tslint.json with this gist..

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues