Josh Goldberg - Setting Up ESLint and TypeScript for React

React

Setting up ESLint and TypeScript for React: Learn how to effectively use these tools to improve code quality, separating code validation and formatting into distinct tools, and discover the benefits of the TypeScript ESLint combo.

Key takeaways

Don’t enable ESLint for formatting, as it’s meant for linting, not formatting
TypeScript is a programming language that describes the existing JavaScript code
ESLint is a linter that scrutinizes code without modifying it
Linters and formatters are two different tools with different purposes
Type information is crucial for linters, while JavaScript alone can’t provide it
TypeScript ESLint combo provides more accurate results
Don’t feel pressured to do everything yourself; open-source communities can help
Use prefer-const rule to auto-fix code and make it more readable
Recommend using max-len and no-mixed-operators rules
A formatter is a tool that auto-formats code, while ESLint is for code validation
TL;DR: Separate code validation and formatting into distinct tools
Don’t over-engineer; keep it simple
A disabled directive can quietly remove unnecessary code
prefer-const rule can auto-fix variable assignments
ESLint rules should be set to error, not warn

Josh Goldberg - Setting Up ESLint and TypeScript for React

More talks