{"id":16601940,"url":"https://github.com/ecmel/vscode-html-css","last_synced_at":"2025-05-07T20:09:19.052Z","repository":{"id":9858447,"uuid":"63369463","full_name":"ecmel/vscode-html-css","owner":"ecmel","description":"Visual Studio Code Extension - CSS Intellisense for HTML","archived":false,"fork":false,"pushed_at":"2025-03-29T09:40:45.000Z","size":986,"stargazers_count":144,"open_issues_count":6,"forks_count":104,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-07T20:08:42.629Z","etag":null,"topics":["visual-studio-code"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ecmel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ecmel","custom":"https://www.buymeacoffee.com/ecmel"}},"created_at":"2016-07-14T21:01:21.000Z","updated_at":"2025-05-04T18:00:31.000Z","dependencies_parsed_at":"2024-01-14T09:26:56.937Z","dependency_job_id":"930c6f83-16dc-4502-b0f9-66c205c8df6f","html_url":"https://github.com/ecmel/vscode-html-css","commit_stats":null,"previous_names":[],"tags_count":97,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Fvscode-html-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Fvscode-html-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Fvscode-html-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Fvscode-html-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecmel","download_url":"https://codeload.github.com/ecmel/vscode-html-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252949270,"owners_count":21830151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["visual-studio-code"],"created_at":"2024-10-12T00:19:44.791Z","updated_at":"2025-05-07T20:09:18.994Z","avatar_url":"https://github.com/ecmel.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ecmel","https://www.buymeacoffee.com/ecmel"],"categories":[],"sub_categories":[],"readme":"# Visual Studio Code CSS Intellisense for HTML\n\n[![commit](https://github.com/ecmel/vscode-html-css/actions/workflows/commit.yml/badge.svg)](https://github.com/ecmel/vscode-html-css/actions/workflows/commit.yml)\n\nHTML `id` and `class` attribute completion for Visual Studio Code.\n\n## Features\n\n- HTML `id` and `class` attribute completion\n- Supports completion from in file defined styles\n- Supports specifying remote and local style sheets\n- Supports any language for completion\n- Supports go to definition for selectors\n- Validates class attributes on demand\n\n## Supported Languages\n\nSupported languages can be configured with the `css.enabledLanguages` global setting. By default `html` is enabled:\n\n```json\n{\n  \"css.enabledLanguages\": [\"html\"]\n}\n```\n\nExtension can be configured to support any language where it makes sense such as `nunjucks`, `twig`, `mustache`, `vue`, `typescript` etc. You should also install corresponding language extension which registers the specific language id in VS Code.\n\nThis setting is application scoped and changing the setting requires restarting VS Code.\n\n## Specifying Style Sheets\n\nRemote and local style sheets with optional glob patterns and variable substitutions can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest in all configured languages within that workspace folder.\n\nGlob patterns for local style sheets can have the following syntax:\n\n| Pattern | Matches                                               |\n| ------- | ----------------------------------------------------- |\n| `*`     | zero or more characters in a path segment             |\n| `?`     | one character in a path segment                       |\n| `**`    | any number of path segments, including none           |\n| `{}`    | group conditions like `**​/*.{css,scss}`              |\n| `[]`    | a range of characters like `[0-9]` or negate `[!0-9]` |\n\nThe following variable substitutions are supported for local style sheets as well:\n\n| Variable                     | Substitution                              |\n| ---------------------------- | ----------------------------------------- |\n| `${fileBasename}`            | Current file's basename                   |\n| `${fileBasenameNoExtension}` | Current file's basename with no extension |\n| `${fileExtname}`             | Current file's extension                  |\n\n## Examples\n\nConfiguration depends on your layout of the project. The following most basic setup will suggest from all `css` files in project's `src` folder:\n\n**`.vscode/settings.json`**\n\n```json\n{\n  \"css.styleSheets\": [\"src/**/*.css\"]\n}\n```\n\n### [Bootstrap](https://getbootstrap.com/)\n\nIf Bootstrap `npm` module is used with additional `scss` the following can be a starting point:\n\n**`.vscode/settings.json`**\n\n```json\n{\n  \"css.styleSheets\": [\n    \"node_modules/bootstrap/dist/css/bootstrap.css\",\n    \"src/**/*.scss\"\n  ]\n}\n```\n\nor in case of Bootstrap CDN with additional plain `css`:\n\n**`.vscode/settings.json`**\n\n```json\n{\n  \"css.styleSheets\": [\n    \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\",\n    \"src/**/*.css\"\n  ]\n}\n```\n\nAll of Bootstrap's class selectors with additional user defined styles in the project will be available for completion in `html` files.\n\n### [Lit](https://lit.dev/)\n\nEnable `typescript` or `javascript` in global settings depending on your usage and restart VS Code:\n\n```json\n{\n  \"css.enabledLanguages\": [\"html\", \"typescript\"]\n}\n```\n\nComponent's [static styles](https://lit.dev/docs/components/styles/) will be available for completion elsewhere in the component. If you need to use some base styles in every component you can specify as follows:\n\n**`.vscode/settings.json`**\n\n```json\n{\n  \"css.styleSheets\": [\"src/base-styles.ts\"]\n}\n```\n\nVariable substitution can be used to refer to a related `css` file. If you are working on `my-component.ts` and your `css` is in `my-component-css.ts` then a suitable setup can be:\n\n**`.vscode/settings.json`**\n\n```json\n{\n  \"css.styleSheets\": [\"**/${fileBasenameNoExtension}-css.ts\"]\n}\n```\n\n### [Vue](https://vuejs.org/)\n\nInstall your favorite Vue language extension from [Marketplace](https://marketplace.visualstudio.com/search?term=tag%3Avue\u0026target=VSCode\u0026category=All%20categories\u0026sortBy=Relevance) which registers `vue` language id then enable `vue` in global settings and restart VS Code:\n\n```json\n{\n  \"css.enabledLanguages\": [\"html\", \"vue\"]\n}\n```\n\nStyles defined in component's `\u003cstyle\u003e` section will be available for completion in component's `\u003ctemplate\u003e` section.\n\n### [Angular](https://angular.io/)\n\nVariable substitution can be used for Angular development:\n\n**`.vscode/settings.json`**\n\n```json\n{\n  \"css.styleSheets\": [\"**/${fileBasenameNoExtension}.css\"]\n}\n```\n\nWith this setup, styles defined in e.g. `app.component.css` will be available in `app.component.html`.\n\n## Go to Definition\n\nGo to definition for `id` and `class` selectors for local style sheets are supported. Selecting `Go to Definition` from context menu (`F12` or `⌘ click`) on a selector will open the local style sheet which the selector is defined.\n\n## Commands\n\n### Validate class selectors\n\nValidates all `class` selectors in the active editor. Auto validation can be configured in extension settings globally or per workspace.\n\n### Clear style sheets cache\n\nClears style sheets cache.\n\n## Sponsor\n\n- [Github Sponsors](https://github.com/sponsors/ecmel)\n- [Buy me a coffee](https://www.buymeacoffee.com/ecmel)\n\n## Installation\n\nExtension can be installed from [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmel%2Fvscode-html-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecmel%2Fvscode-html-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmel%2Fvscode-html-css/lists"}