chore(lint): add prettier and lint on CI (#2946)

- Adds prettier to a lint command (prettier was installed just not used anywhere)
- Runs `npm install` & `npm lint` on CI
- Updates the `.prettierignore` to be more up-to-date with the current docs structure 
  - `static/code/stackblitz` files were ignored because it was modifying the indentation surrounding `{ TEMPLATE }` and this caused the StackBlitz to look worse when opened
- Adds `mdx` as a parser to the `@ionic/prettier-config` and updates this repo to use that version

Author: brandyscarney

.github/workflows/CI.yml

@@ -0,0 +1,27 @@
+# GitHub Actions docs
+# https://help.github.com/en/articles/about-github-actions
+# https://help.github.com/en/articles/workflow-syntax-for-github-actions
+
+name: Install Dependencies, Lint
+
+on: [pull_request]
+
+jobs:
+  test:
+    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node_version: [16]
+        os: [windows-latest, macOS-latest]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node_version }}
+    - name: Install Dependencies
+      run: npm ci --legacy-peer-deps
+    - name: Lint
+      run: npm run lint

.prettierignore

@@ -1,13 +1,15 @@
 src/theme/DocItem
 src/theme/DocPage
 legacy-stencil-components
-node_modules
 scripts/bak
-src/styles.bak
-src/pages
+
 docs/api
 docs/native
 docs/cli/commands
 
+static/code/stackblitz
+
 .docusaurus
-.github
+.github
+build
+node_modules

.prettierrc.js

@@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi
 To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
 | ion-slides Selector | Swiper Selector    |
-| ------------------- | ------------------ | 
+| ------------------- | ------------------ |
 | `ion-slides`        | `swiper-container` |
 | `ion-slide`         | `swiper-slide`     |
 
@@ -155,9 +155,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -190,11 +188,11 @@ To set these options as properties directly on `<swiper-container>` we would do
 
 Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-| Name      | Notes                                                                                                                                   |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
-| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
-| pager     | Use the `pagination` property instead.                                                                                                  |
+| Name    | Notes                                                                                                                                   |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode    | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager   | Use the `pagination` property instead.                                                                                                  |
 
 :::note
 All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
@@ -306,9 +304,7 @@ All methods and properties available on the Swiper instance can be found at <a h
 Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```html
-<swiper-container effect="flip">
-  ...
-</swiper-container>
+<swiper-container effect="flip"> ... </swiper-container>
 ```
 
 :::note

docs/angular/slides.md

@@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
 
 For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
+
 ```shell
 ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
 ```
 
-Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
+Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).