Merge #152

152: Add prettier r=bidoubiwa a=mdubus

## What's wrong ? 

Prettier missing. 
Many developper use the "format on save" option in their IDE, and without a code formatter and a configuration file, it can be pretty time-consuming trying not to break the current format.

## What's inside this PR ? 

Addition of prettier as dev dependency + configuration file, and formatting of every file regarding the same specification.
Please take a look at the rules to see if it seems coherent to you 🙏

Co-authored-by: Morgane Dubus <[email protected]>

Author: bors[bot]

.eslintrc.js

@@ -5,11 +5,7 @@ module.exports = {
     es6: true,
     jest: true
   },
-  extends: [
-    'plugin:vue/essential',
-    'standard',
-    'plugin:vue/recommended'
-  ],
+  extends: ['plugin:vue/essential', 'standard', 'plugin:vue/recommended'],
   globals: {
     HOST_URL: 'readonly',
     API_KEY: 'readonly',
@@ -24,10 +20,10 @@ module.exports = {
     parser: 'babel-eslint',
     ecmaVersion: 2018
   },
-  plugins: [
-    'vue'
-  ],
+  plugins: ['vue'],
   rules: {
-    'no-console': ['error', { allow: ['warn', 'error'] }]
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'vue/html-self-closing': 0,
+    'space-before-function-paren': 'off'
   }
 }

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

CONTRIBUTING.md

