Lately we started a new project at work, written in React + Typescript. Of course, like any other project we wanted it to be automatically linted a...
For further actions, you may consider blocking this person and/or reporting abuse
Great article Dor! Quick question - how do you run eslint? From the command line? Have you found any way to tightly integrate with create-react-app? In other words,
npm startshould run your linter instead of create-react-app's.Thank you!
I've looked into that a while ago. There's an issue on the create-react-app GitHub about that (I'll link it when I find it), basically they say that the ESLint configuration react-scripts uses cannot be altered, and it contains only rules that might prevent bugs (such as unused variable).
I run it with the command line, and I've set up git hooks to run it on every commit (using husky and lint-staged).
Thanks for the response, Dor. Running husky/lint-staged is exactly what I am thinking of.
BTW, I am aware of the issue on the CRA repo: github.com/facebook/create-react-a.... See my comment on it related to this.
I was actually referring to this issue. Dan Abramov seemed pretty adamant there.
Ah, thanks for digging it up!
Great article, however in my case it didn't work. Running
./node_modules/.bin/eslint .just didn't output anything. After a few hours of cursing the universe, I found a solution. ESLint works out-of-the-box only for .js, so I had to tell it to lint .ts as well. It can be done by adding--ext ts../node_modules/.bin/eslint --ext ts .Hope it helps somebody!
Thank you, great tutorial!,
finally my ESlint works for TS almost properly.
Though, for me there is some rule conflict between eslint and prettier
and it either always inserts once 2 spaces on next file save 4 spaces. Or some weird tab is inserted.
Anyone same problem? How to fix, please?
I tried literally every possible combination of settings for
vscode workspace:
codepile.net/pile/83MNXYDz
prettier:
codepile.net/pile/ZwNz6vwE
eslint:
codepile.net/pile/4Q7Y0BxM
I have macOS Sierra 10.12.6
VSCode v. 1.35.1.
screenshot:
ibb.co/9Y7xSVp
SOLVED:
youtube.com/watch?v=mg_pDqszL3g
add rule "@typescript-eslint/indent": "off" to .eslintrc
I'm sorry I didn't get a chance to look into your problem, but I'm glad you figured it out. I've faced the same issue and solved it this way too.
No problem, I'm glad it works! Thanks!
Great post. I'm using eslint, prettier and TypeScript for my blog. I'm also a big fan of husky.
Here's my repository if you're interested.
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.
To get up and running:
git clone git@github.com:nickytonline/www.iamdeveloper.com.gitorgit clone https://github.com/nickytonline/www.iamdeveloper.com.gitnpm installnpm run developto get up and running with the Gatsby development server.npm run type-check:watchI wasn't aware of
'plugin:@typescript-eslint/recommended'. I'm going to add that to my eslint config. Thanks and looking forward to your next post!Thank you very much! I'll be sure to check it.
I was going through the same thing creating multiple TypeScript + React apps with the same configuration as you've spelled out so I created and npx package to do just that: npmjs.com/package/create-react-typ....
It looks really cool! I'll be sure to check it out when I get the chance.
Hey, great article on the setup of eslint & prettier for a TypeScript project. I was planning on writing a article on this exact topic, but you've pretty much covered everything on the topic ππΌ.