How to Auto Fix Lint on Save with VS Code TSLint Extension

Wouldn’t you rather spend time coding than fixing pesky lint errors? The best time saver for developing TypeScript apps is auto-fixing lint on save. This is a quick instruction to endow this magical power to your VS code.

Steps

(1) Install tslint in your project.

npm i –save-dev tslint

(2) Add tslint.json file into your root folder

You can define whatever linting rules you want to use in this file. Here is the example.

{
  "rules": {
    "no-trailing-whitespace": [true, "always"],
    "prefer-const": [true, {"destructuring": "any"}],
    "semicolon": [true, "always"],
    "space-before-function-paren": [true, "never"],
    "quotemark": [true, "single"]
  }
}

(3) Install VS code TS Lint Extension

I use the deprecated version, TSLint (deprecated) because it does the auto fix on save. In the future, the newer one will probably have the same functionality. Until then, this one is better!

(4) Set tslint.autoFixOnSave to true

Go to File > Preference > Settings. Search for tslint. You will see TSLint: Auto Fix On Save will come up under UserSetting. Click Edit in settings.json.

Set tslint.autoFixOnSave to true

That’s it. Now the VS code fixes lint on save automatically according to your definition in tslint.json.

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …