gulp-prettier-plugin

gulp plugin to format your source code files with prettier.

Install

yarn add --dev gulp-prettier-plugin

prettier is marked as a peer dependency, so if you already have it installed, the plugin will use that version.

Usage

This module exports a single function with this signature:

declare const prettierPlugin: (prettierOptions: any, pluginOptions: IPrettierPluginOptions) => PrettierTransform;

The function receives 2 optional arguments: prettierOptions, the options object to configure prettier, and pluginOptions, options to configure the plugin. The return object is a Transform stream, just like most gulp plugins. The supported plugin options are the following:

Name	Type	Description
`filter`	`boolean`	If `true`, the plugin will only emit files that need formatting. This is useful when you are piping to `gulp.dest` and only want to write the files that haven't been formatted yet, otherwise every single file will be rewritten.
`validate`	`boolean`	If `true`, after all files are processed, it will throw an error if any input files were not already formatted, detailing the paths of each. You might want to turn this on only in continuous integration environments to make sure all files are formatted before any patches are merged to your repository.

All options are false by default.

Examples

Format in-place only JS files that haven't been already formatted:

const gulp = require('gulp');
const prettierPlugin = require('gulp-prettier-plugin');

gulp.task('prettier', () =>
  gulp
    .src(['./src/**/*.js', './gulpfile.js'])
    .pipe(prettierPlugin(undefined, { filter: true }))
    // passing a function that returns base will write the files in-place
    .pipe(gulp.dest(file => file.base))
);

Format in-place all TypeScript and LESS files that haven't already been formatted:

gulp.task("prettier", () =>
  gulp
    .src(["./src/**/*.ts", "./src/**/*.less"])
    .pipe(prettierPlugin(undefined, { filter: true }))
    // passing a function that returns base will write the files in-place
    .pipe(gulp.dest(file => file.base))
);

Same as the previous example, but written in TypeScript

import * as gulp from 'gulp'
import * as prettierPlugin from 'gulp-prettier-plugin'

gulp.task('prettier', () =>
  gulp
    .src(['./src/**/*.ts', './src/**/*.less'])
    .pipe(prettierPlugin(undefined, { filter: true })
    )
    // passing a function that returns base will write the files in-place
    .pipe(gulp.dest(file => file.base))
);

Format each and every JS file in place, using the trailing-comma and single-quote options, and pipe any other plugin such as eslint before writing:

const gulp = require('gulp');
const prettierPlugin = require('gulp-prettier-plugin');
const eslint = require('gulp-eslint');

gulp.task('prettier', () =>
  gulp
    .src(['./src/**/*.js', './gulpfile.js'])
    .pipe(prettierPlugin())
    .pipe(eslint())
    .pipe(eslint.failAfterError())
    // passing a function that returns base will write the files in-place
    .pipe(gulp.dest(file => file.base))
);

Scan al JS files and when it finds a file that hasn't been formatted yet, format it in-place and save the path so that if it is running in a CI environment, it throws an error detailing the files that were not already formatted.

const gulp = require('gulp');
const prettierPlugin = require('gulp-prettier-plugin');
const isCI = process.env.CI;

gulp.task('prettier', () =>
  gulp
    .src(['./src/**/*.js', './gulpfile.js'])
    .pipe(
      prettierPlugin(
        {
          trailingComma: 'es5',
          singleQuote: true,
        },
        {
          filter: true,
          validate: isCI,
        }
      )
    )
    // passing a function that returns base will write the files in-place
    .pipe(gulp.dest(file => file.base))
);

Not formating my file

Before

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Navigation from './src/components/Navigation';

export default class gamLogin extends Component {
  render() {
    return <Navigation />;
  }
}

AppRegistry.registerComponent("login", () => gamLogin);

Task

gulp.task('prettier', () =>
  gulp.src(['./gulpfile.js', './src/**/*.js', './index.android.js']).pipe(
    prettier({ singleQuote: true, printWidth: 149 })
      // passing a function that returns base will write the files in-place
      .pipe(
        gulp.dest(file => {
          return file.base;
        })
      )
  )
);

Expected

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Navigation from './src/components/Navigation';

export default class gamLogin extends Component {
  render() {
    return <Navigation />;
  }
}

AppRegistry.registerComponent('login', () => gamLogin);

Result

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Navigation from './src/components/Navigation';

export default class gamLogin extends Component {
  render() {
    return <Navigation />;
  }
}

AppRegistry.registerComponent("login", () => gamLogin);

gaumala / gulp-prettier-plugin Goto Github PK