How do you format CSS and JavaScript/TypeScript with `mix format`?

Questions / Help
, ,
1

I know you can use plugins, but I couldn’t find any in the hex repos for formatting CSS and JS/TS. What’s the recommended solution for this?

2 Likes
2

Good question. Since I’m working with assets “by hand” I’m also interested. :thinking:

I’m not sure if mix format can or even should handle assets dir. What I’m sure about is that we can create an alias named format and call many aliases/tasks with such alias. One task could use system tools or online services to format code. That’s easy way if you know and especially have installed/used any in past. :+1:

However it would be amazing to have something like esbuild installer to install some formatter. I’m also interested, but additionally I would like to ask for SCSS and SASS as well. :muscle:

Unfortunately I’m worried that most of community is using Tailwind as it’s included by default. :worried:

3

For JS, TS and JSON files the modern formatter is Biome. The team behind Biome is still working on CSS support. Until that’s complete, you can format CSS files with Prettier - the legacy tool Biome is intended to replace.
Both of these tools can be installed with npm inside /assets directory and executed with mix, e.g.:

defp aliases do
  [
    "assets.format-js": [
      "cmd --cd assets/ npx @biomejs/biome format scripts/ --write"
    ],
    "assets.format-css": [
      # similar command for Prettier and /styles dir
    ],
    "format-all": ["format", "assets.format-js", "assets.format-css"]
  ]
end
4 Likes