HTML Snippets not working in .php files #27

axdyng · 2017-02-16T04:48:09Z

Hello,

Great extension. However, the snippets aren't working correctly in .php files. I'd have to create a html file -> trigger the snippet inside .html file -> then will it work in .php files.

Once i restart VSCode, i need to repeat this.

Please address?

Thank you!

htran81 · 2017-02-20T08:59:44Z

Nice one, I looking for this. Please support php file.

mcquiggd · 2017-02-24T17:01:04Z

Seems to have been removed in the last update, 14 days ago, when languages were removed from the package.json.

A previous commit that had added the support for languages, including PHP, can be viewed here :
b6f9bb6

I have tried re-adding these, but it does not seem to work properly, only works consistently in HTML.

I am specifically looking for javascriptreact and typescriptreact support... if I do re-add the languages, it will only display syntax completion for a top level tag in the .jsx or .tsx files, not within a render method.

The author, @abusaidm, must have his reasons for doing this, but it would be wonderful if he could either revert back to language support, or perhaps explain how we can choose which languages the snippets will apply to, without remapping file extensions to the html document type, which loses all syntax completion / support for that language, as obviously it is now treated as simple HTML.

abusaidm · 2017-02-25T21:06:18Z

hello all, sorry for the late reply.

I have indeed removed the other languages, as other users have complained about the extension getting in the way while they program in other languages like php and js which makes sense. I was actually thinking that I should make a full extension that can be customised and add other features.

Since VSCode has cleaned its act and started to handle extensions better than before, I think it is reasonable for individuals to customise individual extensions to meet their needs.

Add a new language support to the extension:

VSC Documentation
Side Loading
VS Code looks for extensions under your extensions folder .vscode/extensions. Depending on your platform it is located in the following folders:

Windows %USERPROFILE%\.vscode\extensions
Mac ~/.vscode/extensions
Linux ~/.vscode/extensions

Go to the extensions folder matching your OS
Find the extension abusaidm.html-snippets-x.x.x
Find package.json inside the extension's directory and open it with any text editor, e.g. VSC
Locate the sections with snippets and you will see:

{
     "language": "html",
     "path": "./snippets/snippets.json"
}

Add the below snippet with another language you want.

,{
     "language": "NEW LANGUAGE",
     "path": "./snippets/snippets.json"
}

Close VSCode and start it again, I have noticed a reload doesn't always work as intended, now the extension should work with the languages you added.

Example of languages:
php
javascript
javascriptreact

I hope you find this helpful.

mcquiggd · 2017-02-28T16:57:29Z

@abusaidm

Thanks for the clear instructions... I have tried this, but as I mention above, it seems to only work reliably in html files.

For example,in an html file, it is possible to create a body tag from a snippet, then a select box, option etc, correctly nested within each other.

< body >
< select >
< option > < / option >
< /select >
< /body >

In javascript, javascriptreact, typescript, typescriptreact, it is only possible to create a one level of a tag using a snippet; once that is created, no further snippets are listed. You can create other tags, at the same level, but you won't get snippets available inside them, as you do with html.

< body > < /body >
< select > < /select >
< option > < /option >

Update: I see the same behaviour with other snippet extensions - for example React snippets are not displayed when within a < tag >, but are displayed anywhere else in the file if not contained in a < tag >, so perhaps this is a limitation of the language services for those languages?

I will log an issue with the Vs Code team.

AmitJoki · 2017-10-16T03:49:35Z

A simple fix for this would be to go to the snippet's directory under

Windows %USERPROFILE%\.vscode\extensions
Mac ~/.vscode/extensions
Linux ~/.vscode/extensions

And locate snippets.json , copy its contents and paste it under user defined snippets for your required language. Worked like a charm for me.

Mohammed-Elias · 2018-01-11T10:24:52Z

    ,{
            "language": "javascript",
            "path": "./snippets/snippets.json"
    },{
            "language": "js",
            "path": "./snippets/snippets.json"
    },{
            "language": "javascriptreact",
            "path": "./snippets/snippets.json"
    }

(I have added them both combined and each one alone), and nothing happened when I press tab after div tag

Any idea how to fix it ?

leo1mml · 2018-02-04T22:19:06Z

having the same problem

mikeymurph77 · 2018-02-22T02:21:03Z

To @AmitJoki solution, you may need to remove the scope "scope": "text.html" from each snippet if you're working in the (languageId).json file, but a mass selection will take care of that for you.

Jakobud · 2018-03-30T05:47:33Z

Why don't you just create a custom setting for your extension for this, similar to the built-in emmet:

