Replit does not have a native format-on-save toggle, but you can set up automatic code formatting by installing Prettier (JavaScript/TypeScript) or Black (Python) via Shell, creating a configuration file like .prettierrc, and configuring a run script or Shell alias that formats before execution. This gives you consistent, readable code on every save or run cycle.
Set Up Auto-Formatting in Replit for Clean, Consistent Code
This tutorial walks you through configuring automatic code formatting in Replit so your code stays clean and readable without manual effort. Whether you are writing JavaScript, TypeScript, or Python, you will install a formatter, create a configuration file, and wire it into your workflow. This guide is designed for beginners who want professional-looking code without memorizing style rules.
Prerequisites
- A Replit account (free Starter plan works)
- A Replit App with JavaScript/TypeScript or Python code
- Basic familiarity with the Replit workspace (file tree, Shell, Run button)
- No prior experience with code formatters required
Step-by-step guide
Open Shell and install your formatter
Open Shell and install your formatter
Click the Shell tab in your Replit workspace (or find it under Tools in the left sidebar). For JavaScript or TypeScript projects, install Prettier by running the npm command below. For Python projects, install Black instead. These are industry-standard formatters that enforce consistent style automatically. Prettier handles indentation, semicolons, quote style, and line length for JS/TS. Black does the same for Python with zero configuration needed.
1# For JavaScript/TypeScript projects:2npm install --save-dev prettier34# For Python projects:5pip install blackExpected result: The formatter package installs successfully. You will see output confirming the installation with no errors.
Create a Prettier configuration file
Create a Prettier configuration file
For JavaScript/TypeScript projects, create a .prettierrc file in your project root. This file tells Prettier exactly how to format your code. Click the three-dot menu in the file tree, select 'Add file,' and name it .prettierrc. Then paste the JSON configuration below. For Python projects using Black, you can skip this step since Black enforces a single opinionated style with no configuration file required. If you do want to customize Black, create a pyproject.toml file instead.
1{2 "semi": true,3 "singleQuote": true,4 "tabWidth": 2,5 "trailingComma": "es5",6 "printWidth": 80,7 "bracketSpacing": true8}Expected result: A .prettierrc file appears in your project root. Prettier will now use these rules whenever it formats your code.
Add a format script to package.json
Add a format script to package.json
Open your package.json file and add a format script under the scripts section. This creates a reusable command you can run from Shell or wire into your .replit configuration. For Python projects, you can skip this step and simply run 'black .' in Shell whenever you want to format all files, or 'black main.py' for a single file.
1{2 "scripts": {3 "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,json}\"",4 "start": "node index.js"5 }6}Expected result: Running 'npm run format' in Shell formats all matching files and shows a list of files that were changed.
Wire formatting into your .replit run command
Wire formatting into your .replit run command
To format code automatically every time you press the Run button, modify the run command in your .replit file. Open .replit (enable 'Show hidden files' in the file tree menu if you do not see it) and update the run value to execute the formatter before your main application starts. This ensures your code is always formatted before it runs, which is the closest equivalent to format-on-save in Replit.
1# .replit file for JavaScript/TypeScript:2run = "npx prettier --write src/ && node index.js"34# .replit file for Python:5run = "black main.py && python main.py"Expected result: Pressing the Run button now formats your code first, then executes the application. You will see Prettier or Black output in the Console before your app starts.
Add a .prettierignore file to skip unnecessary files
Add a .prettierignore file to skip unnecessary files
Create a .prettierignore file in your project root to prevent Prettier from formatting files that should not be touched, such as node_modules, build output, or lock files. This speeds up formatting and prevents accidental changes to generated files. Add one path per line, similar to a .gitignore file.
1node_modules2dist3build4package-lock.json5*.min.js6.replit7replit.nixExpected result: Prettier skips the listed files and directories, making the format step faster and safer.
Verify formatting works end-to-end
Verify formatting works end-to-end
Test your setup by intentionally adding messy formatting to a file. Add inconsistent spacing, mixed quotes, or missing semicolons. Then press the Run button and watch the Console output. Prettier or Black should report the file was reformatted, and when you open the file again, it should be cleanly formatted according to your configuration.
1// Intentionally messy code to test formatting:2const x="hello"3const y = 'world'4console.log( x,y )Expected result: The messy code is automatically reformatted with consistent quotes, spacing, and semicolons. The Console shows Prettier output confirming the file was written.
Complete working example
1# .replit configuration with auto-formatting on run23entrypoint = "index.js"4modules = ["nodejs-20:v8-20230920-bd784b9"]56# Format code with Prettier before running the app7run = "npx prettier --write src/ && node index.js"89[nix]10channel = "stable-24_05"1112[deployment]13run = ["sh", "-c", "node index.js"]14build = ["sh", "-c", "npm install && npx prettier --write src/"]15deploymentTarget = "cloudrun"1617[[ports]]18localPort = 300019externalPort = 802021# Hide generated files from the file tree22hidden = [".config", "package-lock.json", "node_modules"]Common mistakes when auto-formating code in Replit
Why it's a problem: Installing Prettier globally instead of as a project devDependency
How to avoid: Use 'npm install --save-dev prettier' so the formatter is locked to your project and available to collaborators.
Why it's a problem: Forgetting to enable 'Show hidden files' and not finding the .replit file
How to avoid: Click the three-dot menu at the top of the file tree and select 'Show hidden files' to reveal .replit and .prettierrc.
Why it's a problem: Using the --check flag instead of --write in the run command
How to avoid: The --check flag only reports formatting issues without fixing them. Use --write to actually save the formatted code to disk.
Why it's a problem: Formatting the entire project including node_modules, which takes minutes
How to avoid: Create a .prettierignore file that excludes node_modules, dist, and build directories.
Best practices
- Always create a .prettierrc or pyproject.toml so every collaborator uses the same formatting rules
- Add your formatter as a devDependency, not a global install, so the project is self-contained
- Use a .prettierignore file to skip node_modules, build output, and lock files for faster formatting
- Limit the format scope in your run command to only source files, not the entire project directory
- Pin your formatter version in package.json to avoid unexpected style changes when the formatter updates
- For Python projects, Black requires zero configuration and is the recommended choice over autopep8 or yapf
- Test your formatting setup by intentionally adding messy code and verifying it gets cleaned up on run
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm using Replit to build a JavaScript project. How do I set up Prettier to automatically format my code every time I press Run? I need the .replit configuration, .prettierrc file, and package.json scripts.
Set up Prettier for this project. Install it as a devDependency, create a .prettierrc with single quotes, 2-space tabs, and trailing commas. Update the .replit run command to format all files in src/ before starting the app.
Frequently asked questions
No. As of March 2026, Replit does not have a native format-on-save toggle like VS Code. The workaround is to wire a formatter like Prettier or Black into your .replit run command so code is formatted every time you press Run.
ESLint is a linter, not a formatter. It catches code quality issues but does not reformat your code. You can use both together: Prettier for formatting and ESLint for linting. Install eslint-config-prettier to avoid rule conflicts between the two.
For small to medium projects (under 100 files), Prettier adds less than 2 seconds to the run cycle. For larger projects, use a .prettierignore file and limit formatting to your source directory to keep it fast.
Install Black with 'pip install black' in the Shell. Then update your .replit run command to 'black main.py && python main.py'. Black requires zero configuration and enforces a single consistent style.
Yes. In the Replit Agent chat, prompt: 'Set up Prettier with format-on-save for this project. Create a .prettierrc with single quotes and 2-space indentation. Update the run command to format before starting.' Agent v4 will install the package, create the config file, and update .replit automatically.
Yes. If you add a format step to the build command in your .replit deployment configuration, your code will be formatted during the build phase before deployment. The formatted code is what gets deployed.
For complex projects where tooling configuration becomes unwieldy, the RapidDev engineering team can help you set up a professional development pipeline with proper formatting, linting, and CI integration that scales beyond what browser-based configuration supports.
Yes. Prettier natively supports JavaScript, TypeScript, CSS, JSON, HTML, and Markdown. For other languages, add Prettier plugins. For example, install prettier-plugin-tailwindcss to auto-sort Tailwind CSS classes.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation