If you’re working on a large HTML project such as your WordPress website/blog, it’s always helpful to use the best code editor, where you can quickly make changes and organize code. If you’re unfamiliar with VS Code, I’ll briefly explain this tool and how it works.
VS Code
- VS Code is a cross-platform and open-source editor developed by Microsoft.
- It has many features to help you develop code more efficiently, including:
- Syntax highlighting and on-the-fly code completion, which can be customized by adding custom colours or syntaxes (e.g., JSDoc)
- IntelliSense support for JavaScript, TypeScript and CoffeeScript; HTML tags are auto-completed when you write in them (if they’re valid)
You can search for tools in the marketplace by typing their name. In this case, you would type “HTML class suggestions”, and press enters or click on it to open it up in your VS Code IDE. It’s a free extension to help you find classes in your HTML file.
Install it and reload VS Code after installation and open your HTML file
To install VS Code, go to the Windows marketplace and search for “VSCode”.
Once you’ve installed it, reload VS Code after installation and open your HTML file in a new tab or window of VS Code!
vscode productivity tips
To quickly open a command, click on the Quick Open button in your extensions menu. On Windows and MacOS, press ctrl-P (cmd-P) to find the command you want.
Here’s what each command does:
- Cmd + P opens Quick Open
- Ctrl + P opens a new pane with all your current projects opened at once
A picker will show up with all the classes in your workspace that you can select from to insert.
You can also use the command to insert a class and its file name. This is useful when you want to add an existing class but don’t know its full name of it (for example, if someone else has created the course and given it an incorrect name). If you type “vscode” followed by “+c”, then VS Code will open a window with all of your project’s classes listed in alphabetical order. To insert one of them into your current file, press Enter on that selection—you’ll see something like this:
If you are working on a large PHP or CSS file or a WordPress theme, don’t forget this tool that can save time.
If you are working on large web projects, don’t forget this tool that can save time. It is a great way to find classes in your workspace, and it’s also useful when you want to see any other element (like div or span) in your code.