"emmet.includeLanguages": {
        "php": "html",
        "hbs": "html"
},

Seems kind of weird that someone would need to go in and hack your installed snippet files when you could just use an extension setting value instead.

Jwiens92 · 2018-04-09T18:11:28Z

@Jakobud that worked perfect for me thank you very much.
for those looking for react or javascript Jakes answer worked for me like this

"emmet.includeLanguages": {
        "javascriptreact": "html",
        "javascript": "html"
    }

tommylux · 2018-05-15T13:31:19Z

I'm having same issue, Where do you put this code?

"emmet.includeLanguages": {
        "php": "html",
        "hbs": "html"
},

Thanks

Tom

Jwiens92 · 2018-05-15T13:34:15Z

@tommylux it goes in you User Settings (settings.json)

tommylux · 2018-05-15T14:42:33Z

Thanks.. figured it out. Was a little unsure of the syntax.

{
    "workbench.colorTheme": "Default Light+",
    "git.ignoreMissingGitWarning": true,
    "php.executablePath": "C:\\Program Files\\Microsoft VS Code\\php\\php.exe",
    "editor.minimap.enabled": false,
    "emmet.includeLanguages": {
        "php": "html",
    }
}

Still new to this editor, Think I will ditch the atom.io.

coeur85 · 2018-12-27T10:25:26Z

any idea how to add it to razor files : *.cshtml ?

excme · 2019-01-17T10:38:30Z

any idea how to add it to razor files : *.cshtml ?

Up!

kelmag · 2019-04-18T15:54:03Z

Thank you I finally got to make it work!

AyeMyintHtet · 2019-07-20T06:08:08Z

I want to know about '.ejs extension'?

h-taj · 2020-01-30T15:31:25Z

i want work in cshtml file
iusing
"contributes": {
"snippets": [
{ "language": "html",
"path": "./snippets/snippets.json"
},
{ "language": "cshtml",
"path": "./snippets/snippets.json"
}

	]
},

but not work in cshtml file?
please help

baiterry · 2020-02-02T16:43:31Z

Any idea how to support markdown files?

sined79 · 2020-03-19T15:41:26Z

What about Twig files ?
I just try this, but there are no effect on twig files.
Thank you ! ;)
"contributes": { "snippets": [ { "language": "html", "path": "./snippets/snippets.json" }, { "language": "twig", "path": "./snippets/snippets.json" } ] },

dmitrach · 2020-06-18T05:53:35Z

What about Twig files ?
I just try this, but there are no effect on twig files.
Thank you ! ;)
"contributes": { "snippets": [ { "language": "html", "path": "./snippets/snippets.json" }, { "language": "twig", "path": "./snippets/snippets.json" } ] },

@sined79
Use this in your settings:
"emmet.includeLanguages": {
"twig": "html",
}

Open your Settings (ctrl + ,)
Find "emmet.includeLanguages"
Add this config to your settings
It works!

mrcMesen · 2020-12-03T22:21:49Z

What about Twig files ?
I just try this, but there are no effect on twig files.
Thank you ! ;)
"contributes": { "snippets": [ { "language": "html", "path": "./snippets/snippets.json" }, { "language": "twig", "path": "./snippets/snippets.json" } ] },

