Merge #354

354: Configure prettier r=bidoubiwa a=mdubus

## What's wrong ?
Prettier was installed but the rules weren't configured properly. There was different coding styles in different files. Lack of uniformity. 

## What's inside this PR ?
Edit of the 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]

.babelrc

@@ -6,7 +6,7 @@
         "targets": {
           "browsers": ["last 2 versions", "ie >= 9"]
         }
-      },
+      }
     ]
   ],
   "env": {

.eslintignore

@@ -2,3 +2,7 @@ coverage/
 dist/
 docs/dist
 dist-es5-module/
+node_modules/
+assets
+.github
+scripts

.eslintrc.js

@@ -1,10 +1,17 @@
 /* Using eslint-config-algolia */
 /* eslint-disable import/no-commonjs */
 module.exports = {
-  extends: ['algolia', 'algolia/jest'],
+  extends: ['algolia', 'algolia/jest', 'plugin:prettier/recommended'],
+  plugins: ['prettier'],
   rules: {
     'no-console': 0,
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    'prettier/prettier': [
+      'error',
+      {
+        trailingComma: 'all',
+      },
+    ],
   },
-};
+}

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [ '12', '14' ]
+        node: ['12', '14']
     name: Tests (Node.js ${{ matrix.node }})
     steps:
       - uses: actions/checkout@v2
@@ -34,12 +34,8 @@ jobs:
     name: linter-check
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install dependencies
-      run: yarn install
-    - name: Run linter
-      run: yarn run lint
-    - name: Run prettier
-      run: yarn run prettier-ci
-      env:
-        CI: true
+      - uses: actions/checkout@v2
+      - name: Install dependencies
+        run: yarn install
+      - name: Run linter
+        run: yarn run lint

.prettierignore

@@ -0,0 +1,3 @@
+**/.cache/
+.github/
+**/dist/

.prettierrc

@@ -1,10 +1,6 @@
 {
-  "overrides": [
-    {
-      "files": "*.scss",
-      "options": {
-        "singleQuote": true
-      }
-    }
-  ]
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
 }

CONTRIBUTING.md

@@ -73,7 +73,7 @@ yarn test:watch
 # Linter
 yarn lint
 # Linter with auto-correct
-yarn lint-fix
+yarn lint:fix
 # Prettier for Markdown (auto-correct)
 yarn format:md
 # Prettier for SCSS (auto-correct)
