Prettier Configuration

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

my-env.bit-env.ts

config/prettier.config.js

/* 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();
Copied

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'];
}
Copied

prettier.config.js

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 = {
  ...prettierConfig,
  singleQuote: true,
};
Copied