-
-
Notifications
You must be signed in to change notification settings - Fork 77
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
500 additions
and
1,201 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,130 +7,17 @@ HTML `id` and `class` attribute completion for Visual Studio Code. | |
## Features | ||
|
||
- HTML `id` and `class` attribute completion. | ||
- Supports linked and embedded style sheets. | ||
- Supports template inheritance. | ||
- Supports additional style sheets. | ||
- Supports other HTML like languages. | ||
- Supports specifying remote and local style sheets for completion. | ||
- Supports any language for completion. | ||
- Validates CSS selectors on demand. | ||
|
||
## Usage | ||
|
||
You can view a list of `id` and `class` attribute suggestions via `ctrl + space`. | ||
|
||
## Linked and Embedded Style Sheets | ||
|
||
Linked `[<link rel="stylesheet">]` and embedded `[<style></style>]` style sheets are used in completion for `id` and `class` attributes. Links support local and remote files. Absolute local file paths are relative to the workspace folder while others are relative to HTML file: | ||
|
||
**`index.html`** | ||
|
||
```html | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<!-- Remote style sheet --> | ||
<link | ||
rel="stylesheet" | ||
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
/> | ||
|
||
<!-- Local style sheet relative to workspace folder --> | ||
<link rel="stylesheet" href="/style.css" /> | ||
|
||
<!-- Local style sheet relative to this file --> | ||
<link rel="stylesheet" href="style.css" /> | ||
|
||
<!-- Embedded style sheet --> | ||
<style> | ||
#content { | ||
display: block; | ||
} | ||
.internal { | ||
display: block; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div class="container external internal" id="content"> | ||
<div class="row"> | ||
<div class="col">1 of 2</div> | ||
<div class="col">2 of 2</div> | ||
</div> | ||
</div> | ||
</body> | ||
</html> | ||
``` | ||
|
||
All local links point to the same file which is in the root of workspace folder: | ||
|
||
**`style.css`** | ||
|
||
```css | ||
.external { | ||
display: block; | ||
} | ||
``` | ||
|
||
## Template Inheritance | ||
|
||
Template inheritance is supported for the following tags: | ||
|
||
``` | ||
{% extends "base" %} | ||
@extends('base') | ||
{{< base }} | ||
{{> base }} | ||
``` | ||
|
||
Styles defined in `base.html` will also be available for completion in `home.html`: | ||
|
||
**`base.html`** | ||
|
||
```html | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<link | ||
rel="stylesheet" | ||
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
/> | ||
You can view a list of `id` and `class` attribute suggestions in configured languages. | ||
|
||
<style> | ||
#content { | ||
display: block; | ||
} | ||
## Specifying Style Sheets | ||
|
||
.internal { | ||
display: block; | ||
} | ||
</style> | ||
|
||
<title>{{ title }}</title> | ||
</head> | ||
|
||
<body> | ||
{% block content %}{% endblock %} | ||
</body> | ||
</html> | ||
``` | ||
|
||
**`home.html`** | ||
|
||
```html | ||
{% extends "base" %} {% block content %} | ||
<div id="content" class="container internal"> | ||
<h1>Home</h1> | ||
</div> | ||
{% endblock %} | ||
``` | ||
|
||
## Additional Style Sheets | ||
|
||
If it is not possible to specify local or remote styles in HTML or via template inheritance, they can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all HTML files within that workspace folder. | ||
Stylesheets 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 | ||
|
||
|
@@ -139,26 +26,13 @@ If it is not possible to specify local or remote styles in HTML or via template | |
```json | ||
{ | ||
"css.styleSheets": [ | ||
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", | ||
"/style.css", | ||
"style.css", | ||
"${fileBasenameNoExtension}.css" | ||
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", | ||
"src/**/*.scss", | ||
"dist/style.css" | ||
] | ||
} | ||
``` | ||
|
||
All relative paths will be evaluated relative to the file being edited. `${fileBasenameNoExtension}` will be replaced with the file name of the file being edited without extension. | ||
|
||
Absolute paths can include glob patterns: | ||
|
||
```json | ||
{ | ||
"css.styleSheets": ["/dist/*.css"] | ||
} | ||
``` | ||
|
||
Note that absolute paths are still relative to the workspace folder. | ||
|
||
## Supported Languages | ||
|
||
Supported languages can be configured with the `css.enabledLanguages` setting. By default `html` is enabled: | ||
|
@@ -169,7 +43,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`, 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`, `typescript` etc. You should also install corresponding language extension which registers the language id in VS Code. | ||
|
||
This setting is application scoped and changing the setting requires restarting VS Code. | ||
|
||
|
@@ -181,7 +55,7 @@ Validates all `id` and `class` attributes in the active editor. | |
|
||
### Clear Cache | ||
|
||
Clears file cache. | ||
Clears stylesheet cache. | ||
|
||
## Installation | ||
|
||
|
Oops, something went wrong.