August 21, 2024

How to fix CSS class name completion not working for php files

By :

I’m a big fan of IntelliSense for CSS class names extension for VScode, as it makes auto-completing CSS in VS Code a breeze, whether I’m working with HTML or PHP. However, a few days ago, the auto-completion feature stopped working, and despite my efforts to find a solution, I couldn’t locate any fixes. So, I decided to tinker with some settings in VS Code, and voilà!

IntelliSense for CSS class names extension download page

To start, try manually triggering IntelliSense.

Manually Trigger IntelliSense

In some cases, IntelliSense might not automatically trigger. You can manually trigger it by pressing Ctrl + Space while in a PHP file to see if the suggestions appear.

If this works for you, give the following steps a try. If it doesn’t, don’t worry—we’ll explore other solutions later in the article.

Enable Automatic Triggering for PHP Files

All the code snippets provided below should be added to the settings.json file in VS Code.

Ensure that IntelliSense is set to trigger automatically in PHP files. You can explicitly define this in your settings by adding

"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
},
"editor.suggestOnTriggerCharacters": true,
"editor.wordBasedSuggestions": true

These settings ensure that suggestions are automatically shown as you type, not just when you press Ctrl + Space.

Check for editor.suggestOnTriggerCharacters

Make sure that editor.suggestOnTriggerCharacters is enabled, as this controls whether suggestions appear automatically when typing characters like . or :.

"editor.suggestOnTriggerCharacters": true

Increase IntelliSense Responsiveness

You can adjust the delay time for IntelliSense to pop up automatically. Although there isn’t a direct setting for this in VS Code, you can ensure that other performance settings are optimized by lowering the editor.quickSuggestionsDelay (in milliseconds):

"editor.quickSuggestionsDelay": 10

Reconfigure Specific Language Settings

Assuming your settings already include PHP in "html-css-class-completion.HTMLLanguages", which is great. To reinforce this, ensure that the PHP-specific language settings are correct.

"[php]": {
    "editor.quickSuggestions": true,
    "editor.suggestOnTriggerCharacters": true
}

If none of these fixes work for you, you can try the following options one by one.

1. Reset VS Code’s Cache

  • Sometimes, VS Code’s cache might cause unexpected behavior. Clearing the cache can help:
    • Close VS Code.
    • Navigate to your user directory:
      • Windows: C:\Users\YourUsername\AppData\Roaming\Code\
      • macOS: ~/Library/Application Support/Code/
      • Linux: ~/.config/Code/
    • Rename or delete the User folder to reset all settings.

2. Test with a Minimal Configuration

  • Try running VS Code with a minimal configuration:
    • Disable all extensions except for IntelliSense for CSS class names in HTML.
    • Check if the automatic suggestion works as expected.
    • Gradually enable other extensions to see if a conflict exists

3. Check the Extension’s Settings

  • Ensure that the extension you’re using for CSS class name completion (e.g., IntelliSense for CSS class names in HTML) is properly configured.
  • Go to the extension’s settings in VS Code and verify that it is enabled for PHP files.

4. Add Language Support for PHP

Some IntelliSense extensions work better when the file types are explicitly configured. You can add PHP to the list of supported languages by going to Settings > Extensions > IntelliSense for CSS class names in HTML and adding PHP (.php) to the file associations.

Alternatively, you can add this directly in your settings.json

"html-css-class-completion.fileExtensions": [
  "html",
  "php"
]

5. Ensure Proper Language Mode

Make sure that the file is in the correct language mode (PHP) in VS Code. Sometimes, the editor might not recognize the file as PHP, which can cause IntelliSense to stop working.

6. Check for Conflicting Extensions

Even though you mentioned disabling other extensions, it’s possible that a lingering conflict exists. Ensure that no other extensions related to IntelliSense, CSS, or PHP are interfering.

7. Update VS Code and Extensions

Ensure that both VS Code and the IntelliSense extension are up to date. Sometimes, updates can resolve unexpected bugs.

8. Use Workspace Settings

If the issue persists in a particular project, try using workspace-specific settings. In the .vscode/settings.json file of your project, you can specify settings that are applied only to that workspace.

9. Check PHP Syntax

Ensure there are no syntax errors in your PHP files, as they can sometimes prevent IntelliSense from functioning properly.

10. Try a Different Extension

If the issue persists, consider trying a different extension that offers similar functionality, like HTML CSS Support or PHP Intelephense, which may better support your needs.

Top
Contact Us