lukeomalley
11/22/2019 - 2:18 PM

prettier-setup.md

Prettier Configuration

1. Install Prettier

  npm install --save-dev --save-exact prettier

2. Setup the Configuration File

Create a .prettierrc file in the root of the project with the following json:

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
}

The only defaults being overwritten here are printwidth which defaults to 80 and enforcing single quotes rather than double quotes. See all configuration options


3. Install the extension for your editor (optional, but reccomended)

The extension can be added directly through the extension tab in VS Code or through the following link. VS Code Prettier Download Link

After installing the extension some VS Code settings must be modified to allow for auto formatting. To access your VS Code settings.json file press Cmd + Shift + P and type Preferences: Open Settings (JSON)

Prettier respects your editors format on save setting. If you would like to enable formatting on save, add the following to your .vscode/settings.json file:

{
  "editor.formatOnSave": true
}

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

To set prettier as the default for specific languages, add the following to your .vscode/settings.json file:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

It is recommended to set prettier for the specific languages that you work with, however it is possible to set prettier as the default formatter for all file types. To do this, add the following to your .vscode/settings.json file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

4. Setup Prettier Ignore File (optional)

Create a .prettierignore file in the root of the project. This file fucntions the same as a .gitignore and will prevent prettier from formatting files referenced.

  package.json
  package-lock.json
  dist

5. Remove Formatting Options From tslint.json

We want to remove the code formatting rules from TSLint and let Prettier handle that:

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
--  "comment-format": [
--    true,
--    "check-space"
--   ],
--  "curly": true,
--  "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs",
      "rxjs/Rx"
    ],
--  "import-spacing": true,
--  "indent": [
--    true,
--    "spaces"
--  ],
    "interface-over-type-literal": true,
    "label-position": true,
--  "max-line-length": [
--    true,
--    140
--  ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
--  "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
--  "one-line": [
--    true,
--    "check-open-brace",
--    "check-catch",
--    "check-else",
--    "check-whitespace"
--  ],
    "prefer-const": true,
--  "quotemark": [
--    true,
--    "single"
--  ],
    "radix": true,
--  "semicolon": [
--    true,
--    "always"
--  ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
--  "typedef-whitespace": [
--    true,
--    {
--      "call-signature": "nospace",
--      "index-signature": "nospace",
--      "parameter": "nospace",
--      "property-declaration": "nospace",
--      "variable-declaration": "nospace"
--    }
--  ],
    "typeof-compare": true,
    "unified-signatures": true,
    "variable-name": false,
 -- "whitespace": [
 --   true,
 --   "check-branch",
 --   "check-decl",
 --   "check-operator",
 --   "check-separator",
 --   "check-type"
 -- ],
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
--  "angular-whitespace": [true, "check-interpolation"],
    "no-output-on-prefix": true,
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
}

6. Setup a pre-commit hook (optional)

Setting this up will cause code to be automatically checked and formatted when you commit. This is great for when you want an entire file formatting on your changed/staged files.

Add required dev dependencies:

  yarn add pretty-quick husky --dev

Setup pre-commit hook in package.json by adding the following:

{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

Some Handy Prettier Commands

With format on save setup, you will not have to run prettier from the command line, however everything can be done from the command line if you prefer. Here are some useful commands:

Check which typescript files have formatting errors:

./node_modules/.bin/prettier --check "src/**/*.ts"

Format a single file:

./node_modules/.bin/prettier <PATH_TO_FILE> --write

References

Prettier

Setting up Prettier in an Angular CLI Project

Angular 7 + Prettier

Enforce your team’s coding style with Prettier and TsLint