Comments (15)
more false positives I've found:
return [
<button type="submit">
Submit
</button>,
<button type="button">
Cancel
</button>
];
from tslint-react.
Another repro using React 16.2:
return (
<>
<div>One</div>
<div>Two</div>
</>
)
from tslint-react.
Problem is that the 4.0.0 release of tslint-react no longer permits the standard prettier formatting for the reactDom.render() example, whereas they worked fine together in tslint-react 3.6.0.
Prettier removes any brackets around the JSX in the first parameter for reactDom.render, so it is not possible for:
render(
<ApolloProvider client={client}>
<Router history={history}>
<App />
</Router>
</ApolloProvider>,
document.querySelector('main') as HTMLElement,
);
to be written as
render((
<ApolloProvider client={client}>
<Router history={history}>
<App />
</Router>
</ApolloProvider>
), document.querySelector('main') as HTMLElement,
);
when using prettier like tslint 4.0.0 now wants it to be. Can whatever was changed between those two versions for this particular rule & case please be reverted?
from tslint-react.
the array false positive @adidahiya mentioned above has forced me to disable this rule... we use that pattern everywhere.
from tslint-react.
render(
<ApolloProvider client={client}>
<Router history={history}>
<App />
</Router>
</ApolloProvider>,
document.querySelector('main') as HTMLElement,
);
Here's the code that throws false positive jsx-wrap-multiline
for me.
from tslint-react.
tslint-react had this rule before prettier was widely used in the typescript ecosystem and before we started using prettier in Palantir projects. all the code formatting rules in tslint & tslint-react are "legacy" rules in that sense; they are not guaranteed to play nicely with prettier. if you use tslint-config-prettier (the recommended configuration approach), you should have all formatting rules disabled in favor of prettier.
from tslint-react.
I can repro this, looks like a bug
from tslint-react.
Is it still can be reproduced?
Checked by replacing test/rules/jsx-wrap-multiline/test.tsx.lint
with all code examples from this issue and link in original post. Win 10, tslint 4.5.1, tsc 2.2.1
Only example of bad code triggers error. Example with button in div passes lint as well as JSX Elements in array.
@adidahiya example from your last comment is false positive or false negative? I'd expect braces there too, but no lint errors at this moment.
from tslint-react.
I'm getting Multiline JSX elements must be wrapped in parentheses
from tslint-react.
@quantuminformation yeah, that's the same as my comment above #79 (comment)
from tslint-react.
I wouldn't call this a false positive:
return [
<button type="submit">
Submit
</button>,
<button type="button">
Cancel
</button>
];
I prefer:
return [(
<button type="submit">
Submit
</button>
), (
<button type="button">
Cancel
</button>
)];
One reason is that when refactoring it's very easy to leave the trailing ,
after the closing tag, which can end up appearing in your rendered markup.
from tslint-react.
@rhys-vdw problem with this way is that it is contradicting ESLint / Prettier rules...
from tslint-react.
I don't think we're going to fix this in tslint at this point. See #210 and palantir/tslint#4534. You're better off using prettier (edit: which you can already do without switching to ESLint).
from tslint-react.
but why would you want to enable jsx-wrap-multiline
when prettier
is enabled?
from tslint-react.
Good question, and one I really hadn't thought a lot about previously because the two packages worked in harmony previously and now do not.
Flipping the question back - if you're trying to encourage people to use prettier instead of tslint-react, why would you introduce conflicting formatting that makes migration between the two projects require additional work when it had previously been working in harmony? Now anyone using tslint-react has had to change their render functions from a prettier-compatible format into a prettier-incompatible format, only to have them changed back again after migrating to prettier. That introduces unnecessary noise to git commit/blame histories for no real benefit, and no good reason when the change wasn't needed in the first place.
from tslint-react.
Related Issues (20)
- React must be in scope in tsx file HOT 4
- Feature request: pair ReactDOM.unmountComponentAtNode with ReactDOM.render calls. HOT 1
- Why jsx-alignment do not includes automatic code fix? HOT 1
- Rule suggestion: no unneeded <React.Fragment> or <> HOT 1
- jsx-wrap-multiline does not enforce end-paren if begin-paren is valid HOT 1
- jsx-no-bind bug? HOT 5
- Pull in rules from tslint-microsoft-contrib HOT 3
- Cannot set "jsx-boolean-value" to 'never' ? HOT 1
- jsx-wrap-multiline does not check nested JSX HOT 2
- New rule suggestion: jsx-singleline-no-parens HOT 1
- jsx-no-multiline-js: allow multiline block comments HOT 2
- Migrate to eslint-plugin-react HOT 2
- react-ssr-friendly HOT 3
- Roadmap: tslint-react -> eslint-plugin-react HOT 1
- jsx-self-close rule doesn't actually support autofix HOT 1
- jsx-wrap-multiline issue with trailing-comma HOT 2
- Automatically ignore null keyword usage within getDerivedStateFromProps method HOT 3
- Allow/disallow curly braces for string literal attributes (enforce double/single quotes only) HOT 1
- Missing LICENSE file in npm package HOT 1
- jsx-curly-spacing accepted formats HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tslint-react.