I’ve got a bit of a productivity/workflow tip for you this week. If you’re using VS Code (and I assume most other editors probably have a similar feature) then you can utilise User Snippets to speed up tasks that you commonly do.
The basic idea is this. Just hit Cmd+Shift+P to bring up your command palette and then search for Configure User Snippets. Then you can choose typescript or whatever files you want snippets for.
In this file, you can define a keyword that will activate a snippet, and then if you type that in a TypeScript file you will be prompted to use the snippet.
For example, I have the following snippet set up:
The $0 specifies where the cursor should be after the snippet is dropped in.
Now if I am in a Typescript file and type fn, I will get a little popup that
looks like this:
If I hit enter now (the snippet is usually the first result, but sometimes you might have to navigate down first), the snippet will be dropped into the file.
I don’t define snippets for many things, but for little things like this that I do all the time it is a real time/annoyance saver. At least with my keyboard set up, hitting all the symbols required for an arrow function like this is actually pretty annoying.
I also have snippets set up for:
- describe and it blocks for automated testing
- a dt snippet that expands to a [data-test=""] selector
- console logs
- an entire file template for different types of TestBed setups
I think this snippet feature is fantastic, because it really lets you hyper optimise things for your specific workflow. Find the things you do all the time, and create snippets for them!