@sined79
Use this in your settings:
"emmet.includeLanguages": {
"twig": "html",
}
1. Open your Settings (ctrl + ,)
   ![Снимок экрана от 2020-06-18 08-52-34](https://user-images.githubusercontent.com/19969187/84983315-2467e280-b141-11ea-951a-e76900325f11.png)

2. Find "emmet.includeLanguages"
   ![Снимок экрана от 2020-06-18 08-50-11](https://user-images.githubusercontent.com/19969187/84983226-fa162500-b140-11ea-8ec2-26db332f3886.png)

3. Add this config to your settings
   ![Снимок экрана от 2020-06-18 08-50-51](https://user-images.githubusercontent.com/19969187/84983247-013d3300-b141-11ea-839a-2ca6514b03cd.png)

4. It works!

That works for me

BinMansoor11 · 2020-12-11T06:41:35Z

@Jakobud that worked perfect for me thank you very much.
for those looking for react or javascript Jakes answer worked for me like this
"emmet.includeLanguages": {
        "javascriptreact": "html",
        "javascript": "html"
    }
``

Thanks buddy, It worked for me.

J-pilon · 2022-06-02T19:11:18Z

@Jakobud I added "erb": "html" to emmet's included languages and that worked perfectly. Thanks!

MohdTamimi1 · 2023-03-13T20:57:47Z

Go to settings
Search emmet
Remove php from Emmet: Exclude Languages

Oluwatemmy · 2023-09-18T07:39:57Z

HTML Snippets not working in .html files.
This is what I'm getting:
This extension is deprecated as it is no longer being maintained.

This was referenced Feb 25, 2017

Syntax Highlighting in JS & PHP files is Removed when Adding those File Associations #26

Open

add .jsx and .tsx support #29

Open

danielbankhead mentioned this issue May 31, 2017

Add Handlebars support #38

Closed

This was referenced Nov 16, 2022

Nice one, I looking for this. Please support php file. jangiann09/jangiann09#4

Open

Seems to have been removed in the last update, 14 days ago, when languages were removed from the package.json. jangiann09/jangiann09#5

Open

YanDeLeon mentioned this issue Nov 18, 2022

Shortcuts of html, css and javascrip are not working within a Plush File wawandco/visho#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML Snippets not working in .php files #27

HTML Snippets not working in .php files #27

axdyng commented Feb 16, 2017

htran81 commented Feb 20, 2017 •

edited

Loading

mcquiggd commented Feb 24, 2017 •

edited

Loading

abusaidm commented Feb 25, 2017 •

edited

Loading

mcquiggd commented Feb 28, 2017 •

edited

Loading

AmitJoki commented Oct 16, 2017

Mohammed-Elias commented Jan 11, 2018 •

edited

Loading

leo1mml commented Feb 4, 2018

mikeymurph77 commented Feb 22, 2018 •

edited

Loading

Jakobud commented Mar 30, 2018

Jwiens92 commented Apr 9, 2018 •

edited

Loading

tommylux commented May 15, 2018 •

edited

Loading

Jwiens92 commented May 15, 2018

tommylux commented May 15, 2018 •

edited

Loading

coeur85 commented Dec 27, 2018

excme commented Jan 17, 2019

kelmag commented Apr 18, 2019

AyeMyintHtet commented Jul 20, 2019

h-taj commented Jan 30, 2020

baiterry commented Feb 2, 2020

sined79 commented Mar 19, 2020

dmitrach commented Jun 18, 2020

mrcMesen commented Dec 3, 2020

BinMansoor11 commented Dec 11, 2020 •

edited

Loading

J-pilon commented Jun 2, 2022

MohdTamimi1 commented Mar 13, 2023

Oluwatemmy commented Sep 18, 2023

HTML Snippets not working in .php files #27

HTML Snippets not working in .php files #27

Comments

axdyng commented Feb 16, 2017

htran81 commented Feb 20, 2017 • edited Loading

mcquiggd commented Feb 24, 2017 • edited Loading

abusaidm commented Feb 25, 2017 • edited Loading

Add a new language support to the extension:

mcquiggd commented Feb 28, 2017 • edited Loading

AmitJoki commented Oct 16, 2017

Mohammed-Elias commented Jan 11, 2018 • edited Loading

leo1mml commented Feb 4, 2018

mikeymurph77 commented Feb 22, 2018 • edited Loading

Jakobud commented Mar 30, 2018

Jwiens92 commented Apr 9, 2018 • edited Loading

tommylux commented May 15, 2018 • edited Loading

Jwiens92 commented May 15, 2018

tommylux commented May 15, 2018 • edited Loading

coeur85 commented Dec 27, 2018

excme commented Jan 17, 2019

kelmag commented Apr 18, 2019

AyeMyintHtet commented Jul 20, 2019

h-taj commented Jan 30, 2020

baiterry commented Feb 2, 2020

sined79 commented Mar 19, 2020

dmitrach commented Jun 18, 2020

mrcMesen commented Dec 3, 2020

BinMansoor11 commented Dec 11, 2020 • edited Loading

J-pilon commented Jun 2, 2022

MohdTamimi1 commented Mar 13, 2023

Oluwatemmy commented Sep 18, 2023

htran81 commented Feb 20, 2017 •

edited

Loading

mcquiggd commented Feb 24, 2017 •

edited

Loading

abusaidm commented Feb 25, 2017 •

edited

Loading

mcquiggd commented Feb 28, 2017 •

edited

Loading

Mohammed-Elias commented Jan 11, 2018 •

edited

Loading

mikeymurph77 commented Feb 22, 2018 •

edited

Loading

Jwiens92 commented Apr 9, 2018 •

edited

Loading

tommylux commented May 15, 2018 •

edited

Loading

tommylux commented May 15, 2018 •

edited

Loading

BinMansoor11 commented Dec 11, 2020 •

edited

Loading