chore: add prettier-plugin-tailwindcss & eslint cache #4114
Conversation
QuiiBz
requested review from
a team,
KATT,
trpc-bot,
sachinraja,
bautistaaa and
juliusmarminge
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -11,7 +11,7 @@ type Props = { | |||
|
|
|||
| export const ContentSlider = ({ cards }: Props) => { | |||
| return ( | |||
| <div className="no-scrollbar grid snap-x snap-mandatory gap-8 overflow-x-auto px-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3"> | |||
| <div className="grid snap-x snap-mandatory gap-8 overflow-x-auto px-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3"> | |||
There was a problem hiding this comment.
no-scrollbar class doesn't exists
www/src/components/Preview.tsx
Outdated
| @@ -10,7 +10,7 @@ export const Preview = () => { | |||
| muted | |||
| playsInline | |||
| width="1200px" | |||
| className="border-6 rounded-lg border-[#111111] bg-[#111111] shadow-xl md:hidden" | |||
| className="rounded-lg border-4 border-[#111111] bg-[#111111] shadow-xl md:hidden" | |||
There was a problem hiding this comment.
border-6 doesn't exist in tailwind, so I've replaced it with border-4. We can also use an arbitrary value instead.
.eslintrc.js
Outdated
| @@ -8,6 +8,7 @@ const config = { | |||
| 'plugin:@typescript-eslint/recommended-requiring-type-checking', | |||
| 'plugin:react/recommended', | |||
| 'plugin:react-hooks/recommended', | |||
| 'plugin:tailwindcss/recommended', | |||
There was a problem hiding this comment.
i've only used the prettier-plugin before - how does this compare?
I was thinking of making a PR just now migrating to tailwind 3.3 with TS config, does this support that? We added support to the prettier plugin here: tailwindlabs/prettier-plugin-tailwindcss#137
There was a problem hiding this comment.
This eslint plugin is similar to the prettier one (to order class names) but also adds some interesting rules.
tailwind.config.ts doesn't seem to be supported yet, but I'll happily dig into adding support for it: francoismassart/eslint-plugin-tailwindcss#228
|
Just checked this out and was gonna fix the eslint plugin but autosave is suuuuperslow for me now - is this a heavy plugin? Saving a file is like 5sec - and that's after making the plugin only run on www & websocket example |
|
Changed to prettier plugin for now, but left the eslint config in there just commented out so we can swap later if it gets faster (im guessing its cause i put the ts-configs in there and it doesn't load those properly) |
juliusmarminge
changed the title
|
Hijacked your PR even more and updated prettier too XD |
I thought it was a bug on my computer, but sadly yeah it appears that it's kinda slow :( Does the prettier plugin supports |
Yes it does! tailwindlabs/prettier-plugin-tailwindcss#137 |
🎯 Changes
Add eslint-plugin-tailwindcss for automatic class name sorting, and some utility rules:
no-arbitrary-valuerule is set to warn, we have around 15 occurrences in www. Do we want to turn it off?no-custom-classnamerule is set to warn by default, which allowed me to fix unused/wrong classesThis PR also adds
--cacheto every eslint call, which greatly improves the speed of running eslint locally (it only reruns on files that have changed)✅ Checklist