@@ -22,7 +22,7 @@ First of all, thank you for contributing to MeiliSearch! The goal of this docume
 4. Review the [Development Workflow](#workflow) section that describes the steps to maintain the repository.
 5. Make the changes on your branch.
 6. [Submit the branch as a PR](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) pointing to the `main` branch of the main vuepress-plugin-meilisearch repository. A maintainer should comment and/or review your Pull Request within a few days. Although depending on the circumstances, it may take longer.<br>
- We do not enforce a naming convention for the PRs, but **please use something descriptive of your changes**, having in mind that the title of your PR will be automatically added to the next [release changelog](https://github.com/meilisearch/vuepress-plugin-meilisearch/releases/).
+   We do not enforce a naming convention for the PRs, but **please use something descriptive of your changes**, having in mind that the title of your PR will be automatically added to the next [release changelog](https://github.com/meilisearch/vuepress-plugin-meilisearch/releases/).
 
 ## Development Workflow
 
@@ -65,6 +65,7 @@ We do not enforce any branch naming style, but please use something descriptive
 ### Git Commits <!-- omit in TOC -->
 
 As minimal requirements, your commit message should:
+
 - be capitalized
 - not finish by a dot or any other punctuation character (!,?)
 - start with a verb so that we can read your commit message this way: "This commit will ...", where "..." is the commit message.

MeiliSearchBox.vue

@@ -8,30 +8,31 @@
       id="meilisearch-search-input"
       class="search-query"
       :placeholder="placeholder"
-    >
+    />
   </form>
 </template>
 
 <script>
 export default {
   name: 'MeiliSearchBox',
-  data () {
+  data() {
     return {
       placeholder: undefined
     }
   },
   watch: {
-    options (newValue) {
+    options(newValue) {
       this.update(newValue)
     }
   },
-  mounted () {
+  mounted() {
     const options = {
       hostUrl: HOST_URL,
       apiKey: API_KEY,
       indexUid: INDEX_UID,
       meilisearchOptions: {
-        limit: MAX_SUGGESTIONS || this.$site.themeConfig.searchMaxSuggestions || 5,
+        limit:
+          MAX_SUGGESTIONS || this.$site.themeConfig.searchMaxSuggestions || 5,
         cropLength: CROP_LENGTH
       },
       autocompleteOptions: {
@@ -40,11 +41,12 @@ export default {
       layout: LAYOUT
     }
     this.initialize(options)
-    this.placeholder = PLACEHOLDER || this.$site.themeConfig.searchPlaceholder || ''
+    this.placeholder =
+      PLACEHOLDER || this.$site.themeConfig.searchPlaceholder || ''
   },
 
   methods: {
-    initialize (userOptions) {
+    initialize(userOptions) {
       Promise.all([
         import(
           /* webpackChunkName: "docs-searchbar" */ 'docs-searchbar.js/dist/cdn/docs-searchbar.min.js'
@@ -66,7 +68,7 @@ export default {
       })
     },
 
-    update (options) {
+    update(options) {
       this.$el.innerHTML =
         '<input id="meilisearch-search-input" class="search-query">'
       this.initialize(options)

README.md

@@ -82,14 +82,14 @@ In your `config.js` file:
 module.exports = {
   plugins: [
     [
-      "vuepress-plugin-meilisearch",
+      'vuepress-plugin-meilisearch',
       {
-        "hostUrl": "https://mymeilisearch.com",
-        "apiKey": "XXX",
-        "indexUid": "docs"
+        hostUrl: 'https://mymeilisearch.com',
+        apiKey: 'XXX',
+        indexUid: 'docs'
       }
-    ],
-  ],
+    ]
+  ]
 }
 ```
 
@@ -102,19 +102,19 @@ Read more about [MeiliSearch authentication](https://docs.meilisearch.com/refere
 module.exports = {
   plugins: [
     [
-      "vuepress-plugin-meilisearch",
+      'vuepress-plugin-meilisearch',
       {
-        "hostUrl": "https://mymeilisearch.com", // Mandatory
-        "apiKey": "XXX",                        // Mandatory
-        "indexUid": "docs-test",                // Mandatory
-        "placeholder": "Search as you type...", // Default: ""
-        "maxSuggestions": 10,                   // Default: 5
-        "hotKeys": [],                          // Default: ['s', '/']
-        "cropLength": 50,                       // Default: 30
-        "layout": "simple"                      // Default: "columns"
+        hostUrl: 'https://mymeilisearch.com', // Mandatory
+        apiKey: 'XXX', // Mandatory
+        indexUid: 'docs-test', // Mandatory
+        placeholder: 'Search as you type...', // Default: ""
+        maxSuggestions: 10, // Default: 5
+        hotKeys: [], // Default: ['s', '/']
+        cropLength: 50, // Default: 30
+        layout: 'simple' // Default: "columns"
       }
-    ],
-  ],
+    ]
+  ]
 }
 ```
 

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }

jest.config.js

@@ -3,7 +3,8 @@ module.exports = {
   testMatch: ['<rootDir>/tests/**/*.js?(x)'],
   preset: '@vue/cli-plugin-unit-jest',
   moduleNameMapper: {
-    'docs-searchbar.js': '<rootDir>/node_modules/docs-searchbar.js/dist/cdn/docs-searchbar.js'
+    'docs-searchbar.js':
+      '<rootDir>/node_modules/docs-searchbar.js/dist/cdn/docs-searchbar.js'
   },
   globals: {
     HOST_URL: 'https://e10b17e6.getmeili.com',

package.json

@@ -17,8 +17,8 @@
     "yargs-parser": "^13.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-unit-jest": "^4.5.13",
     "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "@vue/test-utils": "^1.2.0",
     "babel-eslint": "^10.1.0",
@@ -29,6 +29,7 @@
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.9.0",
+    "prettier": "^2.3.0",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },

playground/.vuepress/config.js

@@ -1,16 +1,17 @@
 module.exports = {
-    title: "Welcome to the Playground!",
-    plugins: [
-        [
-          require('../../index.js'),
-          {
-            // Testing with MeiliSearch documentation content (https://docs.meilisearch.com/)
-            "hostUrl": "https://docs-search-bar.meilisearch.com",
-            "apiKey": "d79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd",
-            "indexUid": "docs",
-            // "maxSuggestions": 10,
-            // "placeholder": "Search as you type..."
-          }
-        ],
-    ],
+  title: 'Welcome to the Playground!',
+  plugins: [
+    [
+      require('../../index.js'),
+      {
+        // Testing with MeiliSearch documentation content (https://docs.meilisearch.com/)
+        hostUrl: 'https://docs-search-bar.meilisearch.com',
+        apiKey:
+          'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
+        indexUid: 'docs'
+        // "maxSuggestions": 10,
+        // "placeholder": "Search as you type..."
+      }
+    ]
+  ]
 }

tests/MeiliSearchBoxTest.js

@@ -5,18 +5,19 @@ describe('MeiliSearchBox', () => {
   let wrapper = null
 
   beforeEach(() => {
-    wrapper = shallowMount(
-      MeiliSearchBox,
-      {
-        mocks: {
-          $site: { themeConfig: {} }
-        }
+    wrapper = shallowMount(MeiliSearchBox, {
+      mocks: {
+        $site: { themeConfig: {} }
       }
-    )
+    })
   })
 
   it('renders default form and input', () => {
-    expect(wrapper.html()).toContain('<form id="search-form" role="search" class="meilisearch-search-wrapper search-box">')
-    expect(wrapper.html()).toContain('<input id="meilisearch-search-input" class="search-query" placeholder="">')
+    expect(wrapper.html()).toContain(
+      '<form id="search-form" role="search" class="meilisearch-search-wrapper search-box">'
+    )
+    expect(wrapper.html()).toContain(
+      '<input id="meilisearch-search-input" class="search-query" placeholder="">'
+    )
   })
 })