Code completion for css in a json file
Hi there!
I want to know if there is a way to activate codecompletion for css inside a file of a different format. I´m working on a project where all css and values are stored in a json file, and would like to have the benefit of css code completion while working on the json file. (I´m using Webstorm 2016.3)
Cheers,
Magnus
Please sign in to leave a comment.
If your json files are CSS files with .json extension, you can try assigning *.json pattern to CSS file type in Settings | Editor | File Types, Cascading Style Sheet. If not all your JSON files are stylesheets, you have to add explicit patterns instead, like 'my_stylesheet_name.json'
Hi Elena!
Thanks for the quick reply. That trick actually works, but introduces an annoying little side effect, and that is the the editor reports a lot of errors i.e at the commas between inner objects with properties and with some regular json nesting. Are there any way to turn of code inspection for a particular file?
Magnus
These are not inspections, errors come from CSS parser that doesn't expect to see JSON code in CSS. To only way to get rid of errors is turning error highlighting off for your file using Hector icon in the lower right corner: open file in editor, click the Hector icon and then move the slider to change the Highlighting level to None. See https://www.jetbrains.com/help/webstorm/2016.3/changing-highlighting-level-for-the-current-file.html. You will likely need to reopen the project to get the highlighting updated.
BTW, what does your code look like exactly? If it's not pure CSS, but CSS + JSON, you can probably try creating language injections instead of changing files associations
Well, my code is actually pure JSON, and the content is css wrapped in doublequotes like ".my-element" : { "margin" : "0 auto" }. You might ask why i choose that and it is for convenience when doing some dynamically generated and updatable templates. (The json with the css key-value pairs get processed to pure css with a few simple scripts). Main reason for my question regarding code completion is while writing the base styles for the templates to make sure i don´t misspell something... I tried turning off Hector and that made a lot of the red squiggly lines disappear, but some of them still remains, even though highlighting level set to "none". How do i create language injections by the way?
>I tried turning off Hector and that made a lot of the red squiggly lines disappear, but some of them still remains, even though highlighting level set to "none"
try invalidating caches (File | Invalidate caches, restart).
>How do i create language injections by the way?
https://www.jetbrains.com/help/webstorm/2016.3/using-language-injections.html
But your syntax is not a valid CSS, you you will still see errors if you try to inject it here...