Component Catalog Assistant README
An extension to hook into Lucid's Component Catalog and make it easier to find and fix our frontend components to meet our standards.
The Component Catalog not only documents many of our standardized components, but also includes descriptions of components, CSS classes, or various other HTML structures that have been deprecated or require further review. You can find details on those here.
Features
The Catalog Assistant extension uses data from the Component Catalog to mark your code inline when it does not meet the Catalog's standards.
It also includes Quick Fixes for many of these cases, but it should be noted that the new components don't necessarily have the same fields as the ones they're replacing. Look up the component in our repository to find all the new inputs and properties!
Extension Settings
This extension contributes the following settings:
componentCatalogAssistant.lucidMainPath: Should contain the path to the Lucid repository. You do not need to define this in your configuration, since it defaults to the standard path. Only consider setting this config value if you have multiple "main" repositories on your computer and the definitions at ~/lucid/main would be wrong.
Known Issues
- Currently the Assistant has somewhat limited ability to transform old components into new components and makes many assumptions about the structure of the data. Our current Catalog does not define any complicated fixes, so this is fine for now, but in the future we may want to clean up the format of the data and make it capable of describing more complex transformations.
- Ctrl+click on the
'path/to/file' in a LESS import does not work. This is a known VSCode bug.
- The extension does not resolve Ctrl+click to LESS variables from imported files.
Release Notes
2.0.0
- Added LESS support. LESS properties and values can now be marked as deprecated/Needs Review by the extension.
- Added support for resolving components, classes, ids, and LESS imports to their definitions.
- Ctrl+click a Lucid component in a .component.html file to jump to its TypeScript file, or to its usages in LESS rules.
- Ctrl+click a class or id in a .component.html file to jump to its usages in LESS rules.
- Ctrl+click on a LESS
@import to jump to the corresponding file.
- Incorporated the "How to fix" links from the Component Catalog into the tooltips for warnings and deprecations. These frequently link to our Confluence pages for more information on the issue.
- Added support for One Off warnings (treated similar to Needs Review warnings).
1.0.2
Fixed an issue where components were being marked when they shouldn't have been. Updated wording around components that require review by #ufo-eng.
1.0.1
Fixed the content of tags being marked by the Assistant. Now only the opening and closing tags will be marked.
1.0.0
Initial Release.
