DEV Community

loading...

Coding with TypeScript, Prettier and ?

Gyandeep Singh
Associate lead Software Engineer (@cerner) Web, JavaScript, NodeJs, automation, being human, Dad, communication s key 😎 #StriveForGreatness
Updated on ・1 min read

Recently I started working on a new web app project and we used TypeScript on both front-end and the server. TypeScript was a game changer just from the types.

We need static code analysis and code formatting to make the code readable, correct and <whatever>. Here is how I solved this in my code setup:

  • Code analysis -> TypeScript compiler
  • Code formatting -> Prettier

That's it. Using pre-commit hooks it made my life so easy that i don't even have to think about code formatting as its done for me and consistent across the board. All I have to think about is the actual code.

Question: Do I need ESlint/TSLint to check my code for non-style issues?

Because typescript compilers already does that for you.

I am just asking because I have not felt the need for it and I know everybody uses it. So i am thinking what am I missing?

Please share your thoughts :)

Discussion (6)

Collapse
nickytonline profile image
Nick Taylor (he/him)

If you have a TypeScript project you should be using tslint. Choose your tslint config and then add the tslint prettier config as well. Here's a good article that talks about it.

You didn't mention it, but I'm curious what you use for pre-commit hooks. Are you using husky? If so, it works well with lint-staged.

You can run anything. lint-staged compliments this package very well. Here's an example, github.com/nickytonline/generator-...

Collapse
gyandeeps profile image
Gyandeep Singh Author

Thats my basic question on why do I need tslint? Typescript parser helps me detect all the code issues and prettier styles the code.

Collapse
nickytonline profile image
Nick Taylor (he/him)

Prettier formats the code and the TypeScript compiler type checks, but neither are linters. Prettier is linter-like in the sense, it does the linting formatting rules part. However, for example TS nor Prettier will enforce using const or the no-console linting rules or how a variable is written, e.g. camelCase vs. PascalCase. This is why I'd recommend also using tslint.

Thread Thread
gyandeeps profile image
Gyandeep Singh Author

I agree. I Have not made up my mind yet, thats why I am trying to understand what people do in similar project setup. Then i can also follow the same path.

Thread Thread
nickytonline profile image
Nick Taylor (he/him) • Edited

Update to this. I use eslint with TypeScript now. If you want to see my setup, check out

nickytonline / iamdeveloper.com

Source code for my web site iamdeveloper.com

iamdeveloper.com

Netlify Status

Hey there, I'm Nick and this is my site's source code. This site started off as a clone of the Netlify CMS Gatsby Starter (check it out!). Since then, I've tweaked it a lot and converted the codebase to TypeScript.

Feel free to peruse the code and/or fork it. 😉

Thanks to all the wonderful projects that made it possible to build this blog.

To get up and running:

  • clone the repository by running git clone git@github.com:nickytonline/www.iamdeveloper.com.git or git clone https://github.com/nickytonline/www.iamdeveloper.com.git
  • run npm install
  • run npm run develop to get up and running with the Gatsby development server.
  • Since the project uses Babel and not TypeScript as the compiler, a separate process is required to run type checking. Open another terminal and run npm run type-check:watch
  • If you're curious about why the Netlify CMS admin is…

Also, here's a great post from @robertcoopercode about TypeScript and ESLINT.

Thread Thread
robertcoopercode profile image
Robert Cooper

Woot woot thanks for the shoutout.

@gyandeeps and I have been discussing whether using a linter is at all useful when combined with TypeScript. He doesn't seem convinced, haha.