sam/Quill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

323: Making VSCode snippets for templates

Browse Source
This commit is contained in:
metacryst
2023-09-02 14:54:01 -05:00
parent be710e127a
commit cb70af8832
6 changed files with 125 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
VSCode/package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "es6-string-html",
"version": "1.0",
"version": "1.0.1",
"lockfileVersion": 1
}
}

8
VSCode/package.json
View File

@@ -2,7 +2,7 @@
"name": "quill",
"displayName": "Quill",
"description": "HTML/CSS Syntax highlighting, best used with the Quill framework",
"version": "1.0.0",
"version": "1.0.1",
"publisher": "capturedsun",
"icon": "docs/Quill.png",
"engines": {
@@ -48,6 +48,12 @@
"category": "HTML"
}
],
"snippets": [
{
"language": "javascript",
"path": "./snippets.json"
}
],
"grammars": [
{
"injectTo": [

BIN
VSCode/quill-1.0.1.vsix Normal file
View File

Binary file not shown.

71
VSCode/snippets.json Normal file
View File

@@ -0,0 +1,71 @@
{
"html": {
"prefix": "html",
"body": [
"html(`$1`);"
],
"description": "Create a DOM node"
},
"dom": {
"prefix": "dom",
"body": [
"dom;"
],
"description": "Use the DOM collection of functions"
},
"*element": {
"prefix": "*element",
"body": [
"class Index extends HTMLElement {",
"",
" css = /*css*/ `",
" index-el {",
" ",
" }",
" `",
"",
" html = /*html*/ `",
" `",
"",
" constructor() {",
" super();",
" quill.addStyle(this.css);",
" this.innerHTML = this.html;",
" }",
"",
" connectedCallback() {",
" }",
"",
"}",
"",
"customElements.define('index-el', Index);",
"export default Index;"
],
"description": "Custom Element Template"
},
"*page": {
"prefix": "*page",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
" <head>",
" <title>Index</title>",
" <script type=\"module\">",
" import * as quill from './Quill/quill.js';",
" window.quill = {};",
" Object.entries(quill).forEach(([name, exported]) => window[name] = exported);",
" </script>",
" <script type=\"module\" src=\"index.js\"></script>",
" </head>",
" <body>",
"",
"",
" </body>",
"</html>"
],
"description": "Use the DOM collection of functions"
}
}