loading...

Discussion on: Using ESLint and Prettier in a TypeScript Project

Collapse
bitttttten profile image
bitten

In VSCode I get a ts error like this photo (thepracticaldev.s3.amazonaws.com/i...) but if I run eslint by itself it does not report on it.

pwd$ ./node_modules/.bin/eslint --fix src/
pwd$

So my pre commit hooks do not bail out correctly as they always seem to pass. Surely I must be missing something?

Collapse
robertcoopercode profile image
Robert Cooper Author

ESlint doesn't check for TypeScript errors, so if you want to check for TypeScript errors in your pre commit hook, you'll need to run the tsc --noEmit command in addition to the ESLint command.

Here's a pre commit command that you could use:

"husky": {
    "hooks": {
        "pre-commit": "tsc --noEmit && eslint --fix src/"
    }
},

However, I would suggest using lint-staged so you don't have to run the eslint command on all the files in your src/, but rather only run it on files that are staged to be committed. This will save you time.

"husky": {
    "hooks": {
        "pre-commit": "tsc --noEmit && lint-staged"
    }
},
"lint-staged": {
    "*.{js,ts,tsx,jsx}": [
        "eslint . --fix",
        "git add"
    ]
}
Collapse
bitttttten profile image
bitten

Oh well that makes total sense. I though eslint with ts was doing tslint, and I thought tslint would do these kind of checks.

Many thanks, and yeah, I went with the section option:

    "lint-staged": {
        "src/**/*.{tsx,js}": [
            "prettier --single-quote --write",
            "eslint --fix",
            "git add"
        ]
    },
Thread Thread
dance2die profile image
Sung M. Kim

Thank you Robert for the easy-to-follow article & bitten for adding the prettier option.

I was able to get the eslint & prettier set up for my pet project after following this post & the comments.

cshooks / hooks

List of all React hooks using data structures and algorithms

cshooks

All Contributors Known Vulnerabilities

A collection of React Hooks using Computer Science (CS) data structures & algorithms.

Purpose

Mainly to learn CS data structure & algorithms
(and also implement'em in TypeScript).

Hopefully some of the arcane data structures & algorithms help you as well.

Implemented

useTrie

Returns a Trie data structure, which is used to save a list of words to search in memory efficient manner & provide a type-ahead (not yet implemented) functionality.

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!