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
Unable to Get Local Issuer Certificate for installing Npm Modules

unable to get local issuer certificate error with yarn install from a private npm repository (such as JFrog), you can try running this command: yarn config set “strict-ssl” false yarn install Error message example error An unexpected error occurred: “https://npco.jfrog.io/artifactory/api/npm/npm-mdh/@mdh/my-library/-/@mdh/my-library-3.21.0.tgz: unable to get local issuer certificate”.

Front-End
Moving away from React.FC and React.VFC

Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more. See this pull request. It states: Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff". As …

Front-End
How to fix react-day-picker flickering hover state between mouseenter and mouseleave

I had an issue with react-day-picker flickering hover state between mouseenter and mouseleave when the cursor was on the edge of the day I was trying to select. This is not a bug in the library. It was the custom style I added to the hover state that was causing …