Creating vite vue ts template: Install prettier

Install prettier and setup default config files

1. Install prettier npm install --save-dev prettier
2. Create prettier config file touch .prettierrc.js

3. Edit .prettierrc.js to look like this.
   

   module.exports = {
     semi: false,
     singleQuote: true,
     trailingComma: 'es5',
   }
   

4. Create prettier ignore file touch .prettierignore

5. Edit .prettierignore to look like this.
   

   # Ignore artifacts:
   dist
   coverage
   

6. Add "format": "prettier --write ." to "scripts" section in package.json
   

      "scripts": {
        ...,
   -    "serve": "vite preview"
   +    "serve": "vite preview",
   +    "format": "prettier --write ."
      },
   

7. Run npm run format

8. git add .

9. git commit -m 'install prettier'

Links

• https://prettier.io/docs/en/install.html
• https://prettier.io/docs/en/configuration.html
• https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore
• https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/

Project

imomaliev / vue-ts

Vite + Vue + TypeScript template