Configuring ESLint and Prettier for a Team Project

Install ESLint and Prettier along with integrations: eslint-config-prettier and eslint-plugin-prettier to align formatting and linting rules. 2. Configure ESLint to extend plugin:prettier/recommended and set up a .prettierrc file with shared formatting options like semi, singleQuote, and printWidth. 3. Add npm scripts for linting and formatting, and enforce them in CI using --fix and --check flags to prevent unformatted code from merging. 4. Optionally, create a shared config package for consistent rules across multiple projects by extending a centralized configuration. 5. Ensure all team members use editor integrations like VS Code’s ESLint and Prettier extensions with formatOnSave and codeActionsOnSave enabled via .vscode/settings.json. 6. Use .prettierignore and .eslintignore to exclude build artifacts and node_modules from processing, improving performance and avoiding errors. This setup ensures consistent, automated code quality across the team, eliminates style debates, and streamlines collaboration.

Setting up ESLint and Prettier in a team project isn’t just about code style—it’s about consistency, fewer merge conflicts, and smoother code reviews. When everyone on the team writes code that looks the same, it’s easier to read, maintain, and collaborate. Here’s how to configure ESLint and Prettier together in a way that works reliably across your team.

✅ 1. Install and Configure ESLint Prettier

Start by installing the necessary packages as dev dependencies:

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

• eslint: The linter.
• prettier: The code formatter.
• eslint-config-prettier: Disables ESLint rules that conflict with Prettier.
• eslint-plugin-prettier: Runs Prettier as an ESLint rule so you can catch unformatted code.

Then create or update your ESLint config (.eslintrc.js, .eslintrc.json, or .eslintrc.cjs):

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // Enables Prettier and turns off conflicting rules
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // Add custom ESLint rules here
    'no-console': 'warn',
  },
};

This setup uses plugin:prettier/recommended, which automatically enables Prettier via ESLint and applies eslint-config-prettier.

✅ 2. Add a Prettier Config File

Create a .prettierrc file to define formatting rules:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

You can also use .prettierrc.json, .prettierrc.js, or even prettier.config.js. This ensures everyone uses the same formatting settings.

? Pro tip: Avoid relying on editor defaults. Explicit config prevents differences between team members’ setups.

✅ 3. Add Scripts and Enforce in CI

Update your package.json with helpful scripts:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write ."
  }
}

Run npm run lint:fix to auto-fix linting issues, and npm run format to format all files.

Then, enforce formatting and linting in your CI pipeline:

npm run lint
npm run format -- --check  # Fails if files aren't formatted

--check tells Prettier to report errors instead of writing files—perfect for CI.

✅ 4. Share Configs Across Projects (Optional but Helpful)

If your team works on multiple projects, extract ESLint and Prettier configs into a shared package (e.g., @yourcompany/eslint-config).

Example:

// @yourcompany/eslint-config/index.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  env: { node: true, browser: true },
  parserOptions: { ecmaVersion: 'latest' },
  rules: { 'no-unused-vars': 'error' }
};

Then install and extend it in any project:

extends: '@yourcompany/eslint-config'

This keeps rules consistent across repos without duplication.

✅ 5. Editor Integration (Team Setup)

Make sure every team member configures their editor to respect the project’s ESLint and Prettier settings.

For VS Code:

1. Install the ESLint and Prettier extensions.
2. Add a .vscode/settings.json (optional, but helpful):

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "vue", "html"]
}

⚠️ Warn team members not to use global Prettier or outdated extensions. Let the project’s local config win.

✅ 6. Use a .prettierignore and .eslintignore

Just like .gitignore, exclude files that shouldn’t be checked:

.prettierignore

node_modules
dist
build
*.min.js

.eslintignore

node_modules
dist
build

This avoids unnecessary processing and errors.

Final Notes

• Always commit your config files: .eslintrc.*, .prettierrc, .prettierignore, etc.
• Document setup steps in your CONTRIBUTING.md.
• Run npm run lint and npm run format regularly—or hook them into pre-commit (e.g., with Husky lint-staged).

With this setup, your team gets consistent, automated code quality and formatting—no debates over semicolons or indentation in PRs.

Basically, it’s a small upfront cost for long-term sanity.

The above is the detailed content of Configuring ESLint and Prettier for a Team Project. For more information, please follow other related articles on the PHP Chinese website!