VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete)

Problem overview

Twig (.twig) is one of PHP template engines and essence to develop Symfony projects.

VS Code understands .php and .html but doesn’t .twig. Therefore, we can’t benefit from syntax highlighting and autocomplete of VS Code w…


This content originally appeared on DEV Community and was authored by Heddi Nabbisen

Problem overview

Image description

Twig (.twig) is one of PHP template engines and essence to develop Symfony projects.

VS Code understands .php and .html but doesn't .twig. Therefore, we can't benefit from syntax highlighting and autocomplete of VS Code when editing Twig template files. It's inconvenient 🤔

One way is to get some unofficial extension for Twig in their marketplace. Well, there is another and lighter way.

VS Code user settings

Open user settings and search with "assoc", and you will see "Files: Associations".

Image description

Click "Add Item". Then type "*.twig" for Item and "html" for "Value". Finally click "OK". That's it.

You will see syntax highlighting in .twig just like .html. Moreover, try to type some tag text, and you will see it helps with autocomplete 😃

Image description

Besides, you can't define multiple setting items to the same file extension. If you try to set *.twig to php, you will lose the previous association aka *.twig to html. (Well, just in my opinion, it may not be good to have massive scripts in twig.)


This content originally appeared on DEV Community and was authored by Heddi Nabbisen


Print Share Comment Cite Upload Translate Updates
APA

Heddi Nabbisen | Sciencx (2022-07-23T07:54:32+00:00) VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete). Retrieved from https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/

MLA
" » VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete)." Heddi Nabbisen | Sciencx - Saturday July 23, 2022, https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/
HARVARD
Heddi Nabbisen | Sciencx Saturday July 23, 2022 » VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete)., viewed ,<https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/>
VANCOUVER
Heddi Nabbisen | Sciencx - » VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/
CHICAGO
" » VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete)." Heddi Nabbisen | Sciencx - Accessed . https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/
IEEE
" » VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete)." Heddi Nabbisen | Sciencx [Online]. Available: https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/. [Accessed: ]
rf:citation
» VS Code: Associate custom file extension to the known (for syntax highlight and autocomplete) | Heddi Nabbisen | Sciencx | https://www.scien.cx/2022/07/23/vs-code-associate-custom-file-extension-to-the-known-for-syntax-highlight-and-autocomplete/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.