Integrates Prettier for formatting YAML, SCSS, JavaScript, and Markdo…

…wn (#1213)

* Correcting the Markdown documents

* Correcting the SCSS files

* Correcting the JS files

* Correcting the YAML files

* Correcting the TypeScript files

* Updating CircleCI

* Resolving conflicts between ESLint and Prettier and integrating eslint-config-prettier

.circleci/config.yml

@@ -4,7 +4,6 @@ orbs:
   coveralls: coveralls/coveralls@2.2.1
 
 commands:
-
   install_dependencies:
     steps:
       - run: sudo apt update && sudo apt install postgresql-client libmsgpack-dev libpq-dev
@@ -43,30 +42,32 @@ commands:
       - run: docker start postgres
 
 jobs:
-
   test:
     working_directory: ~/tiger_data
     machine:
       image: ubuntu-2404:2024.05.1
       docker_layer_caching: true
     environment:
-        POSTGRES_USER: tiger_data_user
-        POSTGRES_DB: test_db
-        POSTGRES_HOST_AUTH_METHOD: trust
-        ARCH: linux
+      POSTGRES_USER: tiger_data_user
+      POSTGRES_DB: test_db
+      POSTGRES_HOST_AUTH_METHOD: trust
+      ARCH: linux
     steps:
       - checkout
       - install_dependencies
       - run:
           name: Run rubocop
           command: bundle exec rubocop
-          paths: '*'
+          paths: "*"
+      - run:
+          name: Run prettier
+          command: yarn run prettier --check .
       - run:
           name: Run eslint
           command: yarn run eslint 'app/javascript/**'
       - persist_to_workspace:
-          root: &root '~/tiger_data'
-          paths: '*'
+          root: &root "~/tiger_data"
+          paths: "*"
       - run:
           name: Run vitest
           command: yarn run vitest run --coverage

.eslintrc.yaml

@@ -1,7 +1,9 @@
 env:
   browser: true
   es2021: true
-extends: 'airbnb-base'
+extends:
+  - "airbnb-base"
+  - "prettier"
 overrides: []
 parserOptions:
   ecmaVersion: latest
@@ -11,6 +13,6 @@ globals:
 
 rules:
   no-alert: off # OK: A lot easier than coding up new UI.
-  no-console:   # OK: console.log is fine for debugging, but we don't want to keep it around indefinitely.
-    - error     # Also make sure that warnings and errors are marked as such.
+  no-console: # OK: console.log is fine for debugging, but we don't want to keep it around indefinitely.
+    - error # Also make sure that warnings and errors are marked as such.
     - { allow: ["warn", "error"] }

.github/workflows/pages.yml

@@ -2,7 +2,7 @@
 name: Deploy API docs to GitHub Pages
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
     # paths:
     #   - '.github/workflows/pages.yml'
     #   - '.yardopts'
@@ -19,7 +19,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: true
 
 jobs:
@@ -37,4 +37,4 @@ jobs:
           # default `doc` as default of `.yardopts`
           # output-dir: 'doc'
           # default version is 3.2
-          ruby-version: '3.3.0'
+          ruby-version: "3.3.0"

.gitignore

@@ -77,5 +77,3 @@ project_create_8.txt
 # Ignore rspec report
 /spec/fixtures/failed_tests.txt
 
-# Ignore prettier config
-.prettierrc

.prettierignore

@@ -0,0 +1,4 @@
+.yarn/
+vendor/
+README.md
+.prettierrc

.prettierrc

@@ -0,0 +1,22 @@
+singleQuote: true
+proseWrap: never
+printWidth: 96
+overrides:
+  - files:
+      - '*.md'
+      - 'docs/**/*.md'
+    options:
+      proseWrap: preserve
+      singleQuote: false
+  - files:
+      - 'config/**/*.yml'
+      - '*.yml'
+      - '*.yaml'
+    options:
+      proseWrap: preserve
+      singleQuote: false
+  - files:
+      - 'app/assets/stylesheets/**/*.scss'
+    options:
+      proseWrap: preserve
+      singleQuote: false

app/assets/stylesheets/_alternate_mediaflux.scss

@@ -1,25 +1,25 @@
 #alternate_mediaflux {
-    text-align: center;
-    background-color: rgb(0, 231, 73);
-    padding: 20px 0px 10px 0px;
-    border-bottom: #000000 solid 2px;
-    color: rgb(0, 0, 0);
-    box-shadow: inset 0px 9px 10px 2px rgba(0,0,0,0.5);
+  text-align: center;
+  background-color: rgb(0, 231, 73);
+  padding: 20px 0px 10px 0px;
+  border-bottom: #000000 solid 2px;
+  color: rgb(0, 0, 0);
+  box-shadow: inset 0px 9px 10px 2px rgba(0, 0, 0, 0.5);
 
-    h1 {
-      font-size: 24px;
-      font-weight: bold;
-    }
-    p {
-      font-size: 18px;
-    }
-    a {
-      text-decoration: underline;
-    }
+  h1 {
+    font-size: 24px;
+    font-weight: bold;
   }
-
-  @media all and (max-width: 860px) {
-    #emulator {
-      padding: 10px 3px 5px 3px;
-    }
-  }
+  p {
+    font-size: 18px;
+  }
+  a {
+    text-decoration: underline;
+  }
+}
+
+@media all and (max-width: 860px) {
+  #emulator {
+    padding: 10px 3px 5px 3px;
+  }
+}

app/assets/stylesheets/_banner.scss

@@ -1,23 +1,23 @@
 #banner {
-    text-align: center;
-    background-color: #e1f0fb;
-    padding: 20px 0px 10px 0px;
-    border-bottom: #0060a7 solid 2px;
-    color: #0060a7;
-    h1 {
-      font-size: 24px;
-      font-weight: bold;
-    }
-    p {
-      font-size: 18px;
-    }
-    a {
-      text-decoration: underline;
-    }
+  text-align: center;
+  background-color: #e1f0fb;
+  padding: 20px 0px 10px 0px;
+  border-bottom: #0060a7 solid 2px;
+  color: #0060a7;
+  h1 {
+    font-size: 24px;
+    font-weight: bold;
   }
-
-  @media all and (max-width: 860px) {
-    #banner {
-      padding: 10px 3px 5px 3px;
-    }
-  }
+  p {
+    font-size: 18px;
+  }
+  a {
+    text-decoration: underline;
+  }
+}
+
+@media all and (max-width: 860px) {
+  #banner {
+    padding: 10px 3px 5px 3px;
+  }
+}