Prettier Configuration

To change your env's default Prettier configuration, or to replace your current formatter with Prettier, implement the following in your env:

/* your base env. in this example, react-env. */
import { ReactEnv } from '@teambit/react.react-env';

import { PrettierFormatter } from '@teambit/defender.prettier-formatter';

export class MyEnv extends ReactEnv {
  name = 'my-env';

   * replace the env's default Prettier formatter
   * (for formatting in development. prettier does not format source files in build)
  formatter() {
    return PrettierFormatter.from({
       * the configuration file to be used by this Prettier formatter
      configPath: require.resolve('./config/prettier.config.j'),
      /* the file types to be formatter by this prettier */
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.md'],

export default new MyEnv();

File types

Set the extensions property with the list of file types to format. File extension that are not in this list will be ignored.

  extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'];


The prettier.config.js file extends your env's default configuration.

For example, the following extends the default configuration of a React environment. It configures Prettier to use single quotes instead of double quotes.

const { prettierConfig } = require('@teambit/react.react-env');

module.exports = {
  singleQuote: true,