feat(docs): Prettify with prettier (#2427)

Author: jacobmllr95

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "proseWrap": "always",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2
+}

CHANGELOG.md

@@ -3,69 +3,74 @@
 👍🎉 First off, thanks for taking the time to contribute! 🎉👍
 
 ## Playground & Issue Reports
+
 If you want to play with BootstrapVue components without any local setup just head to
-[OnlinePlayground](https://bootstrap-vue.js.org/play) and you can interactively play and test components with a fresh Vue instance.
-If you want to keep your changes or make PRs reporting a component's misbehaviour you can save them in JSFiddle and provide that link in issues.
+[OnlinePlayground](https://bootstrap-vue.js.org/play) and you can interactively play and test
+components with a fresh Vue instance. If you want to keep your changes or make PRs reporting a
+component's misbehaviour you can save them in JSFiddle and provide that link in issues.
 
 ## Setup
+
 - Clone this repo (`git clone https://github.com/bootstrap-vue/bootstrap-vue --branch=dev`)
 - Make sure you have node & yarn installed locally.
 - `cd bootstrap-vue`
 - Run `yarn install` to get all dependencies installed.
 
 ## Work on components
+
 If you want to hack and improve components locally, you can follow these steps:
 
 - Run `yarn docs-dev` to run a local development server.
 - Head to `http://localhost:3000/play`.
-- Now you can locally make changes to components (they are located in the `components` directory). 
+- Now you can locally make changes to components (they are located in the `components` directory).
   Changes will be applied with webpack hot-reloading without needing to reload the page.
 - Finally feel free to share your awesome hacks with others and opening a PR.
 
 ## Test inside your project
+
 If you want to see your changes in your project instead of the playground:
 
-- Execute `yarn link` inside *bootstrap-vue* directory.
+- Execute `yarn link` inside _bootstrap-vue_ directory.
 - In your project run `yarn link bootstrap-vue`
-- Run `yarn watch` inside *bootstrap-vue*
-- Now every time you change a component, a new production version will be built and ready on your project. 
+- Run `yarn watch` inside _bootstrap-vue_
+- Now every time you change a component, a new production version will be built and ready on your
+  project.
 
 ## Pull requests
-Please ensure all pull requests are made aganst the `dev` branch on GitHub. See
-the [Conventional Commits](https://conventionalcommits.org/) spec for commit
-and PR naming guidelines. This is very important, as the `CHANGELOG` is
-generated from these messages.
+
+Please ensure all pull requests are made aganst the `dev` branch on GitHub. See the
+[Conventional Commits](https://conventionalcommits.org/) spec for commit and PR naming guidelines.
+This is very important, as the `CHANGELOG` is generated from these messages.
 
 Examples:
 
-* `fix(modal): fixes some broken modal stuff`
-* `feat(table): add a feature to the table compoment!`
+- `fix(modal): fixes some broken modal stuff`
+- `feat(table): add a feature to the table compoment!`
 
 ## Financial contributions
 
-We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/bootstrap-vue).
-Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
-
+We also welcome financial contributions in full transparency on our
+[open collective](https://opencollective.com/bootstrap-vue). Anyone can file an expense. If the
+expense makes sense for the development of the community, it will be "merged" in the ledger of our
+open collective by the core contributors and the person who filed the expense will be reimbursed.
 
 ## Credits
 
-
 ### Contributors
 
 Thank you to all the people who have already contributed to bootstrap-vue!
 <a href="https://github.com/bootstrap-vue/bootstrap-vue/graphs/contributors"><img src="https://opencollective.com/bootstrap-vue/contributors.svg?width=890" class="img-fluid"></a>
 
-
 ### Backers
 
 Thank you to all our backers! [[Become a backer](https://opencollective.com/bootstrap-vue#backer)]
 
 <a href="https://opencollective.com/bootstrap-vue#backers" target="_blank"><img src="https://opencollective.com/bootstrap-vue/backers.svg?width=890" class="img-fluid"></a>
 
-
 ### Sponsors
 
-Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/bootstrap-vue#sponsor))
+Thank you to all our sponsors! (please ask your company to also support this open source project by
+[becoming a sponsor](https://opencollective.com/bootstrap-vue#sponsor))
 
 <a href="https://opencollective.com/bootstrap-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/bootstrap-vue/sponsor/0/avatar.svg"></a>
 <a href="https://opencollective.com/bootstrap-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/bootstrap-vue/sponsor/1/avatar.svg"></a>

CONTRIBUTING.md

@@ -2,9 +2,10 @@
 
 ## General
 
-If you are using module bundlers like [webpack](https://webpack.js.org/), [rollup.js](https://rollupjs.org),
-etc you may prefer to directly include the package into your project. To get started, use
-`yarn` or `npm` to get the latest version of Vue, BootstrapVue and Bootstrap 4:
+If you are using module bundlers like [webpack](https://webpack.js.org/),
+[rollup.js](https://rollupjs.org), etc you may prefer to directly include the package into your
+project. To get started, use `yarn` or `npm` to get the latest version of Vue, BootstrapVue and
+Bootstrap 4:
 
 ```bash
 # With npm
@@ -36,22 +37,21 @@ Or import Bootstrap and BootstrapVue `scss` files via a custom SCSS file:
 
 ```scss
 // custom.scss
-@import "node_modules/bootstrap/scss/bootstrap";
-@import "node_modules/bootstrap-vue/src/index.scss";
+@import 'node_modules/bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap-vue/src/index.scss';
 ```
 
 ```js
 // app.js
 import 'custom.scss'
 ```
 
-Be sure to include your custom variables before `bootstrap.scss` and include BootstrapVue
-SCSS _after_ Bootstrap SCSS to ensure variables are set up correctly.
+Be sure to include your custom variables before `bootstrap.scss` and include BootstrapVue SCSS
+_after_ Bootstrap SCSS to ensure variables are set up correctly.
 
 **Note**: _Requires webpack configuration to load CSS/SCSS files
 ([official guide](https://webpack.js.org/guides/asset-management/#loading-css))_.
 
-
 ## Nuxt.js plugin module
 
 Install dependencies:
@@ -74,20 +74,17 @@ This will include both `boostrap.css` and `bootstrap-vue.css` default CSS.
 }
 ```
 
-If you are using custom Bootstrap SCSS, you can disable automatic inclusion of Bootstrap
-and BootstrapVue pre-compiled CSS files by setting the folliwing option(s) to `false`:
+If you are using custom Bootstrap SCSS, you can disable automatic inclusion of Bootstrap and
+BootstrapVue pre-compiled CSS files by setting the folliwing option(s) to `false`:
 
 ```js
 {
-  modules: [
-    ['bootstrap-vue/nuxt', { bootstrapCss: false, bootstrapVueCss: false }],
-  ]
+  modules: [['bootstrap-vue/nuxt', { bootstrapCss: false, bootstrapVueCss: false }]]
 }
-
 ```
 
-BootstrapVue's custom CSS relies on some Boostrap SCSS variables. You can include Bootstrap
-and BootstrapVue SCSS in your project's custom SCSS file:
+BootstrapVue's custom CSS relies on some Boostrap SCSS variables. You can include Bootstrap and
+BootstrapVue SCSS in your project's custom SCSS file:
 
 ```scss
 // custom.scss
@@ -102,8 +99,8 @@ $grid-breakpoints: (
 );
 
 // Then include the following
-@include "bootstrap/scss/bootstrap";
-@include "bootstrap-vue/src/index.scss";
+@include 'bootstrap/scss/bootstrap';
+@include 'bootstrap-vue/src/index.scss';
 ```
 
 In your app main entry point include the single custom SCSS file (when using `sass-loader`):
@@ -113,13 +110,14 @@ In your app main entry point include the single custom SCSS file (when using `sa
 import 'custom.scss'
 ```
 
-
 ## Vue CLI 2
 
 BootstrapVue has two Vue CLI templates available:
 
-- [webpack-simple](https://github.com/bootstrap-vue/webpack-simple): Quick scaffold for a proof of concept or small app
-- [webpack](https://github.com/bootstrap-vue/webpack): Larger, production ready template with more options
+- [webpack-simple](https://github.com/bootstrap-vue/webpack-simple): Quick scaffold for a proof of
+  concept or small app
+- [webpack](https://github.com/bootstrap-vue/webpack): Larger, production ready template with more
+  options
 
 ```bash
 # Ensure Vue CLI is installed and up to date
@@ -141,7 +139,6 @@ npm run dev
 You can repeat the commands above replacing `bootstrap-vue/webpack-simple` with
 `bootstrap-vue/webpack` for the webpack template.
 
-
 ## Vue CLI 3
 
 Unlike V2, Vue CLI 3 doesn't use templates.
@@ -158,8 +155,8 @@ Enter the `my-project` directory and install `bootstrap-vue`:
 npm i bootstrap-vue
 ```
 
-Under the hood, Vue CLI uses webpack, so we can register the BootstrapVue plugin
-as with the webpack instructions.
+Under the hood, Vue CLI uses webpack, so we can register the BootstrapVue plugin as with the webpack
+instructions.
 
 ```js
 import Vue from 'vue'
@@ -171,8 +168,9 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 ```
 
-Optionally, you can import components individually, as [below](#individual-components-and-directives).
-To shorten import paths, we can add a webpack alias via `vue.config.js`.
+Optionally, you can import components individually, as
+[below](#individual-components-and-directives). To shorten import paths, we can add a webpack alias
+via `vue.config.js`.
 
 ```js
 const path = require('path')
@@ -181,25 +179,21 @@ module.exports = {
   configureWebpack: {
     resolve: {
       alias: {
-        'bootstrap-components': path.resolve(
-          __dirname,
-          'node_modules/bootstrap-vue/es/components'
-        ),
+        'bootstrap-components': path.resolve(__dirname, 'node_modules/bootstrap-vue/es/components')
       }
     }
   }
 }
 ```
 
-For additional configuration for Vue CLI 3 for using project relative paths for image src
-props on various BootstrapVue components, refer to the Vue CLI 3 section of the 
+For additional configuration for Vue CLI 3 for using project relative paths for image src props on
+various BootstrapVue components, refer to the Vue CLI 3 section of the
 [Image Src Resolving](/docs/reference/images#vue-cli-3-support) reference page.
 
-
 ## Individual components and directives
 
-If you would like to only pull in a specific component or set of components, you can do
-this by directly importing those components.
+If you would like to only pull in a specific component or set of components, you can do this by
+directly importing those components.
 
 To cherry pick a component/directive, start by importing it in the file where it is being used:
 
@@ -232,11 +226,10 @@ Vue.directive('b-modal', BModalDirective)
 Vue and ES2015 allow for various syntaxes here, so feel free to utilize kebab-casing (shown),
 camelCasing, PascalCasing, and/or object property shorthand.
 
-
 ### Component groups and Directives as Vue plugins
 
-You can also import component groups and directives as Vue plugins by importing
-the component group or directive directory:
+You can also import component groups and directives as Vue plugins by importing the component group
+or directive directory:
 
 ```js
 // This imports all the layout components such as <b-container>, <b-row>, <b-col>:
@@ -256,17 +249,17 @@ import { Scrollspy } from 'bootstrap-vue/es/directives'
 Vue.use(Scrollspy)
 ```
 
-When importing as plugins, all subcomponents and related directives are imported in most cases.
-i.e. When importing `<b-nav>`, all the `<nav-*>` sub components are also included, as well all
-dropdown sub components. Component shorthand aliases (if any) are also included in the plugin.
+When importing as plugins, all subcomponents and related directives are imported in most cases. i.e.
+When importing `<b-nav>`, all the `<nav-*>` sub components are also included, as well all dropdown
+sub components. Component shorthand aliases (if any) are also included in the plugin.
 
 Refer to the component and directive documentation for details.
 
 ### webpack + Babel
 
-When importing components/directives individually, you must configure your app to properly
-build the BootstrapVue library source code. This commonly involves white-listing the node
-module for your babel loader rule in webpack.
+When importing components/directives individually, you must configure your app to properly build the
+BootstrapVue library source code. This commonly involves white-listing the node module for your
+babel loader rule in webpack.
 
 ```js
 // webpack.config.js
@@ -282,9 +275,10 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        include: [ // Use `include` vs `exclude` to whitelist vs blacklist
+        include: [
+          // Use `include` vs `exclude` to whitelist vs blacklist
           path.resolve(__dirname, 'src'), // Whitelist your app source files
-          require.resolve('bootstrap-vue'), // Whitelist bootstrap-vue
+          require.resolve('bootstrap-vue') // Whitelist bootstrap-vue
         ],
         loader: 'babel-loader'
       }
@@ -293,23 +287,26 @@ module.exports = {
 }
 ```
 
-
 ## Browser
+
 ```html
 <!-- Add this to <head> -->
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
-<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
+<link
+  type="text/css"
+  rel="stylesheet"
+  href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
+/>
 
 <script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
 <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
 <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
 ```
 
-
 ## Build Variants
 
-Choosing the best variant for your build environment / packager helps less bundle sizes.
-If your bundler supports es modules, it will automatically prefer it over commonjs.
+Choosing the best variant for your build environment / packager helps less bundle sizes. If your
+bundler supports es modules, it will automatically prefer it over commonjs.
 
 | Variant        | Environments          | Package path                                                           |
 | -------------- | --------------------- | ---------------------------------------------------------------------- |
@@ -318,38 +315,41 @@ If your bundler supports es modules, it will automatically prefer it over common
 | commonjs2      | webpack 1 / ...       | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` |
 | UMD            | Browser               | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js`               |
 
-
 ## Migrating a project already using Bootstrap
 
-If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to your project:
+If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to
+your project:
 
 - Remove the bootstrap.js file from your page scripts or build pipeline
-- If Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue **does not** depend on jQuery
+- If Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue **does
+  not** depend on jQuery
 - Convert your native Bootstrap HTML markup into the simplified BootstrapVue custom component markup
 
-
 ## Browser Support
 
 ### CSS
-BootstrapVue is to be used with Bootstrap 4 CSS/SCSS.
-Please see [Browsers and devices](https://getbootstrap.com/docs/4.2/getting-started/browsers-devices)
-for more information about browsers currently supported by Bootstrap 4.
+
+BootstrapVue is to be used with Bootstrap 4 CSS/SCSS. Please see
+[Browsers and devices](https://getbootstrap.com/docs/4.2/getting-started/browsers-devices) for more
+information about browsers currently supported by Bootstrap 4.
 
 ### JS
-BootstrapVue is written in Vue! So this is up to your project and bundler which browsers are supported.
+
+BootstrapVue is written in Vue! So this is up to your project and bundler which browsers are
+supported.
 
 If you want to support older IE, Android and IOS devices, you may want to use
 [Babel Polyfill](https://babeljs.io/docs/usage/polyfill):
 
 - `npm install @babel/polyfill`
 - Import it in your app main entry point with `import '@babel/polyfill'`
 
-
 ## Tooling Support
 
 ### VS Code + Vetur
-If you are using [VS Code](https://code.visualstudio.com/) as your text editor, BootstrapVue
-has intellisense autocompletion for component attributes available when using the
+
+If you are using [VS Code](https://code.visualstudio.com/) as your text editor, BootstrapVue has
+intellisense autocompletion for component attributes available when using the
 [Vetur extension](https://marketplace.visualstudio.com/items?itemName=octref.vetur).
 
 [Twitter: Vetur + BootstrapVue](https://twitter.com/AlexSashaRegan/status/912769997776158723)