-
prettier-plugin-sort-imports
A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
prettier-plugin-tailwindcss
A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
-
-
-
I tried tons of frontend tools this year in my pursuit to optimize my Developer Experience. I published an incredibly fast minimal template with sensible defaults which you can use to quickly spin up new projects: cpojer/vite-ts-react-tailwind-template.
Despite the existence of Prettier, arguments about code style such as how to sort ES module imports still exist. Manually sorting ES modules wastes time, and usually leads to losing context when you are writing code and then have to navigate to the top of a file to modify your import statements. I love using the @trivago/prettier-plugin-sort-imports plugin which automatically sorts new imports, and works perfectly together with TypeScript's auto-import feature. Similarly, prettier-plugin-tailwindcss automatically sorts Tailwind classes in your code.
Despite the existence of Prettier, arguments about code style such as how to sort ES module imports still exist. Manually sorting ES modules wastes time, and usually leads to losing context when you are writing code and then have to navigate to the top of a file to modify your import statements. I love using the @trivago/prettier-plugin-sort-imports plugin which automatically sorts new imports, and works perfectly together with TypeScript's auto-import feature. Similarly, prettier-plugin-tailwindcss automatically sorts Tailwind classes in your code.
Before switching to the above, I used to use ts-node-dev but it does not support ESM or swc properly.
Given my use of vite, I would like to use tsx in the future but after multiple attempts, it always added a 10x performance overhead for API requests in development and I ran out of time figuring out why.
TypeScript
Vite is the best and fastest dev server I've used. I was skeptical at first, but now I don't enjoy working on any front-end project that isn't using Vite. With esbuild under the hood, it builds whole projects faster than it takes others to hot reload a single change. While other bundlers can be made fast, Vite does it all out of the box with almost no configuration required.
Tailwind is another project I was initially skeptical about. After a year of using it, Tailwind's tradeoffs make sense to me. The way it abstracts styling into a system of CSS variables instead of direct CSS property assignments is genius. I recommend using it if you want sensible defaults for styling, smart composition for styles, and consistency across your project. The way it handles dark-mode styles is nice, too.
I'm incredibly excited about the potential of Rome tools. Rome's formatter and linter are close to production ready, and hopefully when I refresh this post next year, I'll be able to drop a bunch of paragraphs and replace them with just rome.
TypeScript (and to a lesser extent React) are unwritten standards at this point. TypeScript especially offers an incredible productivity boost to any project. I assume all new frontend projects use TypeScript unless there is a really strong reason not to, and I'm just including this paragraph for completeness and to show my appreciation that's been ongoing since January 11th 2013. Thanks TypeScript team ❤️
ESLint and Prettier are widely adopted and you are likely using them already. They both serve overlapping concerns around code style, and on the surface, it seems like a good idea to run Prettier within ESLint. However, upon profiling why ESLint was slow on a bunch of projects, I noticed prettier consistently taking about 50% of the total ESLint runtime. If you are formatting your documents on save, there is no point in running Prettier within ESLint at the same time.
ESLint and Prettier are widely adopted and you are likely using them already. They both serve overlapping concerns around code style, and on the surface, it seems like a good idea to run Prettier within ESLint. However, upon profiling why ESLint was slow on a bunch of projects, I noticed prettier consistently taking about 50% of the total ESLint runtime. If you are formatting your documents on save, there is no point in running Prettier within ESLint at the same time.
Vite is the best and fastest dev server I've used. I was skeptical at first, but now I don't enjoy working on any front-end project that isn't using Vite. With esbuild under the hood, it builds whole projects faster than it takes others to hot reload a single change. While other bundlers can be made fast, Vite does it all out of the box with almost no configuration required.
Related posts
-
How to make ESLint and Prettier work together? 🛠️
-
Shared Tailwind Setup For Micro Frontend Application with Nx Workspace
-
Tailwind CSS: Automatic Class Sorting with Prettier
-
How I approach and structure Enterprise frontend applications after 4 years of using Next.js
-
6 Regrets I Have As a React Developer