{"id":22360853,"url":"https://github.com/nikolaimueller/vscode-wc-snippets","last_synced_at":"2025-03-26T14:29:55.293Z","repository":{"id":255763495,"uuid":"241648211","full_name":"nikolaimueller/vscode-wc-snippets","owner":"nikolaimueller","description":"Webcomponent v1 (custom element) snippets for Visualstudio Code","archived":false,"fork":false,"pushed_at":"2024-09-06T23:23:29.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T15:47:45.898Z","etag":null,"topics":["html5","snippets","visual-studio-code","vscode-wc-snippets","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/nikolaimueller.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2020-02-19T14:52:32.000Z","updated_at":"2024-09-06T23:23:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"a03088e9-340e-4273-bfdb-046dd6eec34d","html_url":"https://github.com/nikolaimueller/vscode-wc-snippets","commit_stats":null,"previous_names":["nikolaimueller/vscode-wc-snippets"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolaimueller%2Fvscode-wc-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolaimueller%2Fvscode-wc-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolaimueller%2Fvscode-wc-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolaimueller%2Fvscode-wc-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikolaimueller","download_url":"https://codeload.github.com/nikolaimueller/vscode-wc-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245670368,"owners_count":20653348,"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":["html5","snippets","visual-studio-code","vscode-wc-snippets","webcomponents"],"created_at":"2024-12-04T16:18:52.730Z","updated_at":"2025-03-26T14:29:55.273Z","avatar_url":"https://github.com/nikolaimueller.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vscode-wc-snippets\r\n\r\nWebcomponent v1 (custom element) snippets for Visual Studio Code.\r\n\r\n## Setup in VSCode\r\n\r\n__TODO:__ Publish snippet(s) as extension in the [Visual Studion Marketplace](https://marketplace.visualstudio.com/VSCode).\r\n\r\n### Workaround:\r\n\r\n__Add custom snippet(s) by hand to Visual Studio Code:__\r\n\r\n* There are 2x snippets (files) in this repository for you:\r\n    + ``./snippets/javascript.json``\r\n    + ``./snippets/css.json``\r\n    + Prepare to copy the __content__ of both snippets to the clipboard.\r\n        - You can achive this by cloning this repository via git to some local folder, and then open the snippet files in your editor/IDE...\r\n        - ...or, in GitHub, you can open the snippet files directly: Select the \\\u003cCode\\\u003e tab and click into the ``snippets`` folder, then click the respective snippet file and select the ``Raw`` button - now the raw content can easily be copied.\r\n* Open Visual Studio Code, repeat the following steps for each snippet:\r\n    + Open menu ``File/Preferences/User Snippets`` (de: ``Datei/Einstellungen/Benutzercodeausschnitte``)  you have three options now: \r\n        - Add to __Global__: Select ``New Global snippets file`` (de: ``Neue globale Codeausschnittsdatei``) then type or select ``javascript`` or ``css`` respectively.\r\n        - Add to __User__: Just type or select ``javascript`` or ``css`` respectively.\r\n        - Add to __Project__: Select ``New Snippets for '\u003cyour project folder\u003e'`` then type or select ``javascript`` or ``css`` respectively.\r\n    + A new editor tab appears for each snippet file ...\r\n    + ... copy the content from the snippet file, from this git repository, into the respective new editor tab.\r\n    + Finally save the new file. *(Hint: Remember the path of the file before you close the editor tabs!)*\r\n\r\n\u003e I partially copied the german Visual Studio Code UI text (de:), because the german translation leads me to some confusion - I hope this will help others too ``;-)``\r\n\r\n## Supplied Snippets\r\n\r\n| Prefix | Descriptiony | Path |\r\n| ---  | --- | --- |\r\n| cec  | \u003cb\u003ec\u003c/b\u003eustom \u003cb\u003ee\u003c/b\u003element \u003cb\u003ec\u003c/b\u003elass | ``./snippets/javascript.json`` |\r\n| ces  | \u003cb\u003ec\u003c/b\u003eustom \u003cb\u003ee\u003c/b\u003element \u003cb\u003es\u003c/b\u003etyle-sheet | ``./snippets/css.json`` |\r\n| ceci | \u003cb\u003ec\u003c/b\u003eustom \u003cb\u003ee\u003c/b\u003element \u003cb\u003ec\u003c/b\u003elass \u003cb\u003ei\u003c/b\u003enline | ``./snippets/javascript.json`` |\r\n\r\n1.) The ideas for the snippets __`cec`__ and __`ces`__ are this:  \r\nI like to separete css from js into different sourcecode files.\r\n\r\n* So there is a snippet ``cec`` for the ``.js`` file, generating the custom element and it's class along with a html-template and some dummy-content.  \r\n* The other snippet ``ces`` generates pseudo __css__ stuff, speciffic for custom elements and shadowDOM.\r\n* The generated class contains code to load the CSS file automatically.\r\n\r\n2.) The snippet __`ceci`__ is applicable for a __monolithic HTML__ file, where all components are kept inline in one `\u003cscript\u003e` block. In this case the __css file__ (mentioned above) becomes obsolete, thus styles are 'relocated' into the template string of the component.  \r\nFollowing the \"monolithic\" approach, one can build a HTML file, which can be started directly from the filesystem into the browser - without the need for a web-server.\r\n\r\n\u003e For good reasons, modern browsers deny do load further (css, js, ...) files if you loaded the origin HTML file from the filesystem directly (see: [Same-origin policy](https://developer.mozilla.org/de/docs/Web/Security/Same-origin_policy)).\r\n\r\n## Usage Example\r\n\r\n*Hint: Web components are a combination of web technologies - most of all `custom elements` and a `javascript class` which implements the custom element and turns it into a component. I use the words component, web component and custom element as synonymes here.*\r\n\r\n__Play the example__\r\n\r\n* Prerequisite: Install the snippets - follow the installation at [Setup in VSCode](#Setup-in-VSCode)\r\n* Clone this git repository to some local folder on your machine:  \r\n`git clone https://github.com/nikolaimueller/vscode-wc-snippets.git`\r\n* Navigate into the new folder:  \r\n`cd vscode-wc-snippets`\r\n* Open Visual Studio Code in the new folder: `code . \u0026`  *(that command works on Windows as well as on Linux! The `.` means: 'open in current working directory' and `\u0026` executes the process (code) independently/parellel from the command shell.)*\r\n* Now you need a \"ad hock\" webserver - *ps: I like [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)* - and start browsing the file `example\\DemoComponent.html`.\r\n* Open your browsers development tools and look into the console - you will see that, at this moment, there is no `example\\DummyComponent.js` file.\r\n* In Visual Studio Code create a new file named `example\\DemoComponent.js` - the new file opens in an new editor.\r\n* In the new editor type `cec` (snippet prefix) and press `Enter` - a lot of sorce code will be apear in the editor...\r\n* ...the cursor is placed \"some where\" inside that new code, just type the __tag name__ of your new custom element - for example `demo-component` - safe it, now the content of the new web component should be visible in the browser.\r\n* __Congratulations - that's your new `DemoComponent` implementation!__\r\n* But wait a moment, we are not ready - we need some `CSS` for the new component - create another file `example\\DemoComponent.css` and in the new editor type `ces`, then hit `Enter` key and safe the file.\r\n* __Bingo! Your component has a red border now - well done!__\r\n\r\n__Some ideas about naming conventions:__\r\n\r\n* It's common, best practice for long time now, to name the source code file which contains classes like the class name they contain. And class names allways starts with a upper-case letter (ie.: class `DomeComponent` --\u003e `DomeComponent.js`).\r\n* At least my component implementations need more than one file - as a result I create a subfolder for each component and put my `'*.js'`, `'*.css'`, `'*.md'`, etc. into that subfolder. And I like to repeat the class name of the component for the folder name too (a good alternative could be the component's tag name).\r\n* Syntactivally browsers demand to name custom elements all lower-case with at least one dash somewhere in the middle of the tag name.\r\n    + It's a good idea to let the custom element's name follow the class name, like so: \u0026lt;`demo-component`\u0026gt; ... `DemoComponent`\r\n    + For 3rd party components it's reasonable to start the name with a short prefix, a shorthand for the component library (ie.: `my-route-view` ... `MyRouteView`)\r\n    + while components local to the project could have a name ending with postfixed `Component` - like so: ``md-viewer-component`` ... ``MdViewerComponent``\r\n    + My habbit is to have a `components` subfolder below the project root-folder, and put all components for the actual project there.\r\n\r\n*These are just some ideas for naming and structuring source code - the details are not so important, but __having__ some __coding convention__ and to __follow it__ - that __is important!__*\r\n\r\n## Links\r\n\r\n* Visual Studio Code\r\n  + Visual Studio Code [Create your own snippet](https://code.visualstudio.com/docs/editor/userdefinedsnippets)\r\n  + Visual Studio Code [Snippet Guide](https://code.visualstudio.com/api/language-extensions/snippet-guide)\r\n  + Visual Studio Code [publishing extensions](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)\r\n  + Visual Studio Code [vsce](https://github.com/microsoft/vscode-vsce) Visual Studio Code Extension Manager\r\n  + Visual Studio Code [CLI](https://code.visualstudio.com/docs/editor/command-line)\r\n* Other's extensions/snippets for webcomponents/custom-elements:\r\n  + https://marketplace.visualstudio.com/items?itemName=bwielgosz.custom-elements-snippets\r\n  + https://marketplace.visualstudio.com/items?itemName=LuceStudio.web-component-snippets, https://github.com/LuceStudio/vscode_web_component_snippets/blob/master/package.json\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolaimueller%2Fvscode-wc-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikolaimueller%2Fvscode-wc-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolaimueller%2Fvscode-wc-snippets/lists"}