Add prettier to autoformat source, docs, and config #207
Conversation
.vscode/extensions.json
Outdated
| @@ -4,6 +4,6 @@ | |||
| "csstools.postcss", | |||
| "bradlc.vscode-tailwindcss", | |||
| "svelte.svelte-vscode", | |||
| "silvenon.mdx" | |||
| "unifiedjs.vscode-mdx" | |||
There was a problem hiding this comment.
Ah, I assume silvenon.mdx is now deprecated?
| @@ -35,3 +35,41 @@ More detailed docs exist on [the storybook](https://www.viam.com/prime). | |||
| Linked below are some articles that provide knowledge for how to best build reusable, generic web components. | |||
|
|
|||
| - [Custom Elements Best Practices](https://web.dev/custom-elements-best-practices/) | |||
|
|
|||
| ## Development tasks | |||
| </script> | ||
|
|
||
| <div class='relative w-full'> | ||
| <div class="relative w-full"> |
There was a problem hiding this comment.
Suggestion: Since we're interspersing JS + HTML here could we have prettier using single quotes for everything? I'd rather not have to mentally switch between the two in the same file.
There was a problem hiding this comment.
Definitely agree, and attempted to do so by setting jsxSingleQuote to true, but ran right into sveltejs/prettier-plugin-svelte#253.
Options, depending on how much we care about this:
- Live with it until issue is resolved
- Don't format
.sveltefiles until issue is resolved - Ditch the PR 😭
In my personal experience working in projects that used ' in JS and " in JSX, I stopped thinking about it quite quickly once "format on save" was turned on, but YMMV
There was a problem hiding this comment.
I'm cool with 1., my only rec would be to link sveltejs/prettier-plugin-svelte#271 somewhere in the eslint config so that we don't forget to track
Overview
After a very scientific poll in Slack with four 👍's and no 👎's, this PR adds prettier to this repository. I attempted to follow the config found in the
eslintsettings, the source itself, and viamrobotics/viam-typescript-sdk.I also added some brief usage instructions for development tasks/scripts to
CONTRIBUTING.md.Change log
This PR is split into
threevarious commits to aid reviewing:npm run formatIf helpful, I can split these changes into multiple PRs.
Test plan
Given automated tests in place (though they're a bit flaky on my machine; requiring increased timeouts for the code editor tests), I think giving Storybook a quick visual comparison to prod should be pretty good here.
You may notice that the browser table in the README is broken in Storybook. This an existing issue on the site due to Storybook v7 dropping GFM by default, and not caused by this PR.