chore: Add prettier code formatter.

dvuckovic · Apr 7, 2024 · 8a72604 · 8a72604
1 parent 9201b83
commit 8a72604
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 189 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,61 +7,64 @@ name: ci
 on:
   push:
     branches:
-    - '**'
+      - '**'
   release:
     types:
-    - published
+      - published
 
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout 🛎️
-      uses: actions/checkout@v4
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
 
-    - name: Setup 🔧
-      uses: actions/setup-node@v4
-      with:
-        node-version: '20'
-        cache: yarn
+      - name: Setup 🔧
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: yarn
 
-    - name: Install 📦
-      run: yarn install
+      - name: Install 📦
+        run: yarn install
 
-    - name: Test ✅
-      run: yarn coverage
+      - name: Format 🔎
+        run: yarn lint
+
+      - name: Test ✅
+        run: yarn coverage
 
   build:
     runs-on: ubuntu-latest
     needs: test
     steps:
-    - name: Checkout 🛎️
-      uses: actions/checkout@v4
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
 
-    - name: Setup 🔧
-      uses: actions/setup-node@v4
-      with:
-        node-version: '20'
-        cache: yarn
-        registry-url: https://registry.npmjs.org
+      - name: Setup 🔧
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: yarn
+          registry-url: https://registry.npmjs.org
 
-    - name: Install 📦
-      run: yarn install --frozen-lockfile
+      - name: Install 📦
+        run: yarn install --frozen-lockfile
 
-    - name: Build ⚙️
-      run: yarn build
+      - name: Build ⚙️
+        run: yarn build
 
-    - name: Publish 📜
-      if: github.event_name == 'release' && github.event.action == 'published'
-      run: yarn publish
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish 📜
+        if: github.event_name == 'release' && github.event.action == 'published'
+        run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-    - name: Pack 🎁
-      run: yarn pack
+      - name: Pack 🎁
+        run: yarn pack
 
-    - name: Upload ⬆️
-      uses: actions/upload-artifact@v4
-      with:
-        name: ${{ github.event.repository.name }}
-        path: '*.tgz'
+      - name: Upload ⬆️
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ github.event.repository.name }}
+          path: '*.tgz'
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -34,10 +34,7 @@ app.mount('#app')
 Usage in template:
 
 ```html
-<BootstrapIcon
-  icon="exclamation-circle-fill"
-  size="2x"
-  flip-v />
+<BootstrapIcon icon="exclamation-circle-fill" size="2x" flip-v />
 ```
 
 > Note that the SVG sprite asset must be available via the same server where the page is hosted, in order for the inlining to work in all browsers (a security limitation).
@@ -52,14 +49,14 @@ The name of the icon, for a full list of supported icons please see [the officia
 
 The color of the icon, supports standard [Bootstrap variants](https://getbootstrap.com/docs/5.0/customize/color/#theme-colors):
 
-* `success`
-* `warning`
-* `danger`
-* `info`
-* `primary`
-* `secondary`
-* `dark`
-* `light`
+- `success`
+- `warning`
+- `danger`
+- `info`
+- `primary`
+- `secondary`
+- `dark`
+- `light`
 
 In addition to this, the component can inherit the current CSS color style, simply set it for the root element:
 
@@ -73,13 +70,13 @@ In addition to this, the component can inherit the current CSS color style, simp
 
 The size of the icon, supports following values:
 
-* `sm`
-* `md`
-* `lg`
-* `2x`
-* `3x`
-* `4x`
-* `5x`
+- `sm`
+- `md`
+- `lg`
+- `2x`
+- `3x`
+- `4x`
+- `5x`
 
 In addition to this, the component can inherit the current CSS font size style, simply set it for the root element:
 
@@ -94,10 +91,7 @@ In addition to this, the component can inherit the current CSS font size style,
 Flip the component on the horizontal or vertical axis. The two props can be combined, i.e.:
 
 ```html
-<BootstrapIcon
-  icon="bar-chart-fill"
-  flip-h
-  flip-v />
+<BootstrapIcon icon="bar-chart-fill" flip-h flip-v />
 ```
 
 ### `rotate`
@@ -108,14 +102,14 @@ The rotation of the icon, a number between `-360` and `360`.
 
 The animation style of the icon, supports following values:
 
-* `cylon`
-* `cylon-vertical`
-* `fade`
-* `spin`
-* `spin-reverse`
-* `spin-pulse`
-* `spin-reverse-pulse`
-* `throb`
+- `cylon`
+- `cylon-vertical`
+- `fade`
+- `spin`
+- `spin-reverse`
+- `spin-pulse`
+- `spin-reverse-pulse`
+- `throb`
 
 All animations are infinite (_loops_).
 

diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>vue3-boostrap-icons demo</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -5,6 +5,8 @@
   "author": "Dusan Vuckovic <[email protected]> (https://dvuckovic.com)",
   "scripts": {
     "dev": "vite",
+    "lint": "prettier . --check",
+    "lint:fix": "prettier . --write",
     "build": "vue-tsc && vite build",
     "test": "vitest",
     "coverage": "vitest run --coverage"
@@ -56,6 +58,7 @@
     "path": "^0.12.7",
     "postcss": "^8.2.14",
     "postcss-nested": "^6.0.1",
+    "prettier": "3.2.5",
     "sass": "^1.70.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -2,7 +2,5 @@ const postcssNested = require('postcss-nested')
 
 /** @type {import('postcss-load-config').Config} */
 module.exports = {
-  plugins: [
-    postcssNested,
-  ],
+  plugins: [postcssNested],
 }