Piyush Gambhir

Front-end JavaScript/TypeScript Code Formatting

6 min readPiyush Gambhir
JavaScriptTypeScriptCode FormattingFront-end

When it comes to backend code in Node.js/TypeScript, the formatting tools and philosophy are very much in line with the frontend. If your backend is written in TypeScript or modern JavaScript (for example, an Express or Next.js API route, a Node script, etc.), you should still use Prettier to format that code. In fact, sharing the same Prettier configuration between frontend and Node.js backend code can ensure consistency across your entire JavaScript/TypeScript stack.

Using Prettier for Node.js/TypeScript Backend

For a Node.js project (TypeScript or JavaScript), Prettier usage is essentially the same as for frontend. You’ll use a nearly identical configuration:

  • Core style settings like tabWidth, semi, singleQuote, etc., apply equally to backend code. (There’s no reason to have different quote styles in backend vs frontend – picking one convention across all your JS code is ideal.)
  • Import sorting is just as helpful in backend code. In Node projects, you might have more built-in modules (like fs, http) – the importOrderBuiltinModulesToTop: true ensures those are grouped at the top, which is semantically logical (Node core first, then external libs). You can adjust importOrder patterns to group your internal modules (like @/utils or a src/ directory) separate from external.
  • Prettier plugins: You likely won’t need prettier-plugin-tailwindcss for pure backend services (since Tailwind is frontend CSS). But the sort-imports plugin is still very useful to keep imports tidy in backend code. If your backend TS code uses decorators or experimental syntax, ensure the parser plugins option covers those (like the example includes 'decorators-legacy' for legacy decorators support).
  • Comments and Documentation: Prettier will also format comments and docstrings in your code. This is beneficial for backend code where you might have extensive JSDoc/TSDoc comments. It wraps comments at the print width, aligns asterisks in block comments, etc., making them clean.

One thing to highlight: Prettier’s benefit of consistency is perhaps even more crucial on the backend when multiple services or scripts are involved. If you have a Node.js backend repo with dozens of services or utilities, having all of them formatted uniformly means a developer can hop between files or projects and immediately feel comfortable with the style.

Tip: Use a shared Prettier config across frontend and backend if possible. For example, in a monorepo you can keep a single .prettierrc at the root. Or publish your Prettier config as an npm package and consume it in both projects. This ensures that whether one is editing a React component or a Node API handler, the formatting rules are identical. Consistency across the full stack improves collaboration between frontend and backend devs and reduces context switching overhead.

Note on line length/printWidth: Backends sometimes contain longer algorithms or data structures which could be formatted more compactly for readability. Prettier’s default print width is 80 (or sometimes 100 in some configs). Some teams set printWidth: 100 or 120 for backend code if they prefer a wider layout (especially if they have wide monitors and want to see more code on one line). Adjusting print width is one of the few allowed Prettier tweaks. The provided config didn't list printWidth, so it uses Prettier’s default (80). Feel free to set this to match your preference, but ensure it’s consistent across the project. A wider print width may reduce how often Prettier wraps lines (reducing the diff noise complaint), but if too wide, it can make code harder to read on smaller screens or side-by-side views. A common compromise is 100 or 120 for backend code, if needed.


✅ .prettierrc Example for Node.js Backend

json
1{
2  "semi": true,
3  "singleQuote": true,
4  "tabWidth": 2,
5  "useTabs": false,
6  "trailingComma": "es5",
7  "printWidth": 100,
8  "bracketSpacing": true,
9  "arrowParens": "always",
10  "endOfLine": "lf",
11  "importOrder": ["^node:", "^@?\\w", "^(@/.*|src/.*)", "^[./]"],
12  "importOrderBuiltinModulesToTop": true,
13  "importOrderSeparation": true,
14  "plugins": ["@trivago/prettier-plugin-sort-imports"]
15}

Explanation of Each Option

OptionDescriptionWhy It Matters for Backend
semi: trueEnforces semicolons at end of statements.Avoids ASI bugs, especially in multi-line service logic.
singleQuote: truePrefers ' over ".Standardizes string style across all files.
tabWidth: 2Indents with 2 spaces per level.Common default. Can be set to 4 if preferred for backend.
useTabs: falseUses spaces instead of tabs.Keeps consistent across dev tools and platforms.
trailingComma: 'es5'Adds trailing commas to objects, arrays, etc., except in function params.Easier to diff and extend object literals.
printWidth: 100Sets max line length to 100 characters.Backend logic (validation, logging) often benefits from wider lines.
bracketSpacing: trueControls spaces inside object literals: { foo: bar }.Increases readability in deeply nested config or JSON-like objects.
arrowParens: 'always'Enforces parentheses in arrow functions: (x) => {}.Consistent style even for single-arg functions.
endOfLine: 'lf'Enforces LF line endings.Avoids cross-platform issues (especially in CI/CD pipelines).
importOrderCustom grouping of imports: Node.js built-ins, packages, internal aliases (@/utils), then relative.Keeps file structure readable, especially in services or utils.
importOrderBuiltinModulesToTop: trueMoves Node core modules (fs, path, etc.) to the top of import list.Backend-specific improvement: logically separates core modules.
importOrderSeparation: trueAdds blank lines between import groups.Improves visual clarity in large files.
pluginsAdds plugins like sort-imports to enforce import structure.Essential for backend files where imports can be long and mixed.

You can now include this in your documentation, blog, or internal engineering guidelines.
Let me know if you also want .prettierignore or ESLint integration details.

Integrating Prettier in Node.js projects works the same way:

  • Use an ESLint setup for Node (with perhaps Node-specific lint rules) and disable formatting rules in favor of Prettier.
  • Add a Husky pre-commit hook to run Prettier on backend file types (*.ts, *.js, *.json, etc.).
  • Possibly add formatting check in CI (like prettier --check or as part of your test pipeline).

The pros and cons of Prettier discussed earlier apply here too. One could argue that code formatting in backend is even more important for things like log readability, avoiding silly syntax errors, and easing code reviews for critical server logic.

Note on line length/printWidth: Backends sometimes contain longer algorithms or data structures which could be formatted more compactly for readability. Prettier’s default print width is 80 (or sometimes 100 in some configs). Some teams set printWidth: 100 or 120 for backend code if they prefer a wider layout (especially if they have wide monitors and want to see more code on one line). Adjusting print width is one of the few allowed Prettier tweaks. The provided config didn't list printWidth, so it uses Prettier’s default (80). Feel free to set this to match your preference, but ensure it’s consistent across the project. A wider print width may reduce how often Prettier wraps lines (reducing the diff noise complaint), but if too wide, it can make code harder to read on smaller screens or side-by-side views. A common compromise is 100 or 120 for backend code, if needed.

In summary, for Node.js and TypeScript backends:

  • Use Prettier to format all code.
  • Keep configuration aligned with frontend for a unified code style.
  • Enjoy the same benefits (consistency, readability, focus on logic in reviews).
  • There’s essentially no downside to using Prettier in a backend Node project, since it’s the same language and ecosystem as the frontend – it’s widely supported and understood.

(Pros and cons of Prettier are as listed in the frontend section, since they apply to any JS/TS context. Next, we’ll turn to Python, which involves a different set of tools.)