TypeScript icon, indicating that this package has built-in type declarations

    5.1.0 • Public • Published

    Angular Prettier schematic

    A Schematic that adds prettier and a pre-commit hook for formatting staged files.

    CircleCI npm Commitizen friendly

    Usage 🚀

    Run in an Angular CLI project

    ng add @schuchard/prettier

    Then you're done. Continue your normal workflow of git add, commit, push or a similar workflow with your IDE/editor.

    You can optionally install globally:

    npm install -g @schuchard/prettier

    then in an Angular CLI project:

    ng g @schuchard/prettier:add

    How does Prettier work with Angular

    Automatically against staged files

    By default lint-staged is configured along with a pre-commit hook. This will run Prettier against all new files as they are committed according to the settings defined in prettier.config.json. Generally speaking, your workflow should remain unchanged - git add, commit, push


    Disabling lint-staged install

    lint-stage and the precommit hook can be disabled with the following

    ng g @schuchard/prettier:add --lintStaged=false


    While lint-staged only runs prettier against staged files, you can manually run Prettier against ALL targeted files with the script added to the package.json

    npm run prettier

    Angular formatting

    Beginning with 1.15, Prettier supports formatting HTML and Angular files.

    Format all Angular Files - {js,json,css,md,ts,html,component.html}


    Format only Typescript files

    Previous versions of this schematic only formatted Typescript files. That functionality is still available and is configured in the CLI prompts or via the --formatAllAngularFiles=false if desired. The default is true.


    Default Prettier options

    Angular 7

    This schematic takes advantage of CLI prompts for configuring Prettier options. If you're unsure of a setting, press enter to select the default. You can skip a prompt by passing any of the options when call the schematic.

    ng g @schuchard/prettier:add --printWidth=100


    < Angular 7

    Without any CLI arguments the default Prettier options will be applied. The defaults can be changed in one of two ways:

    • modifying the ./prettier.config.js after the schematic runs
    • passing a flag to the schematic with the desired value for any of the options. For example:
      • ng g @schuchard/prettier:add --printWidth=100 --tabWidth=4

    Example default prettier.config.js

    printWidth = 80;
    tabWidth = 2;
    useTabs = false;
    semi = true;
    singleQuote = false;
    trailingComma = "none";
    bracketSpacing = true;
    jsxBracketSameLine = false;
    arrowParens = "avoid";
    rangeStart = 0;
    rangeEnd = Infinity;
    requirePragma = false;
    insertPragma = false;
    proseWrap = "preserve";
    lintStaged = true;


    Getting started

    Install dependencies:

    yarn && cd sandbox && yarn

    Test changes to the schematic

    yarn dev

    Test changes to the schematic AND run E2E tests in the sandbox

    yarn test

    Reset the sandbox state after running the schematic locally

    yarn clean

    Updating the Sandbox

    1. remove the /sandbox directory
    2. npm i -g @angular/cli
    3. ng new sandbox
    4. update the package.json
    "build": "ng build --prod --progress=false",
    "test": "ng test --watch=false",


    Unsure how to do something with schematics? Check the Angular schematics for inspiration.

    Inspiration came from this excellent article by Aaron Frost


    • First, ensure you're authenticated with npm login.
    npm run release

    Issues & Requests 📬

    Submit an issue


    npm i @schuchard/prettier

    DownloadsWeekly Downloads






    Unpacked Size

    38 kB

    Total Files


    Last publish


    • schuchard