A Custom Properties Snippet Builder for VS Code | by Massimo Cassandro | May, 2022

Methods to write a bit node script to generate a VSCode snippet with all of your venture css custom-properties

Photograph by Pankaj Patel on Unsplash

For a very long time now, I’ve been utilizing CSS custom properties increasingly more extensively, and when engaged on many bigger tasks it turns into tough to recollect all of them.

I exploit VSCode for coding and there are some Intellisense plugins that may be very helpful, however typically, for some causes, they don’t work as I anticipate.

To unravel this downside, I made a decision to create a small script that may extract an inventory of CSS properties from my information, after which generate a VSCode snippet fully mechanically.

It’s a fairly uncooked resolution, nevertheless it does the job. I hope it is going to be helpful for somebody.

The script relies on Node, so step one is to install it should you’ve by no means completed this earlier than.

Then, open in VSCode a venture folder, create a package.json file should you want, and ensure it incorporates at the very least a css file (take a look at.css within the instance beneath).

At this level, you need to create your venture snippet file. You may have two methods to do that:

  1. manually create a .vscode folder and a .code-snippets file containing solely empty braces (in my case, I named it my-proj.code-snippets).
  2. Comply with the directions on the VSCode Snippet Help page.
VSCode File explorer
Our venture information in VSCode File Explorer

Now, you need to add the snippet code (besides the half we are going to generate later):


"My-proj {custom} properties":
"scope": "scss,css",
"prefix": [
"var",
"--prefix"
],
"physique": [],
"description": "{custom} properties listing - NB it is a script-generated snippet"

The snippet keyname (My-proj {custom} properties") can be used to replace it, should you change it, you will have to replace the script as nicely.

The physique factor can be up to date by the script, you’ll be able to customise the remainder of the snippet as you want.

When you need assistance to construct the snippet, this Generator may enable you

Our script must carry out these actions:

  • Learn the content material of some css information
  • seek for {custom} properties strings and extract them
  • take away duplicates and type
  • replace the snippet file

I first tried parsing the css information to carry out a extra correct extraction, however this enormously elevated the complexity of the script. Ultimately, a easy processing of the CSS string appeared to me greater than sufficient for the meant objective.

Begin creating an index.mjs (or the title you like) file in your venture. Since we can be utilizing ES6 modules syntax, the .mjs extension is required till you add to your package deal.json a top-level discipline sort with a price of module (see ECMAScript Modules within the Node documentation).

Copy the next code in your file:

First, we import the Node File system module (fs), we’ll use it for learn the css information and to put in writing the up to date snippet file.

Then you must set some constants:

const sources = [
'./test.css'
],
snippet_file = './.vscode/my-proj.code-snippets',
snippet_key = 'My-proj {custom} properties',
custom_var_prefix = 'prefix-';

let custom_properties = [];

  • sources is the array of the css information to parse, paths are relative to the venture root
  • snippet_file: the snippet file path
  • snippet_key: the keyname of the snippet to replace
  • custom_var_prefix: an non-compulsory prefix shared by all {custom} properties names. Some framework (e.g. Bootstrap) use it to keep away from conflicts. Set it to an empty string ('') should you don’t want it.

Furhermore the custom_properties array is initialized.

At this level, each css file is opened, a easy common expression searchs for all of the {custom} properties strings and all matches are added to the custom_properties array, (observe that RegExp additionally searches for {custom} properties values: it’s an addition for any future enhancements, however they aren’t used right now).

Our custom_properties array can now be processed:

custom_properties = custom_properties.map(merchandise => merchandise.break up(':')[0].trim());
custom_properties.type();
custom_properties = [...new Set(custom_properties)];
let vscode_snippet_body = `var(--$custom_var_prefix$` +
custom_properties.scale back((consequence,merchandise) => `$consequence,$merchandise`)
.replaceAll(`--$custom_var_prefix`, '') + ')$0';
  • the map operate is used to take away the worth portion
  • the ensuing array is sorted and duplicates are eliminated utilizing Set
  • The snippet physique discipline content material is generated as a Choice string utilizing the scale back operate.

Now we will open the snippet file (utilizing fs, once more) and the JSON is parsed.

Really, VSCode Snippets paperwork should not JSON information, however JSON-C (JSON with feedback). Because of this if there are any feedback, an error can be thrown whereas processing the file. You need to manually take away all feedback from the file or implement a comment-saving parser, akin to comment-json

To complete the job, we simply have to replace the physique discipline and save the snippet file.

Observe that some other snippets within the file won’t be modified.

More Posts