Better tooling support in vscode

[guledali]

It would be nice if we could get some IntelliSense with prop-types and stuff like auto-completion, type-checking during compile-time. Like getting error reports directly in your editor

[ljharb]

Error reports require runtime values; that’s what your tests are for.

[guledali]

@ljharb Sorry for the delay

What I meant was something like tsx (react and TypeScript), if you don't pass the props the editor will yell at you. I know prop-types is different but I think some improvement can be made to achieve something similar.

Also I know you can configure eslint such as prop-types will complain at you. If you don't pass the correct prop-type. I Want the same experience just without the eslint!

[ljharb]

There’s no way to use PropTypes in that manner without a type system, like flow or typescript.

eslint ensures that PropTypes exist - it does not, in any way, validate the actual type of the prop you’re passing against an arbitrary PropTypes (i maintain eslint-plugin-react)

[guledali]

@ljharb But can this not be build with some type system. Something like JSDoc that gives you much of the benefits like IntelliSense, auto-completion, error-reports and typechecking that TypeScript offers like.

The reason why I'm pushing this is I love prop-types the simpleness and that it's build in react so that you don't have to reach for something else, but I have been using TypeScript lately and the typechecking it offers. It's whole another level, especially the tooling that you get from vscode. You getting type-error in realtime as you typing I want something similar for prop-types.

[ljharb]

a type system would be what reads the jsdoc. You can’t do that with PropTypes unless all of your values are typed throughout.

[joshpitzalis]

vs code picks up JsDoc comments so you can write the following and it will give you type info when you hover over one of the props

/** @param {({
 * details:string,
 * dealine: number,
 * goalId: number 
 * })} props */
export const Objective = ({ details, deadline, goalId }) => {...}