-
Notifications
You must be signed in to change notification settings - Fork 259
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Lint code with eslint and format with prettier #1172
Conversation
@kevgathuku I'm not familiar that much with prettier, but what does it do more than eslint in the end? :) |
@skjnldsv it's mostly for consistent code formatting When using eslint + prettier together, Does this make sense? |
@kevgathuku it does :) It's already doing the spaces/tabs checks, quotes, alignments, it even handle the coding style like spaces between curly, maximum number of functions (.then, .catch ...) per lines, stuff like that 🤔 |
@skjnldsv from what I can tell from looking at the config, you are using https://github.com/nextcloud/contacts/blob/vue/.eslintrc.js#L25 |
@kevgathuku aAaah, awesome! I thought it was the standard default for eslint (I don't really know that much on eslint and stuff :) ) That explains a lot!! Maybe we should move to prettier too then? :) |
@skjnldsv I haven't used Watching https://www.youtube.com/watch?v=kuHfMw8j4xk to educate myself about the differences between |
@kevgathuku Well, I'll be honest, I'm very fond of the current coding style we have on contacts. Working with two beginners (which are not really beginners anymore, but still discovering various coding styles), they seemed to be very happy on how it is displayed in the end and very clear. I tried quickly to setup the default styles of prettier, and It feels far too spaced for me. I know that some people like having new lines everywhere, but I don't really. Take a look at the code we have and tell me if you think it looks clear enough? |
I'll check it out @skjnldsv 👍 |
I've checked through the contacts app code @skjnldsv and it looks pretty neat 👍 I was trying to go for the same setup here i.e. using Once formatted, they would end up looking the same, just using different formatters 😄 Left: Contacts app To conclude, I'm not particularly tied to any tool, whatever we agree works best is what we'll go with |
Also, there are commits from #1171 here, so you might want to merge lastest master to update this branch. I have no preference on tools as long as they get the job done. I assume it's more important to choose consistent rules than exact tools. If the rules for styling are (almost) the same, it should also be easy to switch to a different linter later on. |
Exactly! 👍 |
16bef70
to
d6e90ae
Compare
d6e90ae
to
6bff18b
Compare
Thanks for the input @skjnldsv @ChristophWurst |
@kevgathuku is this ready for review? Please set the appropriate labels (2 developing or 3 to review) 😉 |
@ChristophWurst yep it's ready. |
Sure. Let's maybe do that in chunks of a few components each or maybe per folder in the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
Resolves #1130
Setup largely based off reading, which also contains info on how to configure your editor
https://medium.com/@doppelmutzi/eslint-prettier-vue-workflow-46a3cf54332f
To show errors on console, run:
npm run lint
To auto-fix errors, run:
npm run lint:autofix
The prettier config is in
package.json