diff --git a/README.md b/README.md index 1470a5d278..e69e9895fe 100644 --- a/README.md +++ b/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: 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.