Install Prettier For Automatic Code Formatting (JS, HTML, & SCSS)

.eslintrc.js

@@ -1,64 +1,112 @@
 module.exports = {
-  'env': {
-    'browser': true,
-    'node': true,
-    'es2021': true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
   },
-  'extends': [
+  extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/recommended',
   ],
-  'parserOptions': {
-    "parser": "@typescript-eslint/parser",
-    "project": "./tsconfig.json",
-    'extraFileExtensions': [ '.vue' ]
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    project: './tsconfig.json',
+    extraFileExtensions: ['.vue'],
   },
-  'plugins': [
-    'vue',
-  ],
-  'rules': {
-    'max-len': ['error', {
-      'code': 100,
-      // Fixes errors in HTML files with long links
-      'ignoreUrls': true,
-    }],
+  plugins: ['vue'],
+  rules: {
+    'max-len': [
+      'error',
+      {
+        code: 100,
+        // Fixes errors in HTML files with long links
+        ignoreUrls: true,
+      },
+    ],
+
+    // Disable stylistic rules that interfere with Prettier
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/html-self-closing': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/html-indent': 'off',
 
     'vue/multi-word-component-names': ['off'],
     // This rule is for Vue3, and Gridsome uses Vue2
     'vue/no-deprecated-filter': ['off'],
     // Don't make <g-link> multiline, it adds spaces
-    "vue/multiline-html-element-content-newline": ["error", {
-      "ignores": [
-        "g-link",
-        // Original inline elements from: https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json
-        "a", "abbr", "audio", "b", "bdi", "bdo", "canvas", "cite", "code", "data", "del", "dfn", "em", "i", "iframe", "ins", "kbd", "label", "map", "mark", "noscript", "object", "output", "picture", "q", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "svg", "time", "u", "var", "video"
-      ],
-    }],
-    "vue/singleline-html-element-content-newline": ["error", {
-      "externalIgnores": ["g-link"]
-    }],
+    'vue/multiline-html-element-content-newline': [
+      'error',
+      {
+        ignores: [
+          'g-link',
+          // Original inline elements from: https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json
+          'a',
+          'abbr',
+          'audio',
+          'b',
+          'bdi',
+          'bdo',
+          'canvas',
+          'cite',
+          'code',
+          'data',
+          'del',
+          'dfn',
+          'em',
+          'i',
+          'iframe',
+          'ins',
+          'kbd',
+          'label',
+          'map',
+          'mark',
+          'noscript',
+          'object',
+          'output',
+          'picture',
+          'q',
+          'ruby',
+          's',
+          'samp',
+          'small',
+          'span',
+          'strong',
+          'sub',
+          'sup',
+          'svg',
+          'time',
+          'u',
+          'var',
+          'video',
+        ],
+      },
+    ],
 
     '@typescript-eslint/indent': ['error', 2],
-    "semi": ["error", "always"],
-    "arrow-parens": ["error", "always"],
-    "comma-dangle": ["error", "always-multiline"],
+    semi: ['error', 'always'],
+    'arrow-parens': ['error', 'always'],
+    'comma-dangle': ['error', 'always-multiline'],
 
-    "@typescript-eslint/explicit-function-return-type": ["error", {
-      "allowExpressions": true,
-      "allowHigherOrderFunctions": true,
-      "allowTypedFunctionExpressions": true
-    }]
+    '@typescript-eslint/explicit-function-return-type': [
+      'error',
+      {
+        allowExpressions: true,
+        allowHigherOrderFunctions: true,
+        allowTypedFunctionExpressions: true,
+      },
+    ],
   },
-  'overrides': [
+  overrides: [
     {
-      'files': ['*.vue', 'declarations/*.ts'],
-      'rules': {
-        'indent': 'off',
+      files: ['*.vue', 'declarations/*.ts'],
+      rules: {
+        indent: 'off',
         '@typescript-eslint/indent': 'off',
         '@typescript-eslint/no-var-requires': 0,
-      }
-    }
-  ]
+      },
+    },
+  ],
 };

.github/workflows/eslint.yml

@@ -3,18 +3,18 @@
 # More details at https://github.com/eslint/eslint
 # and https://eslint.org
 
-name: ESLint
+name: ESLint & Prettier
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   eslint:
-    name: Run ESLint scanning
+    name: Run ESLint & Prettier
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -33,9 +33,12 @@ jobs:
         run: yarn install
 
       - name: Run ESLint
-        run: yarn lint-ci
+        run: yarn eslint-ci
         continue-on-error: true
 
+      - name: Run Prettier
+        run: yarn prettier . --check
+
       - name: Upload analysis results to GitHub
         uses: github/codeql-action/upload-sarif@v2
         with:

.github/workflows/pytest.yml

