11/1/2023 0 Comments Phpstorm prettierNeat! I'd been using Tailwind v3 for some time now, without realizing there were deprecated class names in my code. Here's a real example from my personal site that I ran into recently: Example of output from ESLintĪs you can see, eslint-plugin-tailwindcss helped identify some deprecated classes that I was still using. With our scripts defined, we can now run these as part of our workflow to lint and format our code. As mentioned earlier, Prettier loads its plugins automatically, so the Tailwind plugin will be loaded for us already.įor complete list of available CLI options, see Prettier docs. Similarly, the format script will run Prettier and format it using the options specified in. eslintrc file we created earlier, including the plugins. This will use the config specified in the. The lint script will run ESLint on everything inside our src folder, and the -fix flag tells it to fix any automatically-fixable issues at the same time as well. eslintrc file at the root of your project: Next, we need to create config files for both ESLint and Prettier. Install these as dev dependencies: Configuration prettier-plugin-tailwindcss for Prettier.In addition to core ESLint and Prettier packages themselves, there are two main plugins that we'll need: Setup Installationįirst, let's install the necessary libraries. Frameworks and libraries often provide plugins that are meant to work seamlessly alongside them, whether official or developed by the open-source community, and Tailwind is no exception. There are plugins and shared configurations available for all sorts of use cases, enabling us to extend the base functionality of these tools. With Tailwind, this is particularly noticeable.īoth ESLint and Prettier have an extensive 3rd party plugins ecosystem. A lot of what we do as part of code authoring process can be automated away with these tools, and help reduce the cognitive load while writing code. Regardless of whether a project is using Tailwind or not, ESLint and Prettier are both tools that should be part of our workflow. Prettier's main job is to ensure consistency in code, no matter the development enviornment or the number of people working on the same file. It concerns itself more with code style - things like line length, indentation, syntax, etc. Then we have Prettier, which is an opinionated code formatter. They generally concern themselves with code logic. Linters helps identify issues in our code, ensure consistency and reduce possibilities of bugs. Tailwind with ESLint and PrettierĮSLint is a code linter. In this article we'll take a look at how tools like ESLint and Prettier can help us never have to think about class names again, and provide some helpful guidance along the way. With long strings of numerous Tailwind classes and all sorts of possible combinations, it's understandable how that can become a bit daunting.īut, I'm here to tell you that it doesn't have to be! The Solution One argument you often hear from opponents of Tailwind CSS is how unreadable it makes your page markup, and in particular the class attribute. If you're working with Tailwind CSS on a regular basis, there are a few tools at your disposal that can help streamline some of the code authoring workflow.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |