feat: blog: Differences between linting and type checking #664
Conversation
✅ Deploy Preview for es-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for ja-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for new-eslint ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| // ~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
| // eslint(jsx-a11y/alt-text): | ||
| // img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. | ||
| ``` |
There was a problem hiding this comment.
[Question] Is there a preferred strategy for showing ESLint rule reports in code blocks within blog posts?
✅ Deploy Preview for hi-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for zh-hans-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for fr-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for de-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for pt-br-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| console.log("🍌"); | ||
|
|
||
| // eslint(no-fallthrough): | ||
| // Expected a 'break' statement before 'case'. |
There was a problem hiding this comment.
I don't love this first example:
- It's pretty verbose
- It doesn't show something that's clearly, definitely a valuable report ("what if I want to break through, that's too opinionated!")
...but I couldn't find a better lint rule that:
- Produces clear valuable report on a likely bug
- Is in
js.configs.recommended - Isn't superseded by TypeScript
Seeking inputs on a better example to show!
There was a problem hiding this comment.
no-unused-vars? Although I guess TypeScript is now flagging that, too.
no-unexpected-multiline?
There was a problem hiding this comment.
Yeah, and no-unexpected-multiline is pretty much made unnecessary by formatters... sigh
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Ran out of time so just left some comments on the first bits. Overall, I think we need to work on clearing up the language and the message. I'll continue looking tomorrow.
I'd also like to pull out adding support Bluesky social links into a separate PR as it's not really related to the article.
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
| 2. **Linters**: execute individually configurable checks known as "lint rules" | ||
| 3. **Type checkers**: collect all files into a full understanding of the project | ||
|
|
||
| We'll focus in this blog post on *linters*, namely ESLint, and *type checkers*, namely [TypeScript](https://typescriptlang.org). |
There was a problem hiding this comment.
I think we might want to expand this section a bit because both ESLint and TypeScript do more than one type of static analysis. For instance, ESLint also does scope analysis and code path analysis, while TypeScript does linting, scope analysis, and type checking.
There was a problem hiding this comment.
🤔 what would the benefit of that be? Now that the following section reports examples of each, what's the new info we'd want readers to know going in?
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
After taking another look at this, I see two areas of improvement for this post:
- You need to decide whether you are talking about linters and type checkers generically, or ESLint and TypeScript, specifically. My recommendation is update the intro to talk about ESLint and TypeScript, take a step back to talk about what static analysis is generically, then explain which types ESLint and TypeScript use, and then continue on the rest of the blog post specifically talking about ESLint and TypeScript.
- Make sure to include examples when you're describing abstract concepts. A lot of the verbiage around static analysis will be unfamiliar to most readers (including "type-safe"), so grounding those descriptions with concrete examples is important.
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
| console.log("🍌"); | ||
|
|
||
| // eslint(no-fallthrough): | ||
| // Expected a 'break' statement before 'case'. |
There was a problem hiding this comment.
no-unused-vars? Although I guess TypeScript is now flagging that, too.
no-unexpected-multiline?
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Nicholas C. Zakas <[email protected]> Co-authored-by: Amaresh S M <[email protected]>
| logUppercase(9001); | ||
| // ~~~~ | ||
| // Argument of type 'number' is not assignable to parameter of type 'string'. | ||
| ``` |
There was a problem hiding this comment.
[Question] Is there a preferred strategy for showing TypeScript reports in code blocks within blog posts? (similar to the question about ESLint rule reports later on)
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
src/content/blog/2024-12-04-differences-between-linting-and-type-checking.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Nicholas C. Zakas <[email protected]>
Prerequisites checklist
What is the purpose of this pull request?
Adds the blog post per #663.
What changes did you make? (Give an overview)
The post explains:
noUnusedLocalsandnoUnusedParametersIn adding myself as an author, I noticed there wasn't yet support for Bluesky URLs. So I added that in too. I can split that out if preferred.
Related Issues
Fixes #663.
Is there anything you'd like reviewers to focus on?