React props auto-complete in VS Code

Maxime Bouveron — Mon, 04 Nov 2019 13:13:05 +0000

React props auto-complete in VS Code

Strong autocomplete is one of the reasons why I love VS Code so much, it saves so much time. It is especially useful when using an external library, you don't need to read all the docs when writing function parameters for exemple.

Unfortunately, when it comes to React components, autocomplete doesn't work as well as vanilla JavaScript : By default when writing props for a non-typescript typed class component, you don't get any suggestions, even with defined PropTypes. It does provide suggestions for functional components though.

While searching for a solution to this problem, I found this extension. It does work, but it's not perfect. Suggestions aren't sorted, meaning you'll find them mixed with other suggestions (like the less usefull "word suggestions") and everyone in your team will have to download the extension, less than optimal.

By searching a little more however, I found a very cheap trick (yes, I think we can officially call this a trick) : a single specific JSDoc comment.

JSDoc is the key

For those who don't know, JSDoc is a special comment markup used in JS files to write documentation. You can use it to describe a function for example, including its purpose, its parameters or the returned value.



/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}

Example from JSDoc's website

You probably see where I'm going, but there's a twist.

A React component is just a class or a function, meaning you can use JSDocs like any other class or function. It's great for explaining what your component does :

Yeah sorry, that's an image but Markdown doesn't like code snippets in code snippets

Problem is : what about props? For functional components, VS Code already shows you all of them in suggestions, but what about class components? You could define them as parameters in your JSDocs comment but that wouldn't be exactly true and you'll have to update it each time a PropType changes. That's where The Trick™ comes in

The Trick™

By adding @augments {Component<Props, State>} to your component's JSDoc, you'll add full PropTypes suggestions to your Class components :



/**
 * Random Component
 * @augments {Component<Props, State>}
 */
class RandomComp extends Component {
    static propTypes = {
        value: PropTypes.number,
        disabled: PropTypes.bool.isRequired,
    }

Which will result in this when using the component :

Yep, that easy. As you can see, even types are supported. (Required isn't though...)

It doesn't even stop here! You can add JSDoc comments to each PropType!



/**
 * Random Component
 * @augments {Component<Props, State>}
 */
class RandomComp extends Component {
    static propTypes = {
        /** The component's value*/
        value: PropTypes.number,
        /** Is the component disabled? */
        disabled: PropTypes.bool.isRequired,
    }

Please note that this also works with Function components



const SayHello = ({ name }) => <p>Hello {props.name}!</p>

SayHello.PropTypes = {
  /** Your name! */
  name: PropTypes.name,
}

This will considerably reduce complexity of using a component, you won't have to Ctrl+Tab back and forth between the component you're currently working on and the one you want to use.

Hope this small tutorial was useful, even though a lot of people know about JSDoc (thankfully!), not a lot of people know how to tell VSCode to actually read PropTypes.

Extend console's methods without losing line information

Maxime Bouveron — Tue, 10 Sep 2019 11:58:20 +0000

Get ready for the most needlessly precise and niche post of this website as today we're learning how to add a colored chip in front of your browser's console logs!

Extending console's log, error, warn or other methods can be very useful to easily add some information or context to each log, especially using CSS styling!

There's lots of ways we can use that but in this example we'll focus on how to easily identify logs coming from a library.

You'll need to actually replace the method by a new one, I recommend doing so in your app entry point (index.js in my case)



const stylesWarning = [
    'background: #FFC82C',
    'border-radius: 3px',
    'color: white',
    'font-weight: bold',
    'padding: 2px 5px'
].join(';')

const _warn = console.warn;

console.warn = function(warnMessage) {
  console.group("%cMyLibrary", stylesWarning)
  _warn.apply(console, arguments)
  console.groupEnd()
}

You can then use the method as you would usually :

Which will result in this :

Convenient and pretty!

There's one problem though: the log's file and line number doesn't represent our original log but where our method was rewritten. (index.js instead of App.jsx in this case) Not that convenient.

Thankfully, there's a trick around that one: instead of replacing it with a new function, you need to modify the log method itself and return it. (Thank you StackOverflow's kylehuff!)



console.warn = function() {
  return Function.prototype.bind.call(_warn, console, "%cMyLibrary", stylesWarning);
}();

Which will result in something similar to the previous one (I actually find it prettier) except for the line number showing the actual file and line number.

If you or anyone in your team use VSCode's debugger, there's a little trick : CSS styles aren't reset between each argument so you'll need to add a second "%c" and a meaningless CSS rule string if you don't want your whole line colored, like so:



console.warn = function() {
  return Function.prototype.bind.call(_warn, console, "%cMyLibrary%c", stylesWarning, 'color: inherit');
}();

The result is pretty useful and you won't have to change any of your console calls. If you can tough, I recommend writing your own logger helper without mutating the console object, it'll be less risky but you'll have to refactor a lot of code.

What do you think? Do you use this kind of tricks in your projects? Don't hesitate to comment!

Forem: Maxime Bouveron

React props auto-complete in VS Code

React props auto-complete in VS Code

JSDoc is the key

The Trick™

Extend console's methods without losing line information