Janne252 / vscode-fontawesome-auto-complete

Auto-complete & preview Font Awesome icons in any language.
https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete
GNU General Public License v3.0
16 stars 2 forks source link

support different casing for insertion template #16

Closed VinSpee closed 3 years ago

VinSpee commented 4 years ago

Hi! Great extension.

I'm using it with the @fortawesome packages which are imported like this:

import { faChevronDown } from '@fortawesome/free-solid-svg-icons';

so I'd like to have a template insertion option to support this formatting. Is it doable?

Janne252 commented 4 years ago

Hey!

There appears to be multiple transforms. {style} renders as fab, fas, etc. Meaning that we'd need something like {styleName}, which renders as solid, brands, regular, etc. That fixes the import module path: https://fontawesome.com/how-to-use/javascript-api/setup/importing-icons#packages

The import name is a bit more complex. It seems that all parts of the icon name separated by - are joined and capitalized. Meaning that something like import {{prefix}{fullName:capitalized}} from '@fortawesome/free-{styleName}-svg-icons'; might be enough to support this. However this won't provide mouse-over documentation on the actual imported variable, .e.g. faChevronDown. Also the use of :capitalized (like a filter or a formatter) doesn't explicitly indicate ALL parts of the name are capitalized and not just the first character.

Have you got any ideas on how you'd prefer to express the following transformation in an insertion template?

VinSpee commented 4 years ago

i think the filter format you used as an example up there could work. I think plop does a good job with string transforms

camelCase: changeFormatToThis snakeCase: change_format_to_this dashCase/kebabCase: change-format-to-this dotCase: change.format.to.this pathCase: change/format/to/this properCase/pascalCase: ChangeFormatToThis lowerCase: change format to this sentenceCase: Change format to this, constantCase: CHANGE_FORMAT_TO_THIS titleCase: Change Format To This

I'd prefer

import {{prefix}}{{fullName:camelCase}} from '@fortawesome/free-{{styleName}}-svg-icons';

does that make sense?

Janne252 commented 3 years ago

Thanks for providing a comprehensive list of text transforms. That does indeed make sense.

Janne252 commented 3 years ago

@VinSpee Version 1.1.0 is now available. Formatters initially support camelCase, kebabCase , pascalCase, and snakeCase.

I've also started to collect 3rd party library insertion template snippets in the readme.

VinSpee commented 3 years ago

I just gave it a spin. Wonderful! Thanks so much, this is great.