diff --git a/README.md b/README.md index 0214fc6741..a1358cbedd 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,10 @@ yarn install Configuration of each app and service is read from environment variables. There is an `.env.template` file in each app or service directory that must be copied to `.env` (or equivalent). Some keys are purposefully missing for security concerns and are internally available. +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 ``` diff --git a/sites/public/README.md b/sites/public/README.md index 5459815d0e..d61ff60680 100644 --- a/sites/public/README.md +++ b/sites/public/README.md @@ -10,6 +10,34 @@ All from within `sites/public`: - Copy the `.env.template` to `.env` and edit variables appropriate to your local environment - `yarn dev:all` 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 consistent of a Cypress integration test suite. We are looking to add React Testing Library unit tests soon.