How to keep code formatting consistent in Replit

Open the Shell tab in your Replit workspace (find it in the Tools dock on the left sidebar). Run the npm install command below to add Prettier, ESLint, and the compatibility config that prevents rule conflicts between them. Installing these as devDependencies means they are project-scoped and available to every collaborator who opens the Repl, without polluting the global environment.

1npm install --save-dev prettier eslint eslint-config-prettier

Click the three-dot menu at the top of the file tree, select 'Add file,' and name it .prettierrc. This JSON file defines your project-wide formatting rules. Every developer who works on this Repl will use the same settings automatically. The configuration below enforces single quotes, 2-space indentation, trailing commas, and an 80-character line width, which are the most common conventions in modern JavaScript projects.

1{
2  "semi": true,
3  "singleQuote": true,
4  "tabWidth": 2,
5  "trailingComma": "es5",
6  "printWidth": 80,
7  "bracketSpacing": true,
8  "arrowParens": "always",
9  "endOfLine": "lf"
10}

EditorConfig is a standard supported by most editors and IDEs. While Replit does not natively read .editorconfig, having one in your project root ensures that collaborators who clone the repo into VS Code, Cursor, or other editors maintain the same settings. Create a new file named .editorconfig in the project root and paste the configuration below.

1root = true
2
3[*]
4indent_style = space
5indent_size = 2
6end_of_line = lf
7charset = utf-8
8trim_trailing_whitespace = true
9insert_final_newline = true
10
11[*.md]
12trim_trailing_whitespace = false

Create a file named eslint.config.js in your project root. This uses the modern flat config format that ESLint now defaults to. The configuration below sets up recommended rules and integrates eslint-config-prettier to disable any ESLint rules that would conflict with Prettier. This means ESLint handles code quality (unused variables, missing returns) while Prettier handles formatting (indentation, quotes, semicolons).

1import js from '@eslint/js';
2import prettierConfig from 'eslint-config-prettier';
3
4export default [
5  js.configs.recommended,
6  prettierConfig,
7  {
8    rules: {
9      'no-unused-vars': 'warn',
10      'no-console': 'warn',
11      'prefer-const': 'error',
12    },
13  },
14];

Open your package.json and add scripts for formatting, linting, and a combined check command. These scripts give you reusable commands you can run from Shell or wire into your .replit configuration. The format:check script is useful for CI-like verification without modifying files.

1{
2  "scripts": {
3    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,json}\"",
4    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,json}\"",
5    "lint": "eslint src/",
6    "lint:fix": "eslint src/ --fix",
7    "check": "npm run format:check && npm run lint",
8    "start": "node index.js"
9  }
10}

Open the .replit file (enable 'Show hidden files' if you cannot see it) and update the run command to format and lint before starting the application. This ensures every time you or a collaborator presses the Run button, the code is automatically formatted and checked. For team projects, this is the single most effective way to enforce consistent style without relying on individual discipline.

1run = "npx prettier --write src/ && npx eslint src/ && node index.js"