@@ -4,10 +4,10 @@ name: Pytest Data Tests
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   pytest:

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore built files
+dist

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -63,7 +63,7 @@ When you see the above output, it means the site is now running and now you can
 
 ### Run Front-End Linting
 
-To run linting with auto-fix, run the following command:
+To run linting with auto-fixing (ESLint + Prettier), run the following command:
 
 ```bash
 docker-compose run --rm electrify-chicago yarn lint-fix
@@ -72,7 +72,7 @@ docker-compose run --rm electrify-chicago yarn lint-fix
 ### Run Data Processing
 
 1. If you update the raw data CSVs or the data scripts that post-process them (like if you are adding
-a new statistical analysis), you need to re-run the data processing.
+   a new statistical analysis), you need to re-run the data processing.
 
 2. To then process a new CSV file (at `src/data/source/ChicagoEnergyBenchmarking.csv`), you need to run the following command:
 
@@ -93,8 +93,9 @@ docker-compose run --rm electrify-chicago bash create_test_data.sh
 ```bash
 docker-compose run --rm electrify-chicago python -m pytest
 ```
+
 3. Run the following command for individual unit test suite (where YOUR_FILE_NAME is something like
-`test_clean_all_years`):
+   `test_clean_all_years`):
 
 ```bash
 docker-compose run --rm electrify-chicago python -m pytest tests/data/scripts/unit/YOUR_FILE_NAME.py
@@ -107,7 +108,7 @@ docker-compose run --rm electrify-chicago python -m pytest tests/data/scripts/un
 If there's a new large building owner to add, simply:
 
 1. **Add the building owner in the `BuildingOwners` constant** in `buildings-custom-info.constant.vue` -
-this defines metadata about the owner like their name and logo URLs
+   this defines metadata about the owner like their name and logo URLs
 
 Example:
 
@@ -122,8 +123,8 @@ iit: {
 ```
 
 2. **Tag buildings they own in the `BuildingsCustomInfo` constant** (in the same
-`buildings-custom-info.constant.vue` file) - this associates a given building (by its numeric unique
-ID, found under its address on its details page), with a given owner.
+   `buildings-custom-info.constant.vue` file) - this associates a given building (by its numeric unique
+   ID, found under its address on its details page), with a given owner.
 
 Example:
 
@@ -133,24 +134,24 @@ Example:
 ```
 
 3. **Setup their route by adding the new owner's ID (key) to `BuildingOwnerIds`** (in
-`gridsome.server.js`) - this tells Gridsome to create a route for this given slug
+   `gridsome.server.js`) - this tells Gridsome to create a route for this given slug
 
 Example:
 
 ```ts
 const BuildingOwnerIds = [
   'iit',
   // ...
-]
+];
 ```
 
 **Note:** You'll have to restart your `yarn develop` after step 3 to see changes, since
 `gridsome.server.js` just runs once.
 
 ### Adding Building Images
 
-1. **Find A Suitable Image* -- Building images can be sourced from Google Maps or a source that allows redistribution, like
-Wikimedia.
+1. \*_Find A Suitable Image_ -- Building images can be sourced from Google Maps or a source that allows redistribution, like
+   Wikimedia.
 
 2 **Process the Image**
 
@@ -162,12 +163,11 @@ We should reasonably crop images if needed and then scale them to be EITHER:
 Make sure to export it as a `.jpg` image at a quality level of 70, which should ensure a reasonable
 file size under 200 kB.
 
-**Store the image in `/static/building-imgs/`.
+\*\*Store the image in `/static/building-imgs/`.
 
 3. **Tell The Site There's a Building Image** - Follow the pattern of other buildings in the
-`building-images.constant.vue`, providing an attribution URL, the image file name, and specify
-whether it's a tall (portrait) image and whether it's from Google Maps.
-
+   `building-images.constant.vue`, providing an attribution URL, the image file name, and specify
+   whether it's a tall (portrait) image and whether it's from Google Maps.
 
 4. **Confirm the image is visible and looks good** - and that's all there is to it!
 

docker-compose.yml

@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-      - "8080:8080"
+      - '8080:8080'
     entrypoint: /app/docker-entrypoint.sh
     volumes:
       - .:/app

gridsome.config.js

@@ -12,16 +12,14 @@ const path = require('path');
  * @param {string} rule A rule?
  */
 function addStyleResource(rule) {
-  rule.use('style-resource')
-      .loader('style-resources-loader')
-      .options({
-        patterns: [
-          path.resolve(__dirname, './src/scss/*.scss'),
-        ],
-      });
+  rule
+    .use('style-resource')
+    .loader('style-resources-loader')
+    .options({
+      patterns: [path.resolve(__dirname, './src/scss/*.scss')],
+    });
 }
 
-
 module.exports = {
   siteName: 'Electrify Chicago',
   plugins: [