@@ -129,11 +129,11 @@ _[Read more about this](https://github.com/meilisearch/integration-guides/blob/m
 Make a PR modifying the files [`package.json`](/package.json) and [`src/lib/version.js`](/src/lib/version.js) with the right version.
 
 ```javascript
-"version": "X.X.X",
+'version': 'X.X.X',
 ```
 
 ```javascript
-export default "X.X.X";
+export default 'X.X.X'
 ```
 
 Once the changes are merged on `main`, you can publish the current draft release via the [GitHub interface](https://github.com/meilisearch/docs-searchbar.js/releases).

README.md

@@ -80,12 +80,12 @@ If you already have your own scraper but you still want to use MeiliSearch and `
     <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
     <script>
       docsSearchBar({
-        hostUrl: "https://mymeilisearch.com",
-        apiKey: "XXX",
-        indexUid: "docs",
-        inputSelector: "#search-bar-input",
+        hostUrl: 'https://mymeilisearch.com',
+        apiKey: 'XXX',
+        indexUid: 'docs',
+        inputSelector: '#search-bar-input',
         debug: true, // Set debug to true if you want to inspect the dropdown
-      });
+      })
     </script>
   </body>
 </html>
@@ -107,7 +107,7 @@ Read more about [MeiliSearch authentication](https://docs.meilisearch.com/refere
 In an ES+ environment:
 
 ```js
-import "docs-searchbar.js/dist/cdn/docs-searchbar.css";
+import 'docs-searchbar.js/dist/cdn/docs-searchbar.css'
 ```
 
 In a `HTML` file, the `link` tag should be added in your header:
@@ -148,14 +148,14 @@ docsSearchBar({
   handleSelected: function (input, event, suggestion, datasetNumber, context) {
     // Prevents the default behavior on click and rather opens the suggestion
     // in a new tab.
-    if (context.selectionMethod === "click") {
-      input.setVal("");
+    if (context.selectionMethod === 'click') {
+      input.setVal('')
 
-      const windowReference = window.open(suggestion.url, "_blank");
-      windowReference.focus();
+      const windowReference = window.open(suggestion.url, '_blank')
+      windowReference.focus()
     }
   },
-});
+})
 ```
 
 Note that, by default, you can already open a new tab thanks to the CMD/CTRL + Click action.
@@ -183,7 +183,7 @@ docsSearchBar({
   meilisearchOptions: {
     limit: 10,
   },
-});
+})
 ```
 
 ##### More Examples <!-- omit in toc -->

index.js

@@ -1,3 +1,3 @@
-import docsSearchBar from './src/lib/main';
+import docsSearchBar from './src/lib/main'
 
-export default docsSearchBar;
+export default docsSearchBar

jest.config.js

@@ -4,4 +4,4 @@ module.exports = {
   resetMocks: true,
   restoreMocks: true,
   testPathIgnorePatterns: ['/node_modules/', '/dist/', '/docs/'],
-};
+}

package.json

@@ -17,9 +17,8 @@
     "format:md": "prettier --write '**/*.md'",
     "playground": "yarn --cwd ./playgrounds/html && yarn --cwd ./playgrounds/html serve",
     "playground:js": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript serve",
-    "lint": "eslint ./src ./*.js",
-    "lint-fix": "eslint --fix ./src ./*.js",
-    "prettier-ci": "prettier --check ./src/**/*.scss '**/*.md'",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "./scripts/test",
     "test:watch": "./scripts/test-watch"
   },

playgrounds/html/index.html

@@ -4,14 +4,22 @@
     <meta charset="utf-8" />
     <meta name="color-scheme" content="dark light" />
     <title>Docs SearchBar playground</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css"
+    />
     <link rel="stylesheet" href="../../src/styles/main.scss" />
   </head>
   <body>
     <div class="container">
       <div class="col-md-12">
         <div class="searchbox">
-          <input type="search" placeholder="docs-searchbar input" class="form-control" id="q">
+          <input
+            type="search"
+            placeholder="docs-searchbar input"
+            class="form-control"
+            id="q"
+          />
         </div>
       </div>
     </div>
@@ -21,18 +29,19 @@
       docsSearchBar.default({
         // Test with MeiliSearch Documentation
         hostUrl: 'https://docs-search-bar.meilisearch.com',
-        apiKey: 'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
+        apiKey:
+          'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
         indexUid: 'docs',
         inputSelector: '#q',
         handleSelected(input, event, suggestion, datasetNumber, context) {
-          console.info(input);
-          console.info(event);
-          console.info(suggestion);
-          console.info(datasetNumber);
-          console.info(context);
+          console.info(input)
+          console.info(event)
+          console.info(suggestion)
+          console.info(datasetNumber)
+          console.info(context)
         },
-        debug: true // Set debug to true if you want to inspect the dropdown
-      });
+        debug: true, // Set debug to true if you want to inspect the dropdown
+      })
     </script>
     <style>
       .container {

playgrounds/javascript/index.html

@@ -4,13 +4,21 @@
     <meta charset="utf-8" />
     <meta name="color-scheme" content="dark light" />
     <title>Docs SearchBar playground</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css"
+    />
   </head>
   <body>
     <div class="container">
       <div class="col-md-12">
         <div class="searchbox">
-          <input type="search" placeholder="docs-searchbar input" class="form-control" id="q">
+          <input
+            type="search"
+            placeholder="docs-searchbar input"
+            class="form-control"
+            id="q"
+          />
         </div>
       </div>
     </div>

playgrounds/javascript/src/index.js

@@ -1,5 +1,5 @@
-import docsSearchBar from '../../../index';
-import '../../../src/styles/main.scss';
+import docsSearchBar from '../../../index'
+import '../../../src/styles/main.scss'
 
 docsSearchBar({
   // Test with MeiliSearch Documentation
@@ -8,11 +8,11 @@ docsSearchBar({
   indexUid: 'docs',
   inputSelector: '#q',
   handleSelected(input, event, suggestion, datasetNumber, context) {
-    console.info(input);
-    console.info(event);
-    console.info(suggestion);
-    console.info(datasetNumber);
-    console.info(context);
+    console.info(input)
+    console.info(event)
+    console.info(suggestion)
+    console.info(datasetNumber)
+    console.info(context)
   },
   debug: true, // Set debug to true if you want to inspect the dropdown
-});
+})