docs: update readme w extension instructions (#4433)

README.md

@@ -64,6 +64,10 @@ The [Postgres explorer plugin](https://marketplace.visualstudio.com/items?itemNa
 
 The [Code Spell Checker plugin](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) will flag spelling errors.
 
+The [CSS variable autocomplete plugin](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables&ssr=false#overview) will pull in all CSS variable definitions from ui-seeds for autocompletion (more setup instructions in the [public README](https://github.com/bloom-housing/bloom/blob/main/sites/public/README.md)).
+
+The [CSS module autocomplete plugin](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules) which provides autocomplete for CSS module files.
+
 ### Running a local test server
 
 Running `yarn dev:all` from root runs 3 processes for both apps and the backend services on 3 different ports:

sites/public/README.md

@@ -14,6 +14,34 @@ If you don't have yarn installed, you can install homebrew with [these instructi
 - From within `sites/public` copy the `.env.template` to `.env` and edit variables appropriate to your local environment - some keys are secret and are internally available - the template file includes default values and descriptions of each variable
 - `yarn dev:all` at root will start up the backend at port 3100 and the public app at port 3000
 
+## Recommended Extension
+
+If you're using VSCode, the [CSS variable autocomplete plugin](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables&ssr=false#overview) will pull in all CSS variable definitions from ui-seeds for autocompletion.
+
+After installing the extension, ⌘⇧P Open User Settings (JSON), and add the following configuration:
+
+```
+  "cssVariables.blacklistFolders": [
+    "**/.git",
+    "**/.svn",
+    "**/.hg",
+    "**/CVS",
+    "**/.DS_Store",
+    "**/bower_components",
+    "**/tmp",
+    "**/dist",
+    "**/tests",
+    "**/node_modules/^(?!@bloom-housing).*/m"
+  ],
+  "cssVariables.lookupFiles": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass",
+    "**/*.less",
+    "node_modules/@bloom-housing/ui-seeds/src/**/*.scss"
+  ]
+  ```
+
 ## Tests
 
 For our public application, our tests currently consist of both a Cypress end to end suite and a jest unit/integration suite.