-
-
Notifications
You must be signed in to change notification settings - Fork 101
chore: add pettier #949
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
base: main
Are you sure you want to change the base?
chore: add pettier #949
Conversation
domoritz
left a comment
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.
At the moment, we don't use prettier.
To add this we would need to
- make prettier a dev dependency
- add prettier support to eslint
- ignore schema files
We should make sure that there are no degredations after we add prettier.
.prettierrc.json
Outdated
| { | ||
| "singleQuote": true, | ||
| "tabWidth": 2, | ||
| "trailingComma": "none" |
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.
I think we want a print width of 120
Addressed these. Hope I added all the necessary schema files in Also added printWidth |
|
Do we need a prettierignore? Doesn't eslint do that? Or is that for editors with auto formatter? |
|
I think we might need |
|
Makes sense. Eslint will also support format on save. |
|
Ci is failing btw. We probably need to reformat as well. |
|
yep, lemme check it out |
eslint.config.js
Outdated
| import js from '@eslint/js'; | ||
| import tseslint from 'typescript-eslint'; | ||
| import globals from 'globals'; | ||
| import prettier from 'eslint-config-prettier'; |
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.
shouldn't this be import eslintConfigPrettier from "eslint-config-prettier/flat";? That's what https://www.npmjs.com/package/eslint-config-prettier says.
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.
sorry I forgot tseslint returns the flat config array. Fixed now!
|
Should we add a command to package.json to write the changes? |
|
Yes |
|
I added the script and formatted the files in two separate commits; I don't know if the change is too drastic to review, if it is we can undo this format command and leave it up to the developers to use later (?) |
package.json
Outdated
| "clean": "lerna run clean", | ||
| "lint": "lerna run lint", | ||
| "test": "tsc --build && lerna run schema && vitest run", | ||
| "write": "prettier --write '**/*.{js,ts,json,yaml}'", |
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.
No, please add format or lint:fix and let ESLint fix things.
|
I added both |
domoritz
left a comment
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.
Overall looks reasonable with a few comments below. Thanks for your help here!
| params: | ||
| bandwidth: 50 | ||
| thresholds: 10 | ||
| plot: |
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.
Isn't this generated? Then we should not reformat.
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.
what other files would this go for? just making sure I know what else is generated here
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.
I think the yaml and esm example are all generated. Try building the library and website without formatting and see whether anything gets reset.
| "test": "tsc --build && lerna run schema && vitest run", | ||
| "format": "prettier --write '**/*.{js,ts,tsx,json,css,md}'", | ||
| "lint:fix": "eslint '**/*.{js,ts,tsx}' --fix", | ||
| "format:check": "prettier --check '**/*.{js,ts,tsx,json,css,md}'", |
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.
That should be in lint already.
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.
what should be in lint? Sorry I don't understand?
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.
Lint should be a superset of format check
| "clean": "lerna run clean", | ||
| "lint": "lerna run lint", | ||
| "test": "tsc --build && lerna run schema && vitest run", | ||
| "format": "prettier --write '**/*.{js,ts,tsx,json,css,md}'", |
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.
Lint fix and format should be the same
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.
would having prettier-format not address more of files that eslint cannot go over though?
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.
Maybe. But then we should still have them in one command. I am also less worried about files other than ts.
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.
That makes sense. would you like me to make a combined command for them or just get rid of the prettier --write entirely?
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.
How much do we benefit from combined vs remove?
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.
How about we do:
"lint:fix": "eslint '**/*.{js,ts,tsx}' --fix && prettier --write '**/*.{js,ts,tsx,json,css,md}'",and then have a format:write command separately for the --write? Best of both worlds imo
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.
I don't suppose it's any harm removing the format command though; if we dont care about the files other than ts
| document | ||
| .getElementById('plot') | ||
| .replaceChildren( | ||
| vg.plot(vg.lineY(vg.from('aapl'), { x: 'Date', y: 'Close', tip: true }), vg.width(680), vg.height(200)) |
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.
This is worse in terms of readability. Any ideas how we can improve?
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.
umm.. I would say
- printWidth should be shorter like 80 or so (I tested 80 and works okay for me)
- es5 for the trailing commas
Doing that now...
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.
Let's try different line widths and see what gives us good results and fewer changes.
Why would trailing commas help?
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.
Maybe 100 is good
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.
Yeah 100 works well for me too :)
We dont wanna use "all" for it since trailing commas are not seen in the project, so to keep things close to the previous version and reduce changes, I thought "es5" would be a good idea
| .querySelector('#plots') | ||
| .replaceChildren( | ||
| vg.vconcat( | ||
| vg.hconcat(vg.hspace('2em'), vg.menu({ from: 'weather', column: 'weather', label: 'Weather', as: selection })), |
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.
This also looks worse. But maybe okay as a trade off.
| * @returns this | ||
| */ | ||
| queryError(error: Error): this { // eslint-disable-line @typescript-eslint/no-unused-vars | ||
| queryError(error: Error): this { |
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.
Why is this in a new line?
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.
good catch! This is interesting because the printwidth will wrap it to the next line. We have the option to:
- Move all these comments above the functions manually with
eslint-disable-next-line(time-taking) - Rename all unused args to start with
_perhaps? and then ignore them in global eslint config with something like"@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
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.
1 seems cleaner. Even better might be to disable the check and use typescript with @ts-expect-error. The advantage of that is that this will error when the variable is actually used.
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.
Pardon me, but why would you say that is an advantage?
| const sql = `${query}`; | ||
| if (isSelectQuery(query) && !cache.get(sql)) { | ||
| if ( | ||
| query._where.length || query._qualify.length || query._having.length || |
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.
Was there a reason for the grouping? Maybe use comments.
| sub(y, avg(y as ColumnRefNode)) | ||
| ) | ||
| ); | ||
| const sxy = sum(mul(sub(x, avg(x as ColumnRefNode)), sub(y, avg(y as ColumnRefNode)))); |
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.
Harder to read
.prettierrc.json
Outdated
| "singleQuote": true, | ||
| "tabWidth": 2, | ||
| "trailingComma": "none", | ||
| "printWidth": 120, |
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.
I think I prefer 100.
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.
Gotcha, will set it to 100
No description provided.