Dev Tools

Prettier Config Generator

Generate .prettierrc.json with all options: semi, singleQuote, tabWidth, trailingComma, and more.

Formatting Options
Toggles
.prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "quoteProps": "as-needed",
  "singleAttributePerLine": false
}
Preview
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const increment = ((x)) => { 
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}
Approximate preview of how code might look with these settings.
Was this page helpful?

Related tools