budgie
How do you format CSS and JavaScript/TypeScript with `mix format`?
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?
First Post!
Eiji
Good question. Since I’m working with assets “by hand” I’m also interested. 
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. 
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. 
Unfortunately I’m worried that most of community is using Tailwind as it’s included by default. 
Most Liked
ibarch
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
Popular in Questions
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"