This project is a VS Code Extension that makes transferring classes from HTML to CSS much easier with specific commands to auto transfer or check correct names.
Used ChatGPT for debugging extension not activating
I made a VSCode Extension called CSS to HTML Class Finder to make transferring HTML classes to CSS files easier. It has 3 commands to transfer classes in selected text, automatically suggest classes in CSS files, and automatically transfer files to a CSS file when saving HTML files.
I found it quite hard to understand the VSCode API documentation as it gave the functionality of certain functions and commands, but mostly lacked examples. I was able to get around this by seeking out others’ examples of extensions online to find out how to specifically use the certain functions. It was helpful that I am already fairly familiar with JS as well as Regex so that basic functionality like working with arrays was made easier.
I am pretty proud of how I was able to work with the multiple files at the same time, transferring the text pulled using regex from one file, into another. I think there is some room for further improvements and features I could add in the future, but overall I’m pretty happy with the project! Hope you enjoy!
I added a third command to automatically insert classes from HTML files into a selected CSS file. I made it so that when the HTML file is saved it checks for new classes and adds them into the CSS file. These are the 3 commands I wanted to add to this extension, so I will now figure out adding it to the VS Code marketplace before shipping.
Log in to leave a comment
I was able to add a command that automatically adds the current classes in the selected HTML file to the completion list. This works well, but I still need to make it so that it automatically updates with the changes when the selected HTML file is saved. I’m not yet sure how to do this as I have tried to research it and it seems confusing but I will continue to research it.
Log in to leave a comment
I was able to reformat the selected classes into a string to insert into the selected stylesheet. I then entered the CSS file at the end and inserted the text at the end of the file with all the classes.
Log in to leave a comment
I was able to take the selected text from the file and search for the classes within it. I then returned those classes in an array, without repeating any of the classes. I did this using a regex string looping through the selected text to get all the instances. Next I will get those classes and format them to CSS syntax and have to figure out how to paste them into the bottom of the selected CSS file.
(NOTE: the photo is seemingly of the code but that is because it shows the console log of the returned classes (which is the output))
Log in to leave a comment
I added a new command which will eventually transfer classes within selected text in an HTML file, to the selected CSS file. So far I made it so that when the command is run, it opens a quick pick selector that displays all the CSS files in the current workspace. Next I will have to figure out how to:
Log in to leave a comment
I ran the npm commands to create a new VS Code Extension with JS. A lot of tutorials are in TS but I am much more familiar with JS and figure it should be easy enough to work out how to do it with JS. It gave me a prebuilt template with an example command showing the ‘Hello World’ message, which was a start in how to create commands. I next want to figure out how to manipulate and read files with my commands.
Log in to leave a comment