From 35263744ebce1c98f7d4ee75aa7857e2375c8931 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 10:50:32 +0300 Subject: [PATCH 01/25] updates --- .github/FUNDING.yml | 2 +- README.md | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 99cac96..886d70e 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,4 +1,4 @@ # These are supported funding model platforms -custom: https://www.buymeacoffee.com/ecmel github: ecmel +custom: https://www.buymeacoffee.com/ecmel diff --git a/README.md b/README.md index 5e125af..096d728 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,11 @@ Validates all `class` selectors in the active editor. Clears style cache. +## Sponsor + +- [Github Sponsors](https://github.com/sponsors/ecmel) +- [Buy me a coffee](https://www.buymeacoffee.com/ecmel) + ## Installation Extension can be installed from [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css). From 224828d605e31c2dcd05df581253fd2fc5a34403 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 12:12:33 +0300 Subject: [PATCH 02/25] updates --- README.md | 6 +++--- package.json | 4 ++-- src/extension.ts | 2 +- src/provider.ts | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 096d728..953bae5 100644 --- a/README.md +++ b/README.md @@ -95,13 +95,13 @@ If you are using Bootstrap CDN: ## Commands -### Validate selectors +### Validate class selectors Validates all `class` selectors in the active editor. -### Clear style cache +### Clear style sheets cache -Clears style cache. +Clears style sheets cache. ## Sponsor diff --git a/package.json b/package.json index c1f41c5..56d4d96 100644 --- a/package.json +++ b/package.json @@ -78,11 +78,11 @@ "commands": [ { "command": "vscode-html-css.validate", - "title": "CSS: Validate selectors" + "title": "CSS: Validate class selectors" }, { "command": "vscode-html-css.clear", - "title": "CSS: Clear style cache" + "title": "CSS: Clear style sheets cache" } ] }, diff --git a/src/extension.ts b/src/extension.ts index 353f953..5c7fff6 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -67,7 +67,7 @@ export function activate(context: ExtensionContext) { commands.registerCommand("vscode-html-css.clear", () => clear()) ); - return commands.executeCommand( + return commands.executeCommand( "vscode-html-css.validate", AutoValidation.ALWAYS ); diff --git a/src/provider.ts b/src/provider.ts index a9b2359..d498e32 100644 --- a/src/provider.ts +++ b/src/provider.ts @@ -238,7 +238,7 @@ export class Provider implements CompletionItemProvider, DefinitionProvider { } export function clear() { - window.showInformationMessage(`CSS: Style cache (${cache.size}) cleared.`); + window.showInformationMessage(`Style sheets cache cleared: ${cache.size}`); cache.clear(); } From 8ebc9975d6e60693bc55a18840043249606de350 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 14:04:28 +0300 Subject: [PATCH 03/25] updates --- CHANGELOG.md | 2 +- package-lock.json | 4 ++-- package.json | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 05730f3..67ec279 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ All notable changes to the extension will be documented in this file. -## [2.0.8] - 2024-02- +## [2.0.8] - 2024-02-01 - Added optional auto validation - Added feedback for clear cache diff --git a/package-lock.json b/package-lock.json index 7c76ddf..d9f073d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vscode-html-css", - "version": "2.0.7", + "version": "2.0.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vscode-html-css", - "version": "2.0.7", + "version": "2.0.8", "license": "MIT", "devDependencies": { "@rollup/plugin-commonjs": "^25.0.7", diff --git a/package.json b/package.json index 56d4d96..7e16da1 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vscode-html-css", "displayName": "HTML CSS Support", "description": "CSS Intellisense for HTML", - "version": "2.0.7", + "version": "2.0.8", "license": "MIT", "publisher": "ecmel", "author": { @@ -65,7 +65,7 @@ "css.autoValidation": { "type": "string", "scope": "resource", - "description": "Auto validation for class selectors.", + "description": "When to validate class selectors.", "default": "Never", "enum": [ "Never", From 5b98271844db3277fbfddc3912d0230e145bfccf Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 22:07:57 +0300 Subject: [PATCH 04/25] update doc --- CHANGELOG.md | 1 + README.md | 61 ++++++++++++++++++++++++++++++---------------------- 2 files changed, 36 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 67ec279..c54b7a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to the extension will be documented in this file. - Added optional auto validation - Added feedback for clear cache +- Updated documentation - Updated dependencies ## [2.0.7] - 2024-01-23 diff --git a/README.md b/README.md index 953bae5..bf20417 100644 --- a/README.md +++ b/README.md @@ -17,26 +17,6 @@ HTML `id` and `class` attribute completion for Visual Studio Code. You can view a list of `id` and `class` attribute suggestions in configured languages. -## Specifying Style Sheets - -Style sheets can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all configured languages within that workspace folder. - -### Example - -**`.vscode/settings.json`** - -```json -{ - "css.styleSheets": [ - "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css", - "node_modules/bootstrap/dist/css/bootstrap.css", - "src/**/*.scss", - "src/view/style.ts", - "dist/style.css" - ] -} -``` - ## Supported Languages Supported languages can be configured with the `css.enabledLanguages` setting. By default `html` is enabled: @@ -51,13 +31,38 @@ Extension can be configured to support any language where it makes sense such as This setting is application scoped and changing the setting requires restarting VS Code. +## Specifying Style Sheets + +Style sheets can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all configured languages within that workspace folder. + +### Glob Patterns + +Glob patterns can have the following syntax: + +| Pattern | Matches | +| ------- | ------------------------------------------- | +| `*` | zero or more characters in a path segment | +| `?` | one character in a path segment | +| `**` | any number of path segments, including none | +| `{}` | group conditions like `**​/*.{ts,js}` | +| `[]` | declare a range of characters like `[0-9]` | +| `[!]` | negate a range of characters like `[!0-9]` | + ## Examples -Configuration depends on your layout of the project but some samples are below: +Configuration depends on your layout of the project. The following most basic settings will suggest from all your css files in your project's `src` folder: + +**`.vscode/settings.json`** + +```json +{ + "css.styleSheets": ["src/**/*.css"] +} +``` ### Bootstrap -If you are using Bootstrap npm module: +If you are using Bootstrap `npm` module with additional `scss` this can be a starting point: ```json { @@ -68,28 +73,32 @@ If you are using Bootstrap npm module: } ``` -If you are using Bootstrap CDN: +and if you are using Bootstrap CDN with additional plain `css`: ```json { "css.styleSheets": [ "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css", - "src/**/*.scss" + "src/**/*.css" ] } ``` ### Lit +First `typescript` or `javascript` should be enabled in global settings depending on your needs: + ```json { "css.enabledLanguages": ["typescript"] } ``` +Your in file styles will be available for completion for that file. If you need to use some base styles everywhere you can specify as follows: + ```json { - "css.styleSheets": ["src/view/style.ts"] + "css.styleSheets": ["src/base-styles.ts"] } ``` @@ -97,7 +106,7 @@ If you are using Bootstrap CDN: ### Validate class selectors -Validates all `class` selectors in the active editor. +Validates all `class` selectors in the active editor. Auto validation can also be configured in settings. ### Clear style sheets cache From 1ac7e2bd385157e8f924b67d80b3e25a114899d4 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 22:26:27 +0300 Subject: [PATCH 05/25] update doc --- README.md | 6 ++---- package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index bf20417..135ea29 100644 --- a/README.md +++ b/README.md @@ -33,11 +33,9 @@ This setting is application scoped and changing the setting requires restarting ## Specifying Style Sheets -Style sheets can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all configured languages within that workspace folder. +Remote and local style sheets with optional glob patterns can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all configured languages within that workspace folder. -### Glob Patterns - -Glob patterns can have the following syntax: +Glob patterns for local style sheets can have the following syntax: | Pattern | Matches | | ------- | ------------------------------------------- | diff --git a/package-lock.json b/package-lock.json index d9f073d..95ad14d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@rollup/plugin-typescript": "^11.1.6", "@types/line-column": "^1.0.2", "@types/mocha": "^10.0.6", - "@types/node": "^20.11.10", + "@types/node": "^20.11.11", "@types/sinon": "^17.0.3", "@types/vscode": "^1.75.0", "@vscode/test-electron": "^2.3.9", @@ -519,9 +519,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.11.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.10.tgz", - "integrity": "sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==", + "version": "20.11.11", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.11.tgz", + "integrity": "sha512-PlJCXfb57Jrman0H1BxO2+Q7qwih2Mwk7T6Gvixj+SK4mqs4RWOGMMoP6p/LFa3UrP2CZOO6ai6otd7J/TB6Ug==", "dev": true, "dependencies": { "undici-types": "~5.26.4" diff --git a/package.json b/package.json index 7e16da1..b8d5c1b 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "@rollup/plugin-typescript": "^11.1.6", "@types/line-column": "^1.0.2", "@types/mocha": "^10.0.6", - "@types/node": "^20.11.10", + "@types/node": "^20.11.11", "@types/sinon": "^17.0.3", "@types/vscode": "^1.75.0", "@vscode/test-electron": "^2.3.9", From 4852e3983f3abae87147d33da417c7b2abdbcaca Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 22:38:54 +0300 Subject: [PATCH 06/25] update doc --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 135ea29..9ce8968 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ This setting is application scoped and changing the setting requires restarting ## Specifying Style Sheets -Remote and local style sheets with optional glob patterns can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all configured languages within that workspace folder. +Remote and local style sheets with optional glob patterns 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. Glob patterns for local style sheets can have the following syntax: @@ -42,13 +42,13 @@ Glob patterns for local style sheets can have the following syntax: | `*` | zero or more characters in a path segment | | `?` | one character in a path segment | | `**` | any number of path segments, including none | -| `{}` | group conditions like `**​/*.{ts,js}` | +| `{}` | group conditions like `**​/*.{css,scss}` | | `[]` | declare a range of characters like `[0-9]` | | `[!]` | negate a range of characters like `[!0-9]` | ## Examples -Configuration depends on your layout of the project. The following most basic settings will suggest from all your css files in your project's `src` folder: +Configuration depends on your layout of the project. The following most basic settings will suggest from all your `css` files in your project's `src` folder: **`.vscode/settings.json`** @@ -84,15 +84,15 @@ and if you are using Bootstrap CDN with additional plain `css`: ### Lit -First `typescript` or `javascript` should be enabled in global settings depending on your needs: +First `typescript` or `javascript` should be enabled in global settings depending on your usage: ```json { - "css.enabledLanguages": ["typescript"] + "css.enabledLanguages": ["html", "typescript"] } ``` -Your in file styles will be available for completion for that file. If you need to use some base styles everywhere you can specify as follows: +Your in file styles will be available for completion for that file. If you need to use some base styles everywhere in your project, you can specify as follows: ```json { @@ -104,7 +104,7 @@ Your in file styles will be available for completion for that file. If you need ### Validate class selectors -Validates all `class` selectors in the active editor. Auto validation can also be configured in settings. +Validates all `class` selectors in the active editor. Auto validation can also be configured in extension settings globally or per workspace. ### Clear style sheets cache From 9fdb49bc5cd005e030d6f57c03ed88ac0bea4438 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 30 Jan 2024 23:16:04 +0300 Subject: [PATCH 07/25] update doc --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 9ce8968..950cb87 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,10 @@ Your in file styles will be available for completion for that file. If you need } ``` +## Go to Definition + +Go to definition for `id` and `class` selectors for local style sheets are supported. Selecting `Go to Definition` from context menu, pressing `F12` or `⌘ click` on a selector will open the local style sheet which the selector is defined. + ## Commands ### Validate class selectors From 16e8619a7361fda6321b7190a111985df62b15de Mon Sep 17 00:00:00 2001 From: ecmel Date: Wed, 31 Jan 2024 00:32:28 +0300 Subject: [PATCH 08/25] update doc --- README.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 950cb87..93bb47a 100644 --- a/README.md +++ b/README.md @@ -37,18 +37,17 @@ Remote and local style sheets with optional glob patterns can be specified in VS Glob patterns for local style sheets can have the following syntax: -| Pattern | Matches | -| ------- | ------------------------------------------- | -| `*` | zero or more characters in a path segment | -| `?` | one character in a path segment | -| `**` | any number of path segments, including none | -| `{}` | group conditions like `**​/*.{css,scss}` | -| `[]` | declare a range of characters like `[0-9]` | -| `[!]` | negate a range of characters like `[!0-9]` | +| Pattern | Matches | +| ------- | ----------------------------------------------------- | +| `*` | zero or more characters in a path segment | +| `?` | one character in a path segment | +| `**` | any number of path segments, including none | +| `{}` | group conditions like `**​/*.{css,scss}` | +| `[]` | a range of characters like `[0-9]` or negate `[!0-9]` | ## Examples -Configuration depends on your layout of the project. The following most basic settings will suggest from all your `css` files in your project's `src` folder: +Configuration depends on your layout of the project. The following most basic setting will suggest from all your `css` files in your project's `src` folder: **`.vscode/settings.json`** @@ -58,7 +57,7 @@ Configuration depends on your layout of the project. The following most basic se } ``` -### Bootstrap +### [Bootstrap](https://getbootstrap.com/) If you are using Bootstrap `npm` module with additional `scss` this can be a starting point: @@ -82,9 +81,9 @@ and if you are using Bootstrap CDN with additional plain `css`: } ``` -### Lit +### [Lit](https://lit.dev/) -First `typescript` or `javascript` should be enabled in global settings depending on your usage: +First `typescript` or `javascript` should be enabled in global settings depending on your usage and VS Code should be restarted: ```json { @@ -92,7 +91,7 @@ First `typescript` or `javascript` should be enabled in global settings dependin } ``` -Your in file styles will be available for completion for that file. If you need to use some base styles everywhere in your project, you can specify as follows: +Your in file [static styles](https://lit.dev/docs/components/styles/) will be available for completion for that file. If you need to use some base styles everywhere in your project, you can specify as follows: ```json { From 75585976b9f86eecebeb2681edd3f98871874235 Mon Sep 17 00:00:00 2001 From: ecmel Date: Wed, 31 Jan 2024 00:38:22 +0300 Subject: [PATCH 09/25] update doc --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 93bb47a..9c149e8 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ HTML `id` and `class` attribute completion for Visual Studio Code. ## Features - HTML `id` and `class` attribute completion -- Supports completion from in file styles +- Supports completion from in file defined styles - Supports specifying remote and local style sheets - Supports any language for completion - Supports go to definition for selectors @@ -70,7 +70,7 @@ If you are using Bootstrap `npm` module with additional `scss` this can be a sta } ``` -and if you are using Bootstrap CDN with additional plain `css`: +or if you are using Bootstrap CDN with additional plain `css`: ```json { @@ -91,7 +91,7 @@ First `typescript` or `javascript` should be enabled in global settings dependin } ``` -Your in file [static styles](https://lit.dev/docs/components/styles/) will be available for completion for that file. If you need to use some base styles everywhere in your project, you can specify as follows: +Component'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: ```json { @@ -107,7 +107,7 @@ Go to definition for `id` and `class` selectors for local style sheets are suppo ### Validate class selectors -Validates all `class` selectors in the active editor. Auto validation can also be configured in extension settings globally or per workspace. +Validates all `class` selectors in the active editor. Auto validation can be configured in extension settings globally or per workspace. ### Clear style sheets cache From 46d33aace19e731b818f38bcdf3326d127c91e59 Mon Sep 17 00:00:00 2001 From: ecmel Date: Thu, 1 Feb 2024 00:40:58 +0300 Subject: [PATCH 10/25] release --- README.md | 38 +++++++++++++++++++++++++++----------- package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 9c149e8..41dc37e 100644 --- a/README.md +++ b/README.md @@ -13,13 +13,9 @@ HTML `id` and `class` attribute completion for Visual Studio Code. - Supports go to definition for selectors - Validates class attributes on demand -## Usage - -You can view a list of `id` and `class` attribute suggestions in configured languages. - ## Supported Languages -Supported languages can be configured with the `css.enabledLanguages` setting. By default `html` is enabled: +Supported languages can be configured with the `css.enabledLanguages` global setting. By default `html` is enabled: ```json { @@ -27,7 +23,7 @@ Supported languages can be configured with the `css.enabledLanguages` setting. B } ``` -Extension can be configured to support any language where it makes sense such as `nunjucks`, `twig`, `mustache`, `typescript` etc. You should also install corresponding language extension which registers the language id in VS Code. +Extension 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. This setting is application scoped and changing the setting requires restarting VS Code. @@ -47,7 +43,7 @@ Glob patterns for local style sheets can have the following syntax: ## Examples -Configuration depends on your layout of the project. The following most basic setting will suggest from all your `css` files in your project's `src` folder: +Configuration depends on your layout of the project. The following most basic setting will suggest from all `css` files in project's `src` folder: **`.vscode/settings.json`** @@ -59,7 +55,9 @@ Configuration depends on your layout of the project. The following most basic se ### [Bootstrap](https://getbootstrap.com/) -If you are using Bootstrap `npm` module with additional `scss` this can be a starting point: +If Bootstrap `npm` module is used with additional `scss` the following can be a starting point: + +**`.vscode/settings.json`** ```json { @@ -70,7 +68,9 @@ If you are using Bootstrap `npm` module with additional `scss` this can be a sta } ``` -or if you are using Bootstrap CDN with additional plain `css`: +or in case of Bootstrap CDN with additional plain `css`: + +**`.vscode/settings.json`** ```json { @@ -81,9 +81,11 @@ or if you are using Bootstrap CDN with additional plain `css`: } ``` +All of Bootstrap's class selectors with additional user defined styles in the project will be available for completion in `html` files. + ### [Lit](https://lit.dev/) -First `typescript` or `javascript` should be enabled in global settings depending on your usage and VS Code should be restarted: +Enable `typescript` or `javascript` in global settings depending on your usage and restart VS Code: ```json { @@ -93,15 +95,29 @@ First `typescript` or `javascript` should be enabled in global settings dependin Component'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: +**`.vscode/settings.json`** + ```json { "css.styleSheets": ["src/base-styles.ts"] } ``` +### [Vue](https://vuejs.org/) + +Install your favorite Vue language extension from [Marketplace](https://marketplace.visualstudio.com/search?term=tag%3Avue&target=VSCode&category=All%20categories&sortBy=Relevance) which registers `vue` language id then enable `vue` in global settings and restart VS Code: + +```json +{ + "css.enabledLanguages": ["html", "vue"] +} +``` + +Styles defined in component's `` section will be available for completion in component's `