[frontend] Switch to TSLint #154
Description
/area frontend
/kind feature
Background: We have a tslint.json but lint with eslint due to react-scripts webpack
I added some generated protocol buffers in 13794fc and broke frontend webpack compile due to lint failures for the no-undef rule. I was thrown off by the fact that there is a tslint.json configuration file but the failures were an eslint rule.
Adding the generated file path to an eslintIgnore block in package.json didn’t work and adding the path to tslint.json didn’t fix the webpack compile either.
How does eslint get run?
When scripts run by create-react-app launch webpack the linting phase uses eslint-loader with the eslint-config-react-app configuration [1], which uses @typescript-eslint to provide linting rules for TypeScript files to ESlint [2] without adding a dependency on tslint.
This configuration also ignores any eslintIgnore or eslintConfig blocks in package.json unless the EXTEND_ESLINT environment variable is set [3].
Proposal: Modify the project to use TSLint through react-scripts-ts
- Using
tslintwill prevent programmer error when trying to make lint changes intslint.json react-scripts-tsusestslintdirectly instead ofeslintwith TypeScript support [4]react-scripts-tsdoesn't require environment variables to apply TSLint config- Supports aligning frontend development practices with
kubeflow/pipelineswhich usestslint
Tasks for implementation:
- Switch
react-scriptstoreact-scripts-tsinpackage.jsonto pick uptslint.json - Remove eslint configuration lines from package.json
- Format the codebase using
tslint
Caveats
There are a lot of existing files in the codebase that don’t match the rules declared in tslint.json, so adding tslint will break the webpack compile until the lint errors are fixed. If we do this in conjunction with using adding prettier for code styles (#141), we can do both as one large-scale reformatting and reduce the merge overhead.