From 26c2940261b945e1e4dfac5286ab2f6e8c07cca6 Mon Sep 17 00:00:00 2001 From: Emily Jablonski Date: Fri, 25 Oct 2024 10:21:02 -0600 Subject: [PATCH 1/2] docs: update readme w extension instructions --- README.md | 2 ++ sites/public/README.md | 28 ++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/README.md b/README.md index 1470a5d278..030b297454 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,8 @@ 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)). + ### 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: diff --git a/sites/public/README.md b/sites/public/README.md index 09c277666e..39bacd53d5 100644 --- a/sites/public/README.md +++ b/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. From 86cda33d08456d0ce8682f4d0110971a9922f185 Mon Sep 17 00:00:00 2001 From: Emily Jablonski Date: Fri, 25 Oct 2024 12:29:06 -0600 Subject: [PATCH 2/2] docs: update readme w extension instructions --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 030b297454..e69e9895fe 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,8 @@ The [Code Spell Checker plugin](https://marketplace.visualstudio.com/items?itemN 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: