[blog/typescript-prettier-eslint-next-js] Official feedback thread

paulintrognon commented 3 years ago

You can leave your feedback about the post Start a clean Next.js project with TypeScript, ESLint and Prettier from scratch here. Constructive criticism welcomed!

(first feedback for this article: https://github.com/paulintrognon/paulintrognon.fr/issues/5 - opened before I decided to create a dedicaded issue thread)

jancassio commented 3 years ago

Hello, thanks for sharing this post. It was helpful for me.

I got only one issue there, in bonus section you have this instruction to install required packages for jest setup.

yarn add --dev jest @types/jest babel-jest jest-watch-typeahead react-test-renderer @types/react-test-renderer

You missed identity-obj-proxy module.

Cheers,

paulintrognon commented 3 years ago

You missed identity-obj-proxy module.

Oh you are right! Thank you very much! :) Fixed with 07ad69976ec000e0d9f34c166f5bf8e76d779829

rburgst commented 3 years ago

when running the lint yarn task, it does not appear to find anything.

"lint": "eslint --ext js,jsx,ts,tsx --fix",

yarn eslint --debug --fix --ext ts
yarn run v1.22.10
$ /Users/rainer/git/private/proshop-next/node_modules/.bin/eslint --debug --fix --ext ts
  eslint:cli CLI args: [ '--debug', '--fix', '--ext', 'ts' ] +0ms
  eslint:cli Running on files +4ms
  eslintrc:config-array-factory Loading JSON config file: /Users/rainer/git/private/proshop-next/package.json +0ms
  eslint:ignore-pattern Create with: [ IgnorePattern { patterns: [ '/**/node_modules/*' ], basePath: '/Users/rainer/git/private/proshop-next', loose: false } ] +0ms
  eslint:ignore-pattern   processed: { basePath: '/Users/rainer/git/private/proshop-next', patterns: [ '/**/node_modules/*' ] } +2ms
  eslint:ignore-pattern Create with: [ IgnorePattern { patterns: [ '/**/node_modules/*' ], basePath: '/Users/rainer/git/private/proshop-next', loose: false } ] +0ms
  eslint:ignore-pattern   processed: { basePath: '/Users/rainer/git/private/proshop-next', patterns: [ '/**/node_modules/*' ] } +1ms
  eslint:file-enumerator Start to iterate files: [] +0ms
  eslint:file-enumerator Complete iterating files: [] +3ms
  eslint:cli-engine Linting complete in: 4ms +0ms
  eslint:cli Fix mode enabled - applying fixes +18ms
✨  Done in 0.36s.

rburgst commented 3 years ago

found the solution, need to also add . as the default path for eslint to find the files. So if you want to lint/fix all files then you need to run

yarn lint .

paulintrognon commented 3 years ago

found the solution, need to also add . as the default path for eslint to find the files. So if you want to lint/fix all files then you need to run

yarn lint .

Yes, this is intentional to make the lint task compatible with lint-staged, but I agree this can lead to some confusion. I will try to make this point clearer in the post. Thank you for your feedback.

msfern commented 3 years ago

Just found this post and it has helped me immensely. Thanks a lot!

oitan commented 3 years ago

I always struggle setting up eslint+prettier (with typescript and react especially). And the post is the gem for me which felped both understand and actually make it work. Thank you for your post!

eddsaura commented 3 years ago

Hey I just came here to say thank you, it was really helpful!

DonaldIvan commented 3 years ago

Hey man, you are awesome. You really rock it when you explain every command and package you use there. Keep it up! thanks a lot!

Thanaen commented 3 years ago

Hi there ! That's a really useful blog post. It makes it really easy to have a clean Next.js setup. Thanks for your work. :)

cforsyth68 commented 3 years ago

Thanks for writing up that article. It was quite helpful to me.

ElmouradiAmine commented 2 years ago

⚠️ In the future, after you or someone else clone the project, you will need to run yarn husky install to enable husky Hi, thank you for the amazing blog. I just wanted to point out there is a way to avoid this problem. It's by adding postinstall script in package.json with the following command: husky install

scott-schibli commented 2 years ago

I cloned and ran npm install and the prettier works on save. However, there is not error highlighting as I am typing. is this on purpose? or is it suppose to show a red line under code that is not formatted correctly?

paulintrognon commented 2 years ago

I cloned and ran npm install and the prettier works on save. However, there is not error highlighting as I am typing. is this on purpose? or is it suppose to show a red line under code that is not formatted correctly?

@scott-schibli Yes it is on purpose. This is because I did not integrate Prettier as eslint errors, but as a separate formatter tool, as advised by Prettier dev team :

You end up with a lot of red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in your face about it!

But if you like having Prettier errors shown with red lines, then you should install the plugin eslint-plugin-prettier