Latest tips / 13

Did you just commit some changes and forget to delete that console.log('test') statement? Use git commit with --amend to edit the previous commit and --no-edit to keep the previous commit message.

# 1. Delete the console.log

# 2. Stage the changes
git add my-file.js

# 3. Commit by updating the previous commit
git commit --amend --no-edit

Do this for local commits only. Don't amend commits that you already pushed.

Brace expansion lets you generate arbitrary strings in your terminal. Place a comma-separated list of items in curly braces {} and add prefix and/or suffix. It will repeat the prefix / suffix for every item in the list.

# Deletes image-01.png, image-17.png and image-42.png
$ rm image-{01,17,42}.png


# "Hello " must be in quotes because it ends with a white space
# Without quotes it would generate "Hello World everyone"
$ echo "Hello "{World,everyone}
Hello World Hello Everyone


# Installs @radix-ui/react-accordion, @radix-ui/react-checkbox
# and @radix-ui/react-switch
npm i @radix-ui/{react-accordion,react-checkbox,react-switch}

Emmet let's you generate code by writing CSS-like expressions. Write a small expression, press tab and it will generate the output for you. VS Code supports Emmet out of the box.

Here is an example that generates a submit button with id submit, class primary and the content "Submit" as shown in the preview tooltip.

Here is another example:

<!-- Expression -->
ul.list>li.item*5

<!-- Output -->
<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

See the official cheat sheet for more information.

Let's say you have a switch statement that handles all values of an enum (or some other type with a limited number of possible values). When you extend that enum sometime in the future you may forget to add a new case to the statement.

With TypeScript you can use an assertUnreachable() function to ensure that all possible cases are handled:

function myFunction(value: SomeEnum) {
  switch (value) {
    case SomeEnum.ONE:
      // ...
      break;

    case SomeEnum.TWO:
      // ...
      break;

    default:
      // Ensures that all cases are handled
      assertUnreachable(value);
  }
}

The assertUnreachable() function works by defining an argument of type never:

function assertUnreachable(_value: never): never {
  throw new Error("Statement should be unreachable");
}

When you now extend the enum TypeScript will show an error:

In TypeScript numbers can be separated using underscore. This improves the readability of large numbers.

// Bad, hard to read. How many zeros are there?
const MAGIC_NUMBER = 1000000;

// Good
const MAGIC_NUMBER = 100_000;