Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrmlnc/vscode-jade-snippets
Jade Snippets for Visual Studio Code.
https://github.com/mrmlnc/vscode-jade-snippets
jade pug visual-studio-code vscode vscode-extension
Last synced: 2 months ago
JSON representation
Jade Snippets for Visual Studio Code.
- Host: GitHub
- URL: https://github.com/mrmlnc/vscode-jade-snippets
- Owner: mrmlnc
- License: mit
- Created: 2016-03-06T11:27:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-28T19:53:13.000Z (over 7 years ago)
- Last Synced: 2024-09-27T08:42:29.606Z (3 months ago)
- Topics: jade, pug, visual-studio-code, vscode, vscode-extension
- Homepage: https://goo.gl/MQEbu3
- Size: 10.7 KB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Jade (now Pug) Snippets for Visual Studio Code
> Provides a base set of snippets for Jade (now Pug).
## Install
* Press `F1` and select `Extensions: Install Extensions`.
* Search for and select `jade snippets`.
See the [extension installation guide](https://code.visualstudio.com/docs/editor/extension-gallery) for details.
## Supported languages
* Pug
* Jade
## Snippets
### Elements
```jade
// a|
a(href="#", title="title").class $0
// figure|
figure
img(src="source", alt="alt").class
figcaption $0
```
Snippet for `img` deleted in *1.0.0* version. Emmet works fine with Pug (ex. Jade). See [CheatSheet](http://docs.emmet.io/cheat-sheet/).
### Attributes
```jade
// Attributes for styling and controlling
class| → class=""$0
id| → id=""$0
// Common attributes
data| → data-*=""$0
aria| → aria-*=""$0
role| → role=""$0
// Attributes for form settings
method| → method=""$0
action| → action=""$0
// Attributes for form elements
type| → type=""$0
name| → name=""$0
placeholder| → placeholder=""$0
value| → value=""$0
```
### Scripts
```jade
//script|
script(src="file.js")
$0
// script:inline|
script.
$1
$0
// script:include|
script
include ./file.js
$0
```
### Styles
```jade
// link|
link(href="file.css", rel="stylesheet")
$0
// style|
style.
$1
$0
// style:include|
style
include ./file.css
$0
```
### Syntax
```jade
// var|
- var name = $0
// block|
block name
$1
$0
// case|
case variable
when condition
code
default
code
$0
// each|
each val in []
$1
$0
// while|
while condition
$1
$0
// extends|
extends ./file.jade
$0
// include|
include ./file.jade
$0
// mixin|
mixin name(vars)
$1
$0
// mixin:call|
```jade
+name(attrs)(attrs)
$0
```
## Changelog
See the [Releases section of our GitHub project](https://github.com/mrmlnc/vscode-jade-snippets/releases) for changelogs for each release version.
## License
This software is released under the terms of the MIT license.