Skip to content

Instantly share code, notes, and snippets.

@ghughes13
Last active April 9, 2021 15:55
Show Gist options
  • Save ghughes13/bcdacdd027c166e2424ca586c1b824ab to your computer and use it in GitHub Desktop.
Save ghughes13/bcdacdd027c166e2424ca586c1b824ab to your computer and use it in GitHub Desktop.
How to add Prettier

How to add Prettier

*If you get to a step and something doesn't work, restart VS Code.

  1. Run git pull origin master to ensure the .prettierrc file is in your root folder.
  2. While in the 'vue-honey-crm' directory, run npm install.
  3. In VS Code, Install the "Prettier - Code formatter" extension (esbenp.prettier-vscode).
  4. Open the command palette ( ctrl + shft + p ) => Search for: Format Document With... => Search for: Configure Formatter... => Select Prettier - Code formatter to set it as the default formatter.
  5. Open the command palette => Search for: Preferences: Open Settings(JSON) => add the following options inside the settings object:
    "editor.formatOnSave": true, //Formats on save
    "prettier.requireConfig": true, //Only runs on projects with a .prettierrc in root folder
    "[javascript]": { //Uses the prettier plugin for files written in this and the following
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
  1. Add <!-- @format --> to new files you create so prettier will format it on save.

Prettier: https://prettier.io/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment