tslint rules unable to operate on JSX nodes
- Dominant language
- JavaScript
- Stars
- 6.5k
- Forks
- 772
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
I'm not sure this is a bug, it's also possible that it might be misunderstanding thing about how the tool / the TS/JS parsing and transforming works. I work on a project with custom tslint rules enabled for it, and - like with tslint-react - I can use the JSX parts of the typescript API, like ts.SyntaxKind.JsxElement. For non-JSX rules, I can use ASTexplorer to develop or play around with rules to understand them, but when the rule has JSX, I can't work with JSX nodes, despite it showing up in the parsing tree.
**To Reproduce**
Steps to reproduce the behavior:
1. Select JavaScript as the language, typescript as the parser, and tslint as the transform. Enable jsx under the typescript options.
2. Enter JSX (React, in this case) code into the upper left code window, and enter a rule in the bottom code window. The rule has some type of walker that attempts to compare the node's kind with ts.SyntaxKind.JsxOpeningElement (or any other JSX type of element). (In this specific case, I am just trying to mark every single JSXOpeningElement as a failure).
**Expected behavior**
The lint rule will output linting errors at several spots - one at every node that is a JsxOpeningElement
**Browser (please complete the following information):**
- OS: macOS 10.14.16
- Browser Chrome, Firefox
- Version: Chrome 80.0.3987.106 , Firefox 73.0.1
**astexplorer settings:**
- Selected parser: typescript
- Selected transformer: tslint
- Contents of the local storage key `explorerSettingsV1` (code can be removed if you don't want it to be public
`{“showTransformPanel”:true,”parserSettings”:{},”parserPerCategory”:{“javascript”:”typescript”},”workbench”:{“parser”:”typescript”,”code”:”import * as React from ‘react’;\nimport { Image, StyleSheet, Text, View } from ‘react-native’;\nimport { Constants } from ‘../utils/Constants’;\nimport { GreenCheckMark } from ‘./Svgs’;\n\ninterface IProps {\n\tproductName: string;\n\tproductImage: any;\n}\n\nexport class HeaderView extends React.PureComponent {\n\tpublic render() {\n\t\tconst { width, height, url } = this.props.productImage;\n\t\tconst productName = this.props.productName;\n\t\treturn productName ? (\n\t\t\t\n\t\t\t\t\n\t\t\t\t{this.renderItemImage(width, height, url)}\n\t\t\t\t\n\t\t\t\t\t{Constants.Strings.AddedToCart}\n\t\t\t\t\t\n\t\t\t\t\t\t{productName}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t) : null;\n\t}\n}”,”keyMap”:”default”,”transform”:{“code”:”export class Rule extends Lint.Rules.AbstractRule {\n public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {\n return this.applyWithFunction(sourceFile, walk)\n }\n}\n\nfunction walk(ctx: Lint.WalkContext): void {\n return ts.forEachChild(ctx.sourceFile, function cb(node: ts.Node): void {\n if (node.kind === ts.SyntaxKind.JsxOpeningElement) {\n ctx.addFailureAtNode(node, ‘Is JSX Opening Element’)\n }\n return ts.forEachChild(node, cb)\n })\n}”,”transformer”:”tslint”}}}`
**Additional context**
Here is a link to the astexplorer gist:
https://astexplorer.net/#/gist/823ef688a15c814776ecbbc51853bb86/3860d4a67443e1a8a095b82dfe18c230bbd87ac3
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the TypeScript parser and TSLint transformer selected in the reproduction, then trace how JSX nodes reach the rule walker. Validate the result with the supplied JSX example and confirm that the rule reports a failure for each JsxOpeningElement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- devtools, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100