gulp plugin to format source code with prettier
npm install gulp-prettier-plugin  
gulp plugin to format your source code files with prettier.
``
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.
This module exports a single function with this signature:
`TypeScript`
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.
Format in-place only JS files that haven't been already formatted:
` javascript
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:
` javascript`
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
` 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:
` javascript
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.
` javascript
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))
);
``