Coding with TypeScript, Prettier and ?

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 :)

Comments

[Nick Taylor]

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.

Nick Taylor

Jan 30 '18

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

[Gyandeep Singh]

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

[Nick Taylor]

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.

[Gyandeep Singh]

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.

[Nick Taylor]

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

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.

• Babel
• React
• Gatsby
• Netlify & Netlify CMS
• undraw.co
• simple-icons
• and OSS in general.

To get up and running:

• clone the repository by running git clone [e-mail]: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…

View on GitHub

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

Using ESLint and Prettier in a TypeScript Project

Robert Cooper

#typescript#javascript#developertools

[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.