Auto-Completion Issues Affecting Website Development in Sublime Text

[joejain]

Hello Sublime Text Community,

I am currently experiencing a persistent and highly disruptive issue with Sublime Text that affects my workflow while developing my website. The core problem is that syntax highlighting and auto-completion behave inconsistently for the web files I am editing, particularly for complex HTML, CSS, and JavaScript combinations. While working on my website’s dynamic content, certain tags, attributes, and embedded scripts are intermittently not recognized by Sublime Text, causing highlighting to break and making it difficult to visually parse the code. This is especially problematic on pages with deeply nested HTML elements, multiple inline scripts, or mixed templating languages, as the editor occasionally treats valid code as erroneous or completely ignores certain constructs.

The issue becomes particularly noticeable when switching between files or editing multiple tabs. For example, I may be working on a main template file containing embedded JavaScript and CSS, and Sublime Text fails to apply correct syntax highlighting to a section of the file, while the rest of the page is highlighted correctly. In other cases, the auto-completion suggestions for attributes, class names, or functions either disappear entirely or provide irrelevant options. This inconsistent behavior significantly slows down development, as I cannot rely on the editor to provide visual cues or accurate completions for my code, increasing the likelihood of syntax errors or overlooked mistakes.

Another complicating factor is the use of custom snippets and packages. I have installed popular Sublime Text packages to support web development, including Emmet, HTML-CSS-JS Prettify, and custom language syntax extensions. While these packages generally work, I notice that the editor occasionally fails to recognize which syntax rules apply, particularly in files that combine HTML with embedded templating logic, like Liquid or Django templates. Snippets that should expand correctly sometimes fail, or the inserted code loses formatting, requiring manual adjustments. This makes the integration of third-party packages unpredictable and adds friction to the development process.

The problem is further exacerbated when working on large files. Pages with hundreds of lines of code, multiple scripts, and extensive CSS definitions often trigger delays in syntax parsing and auto-completion. The editor may lag or freeze briefly when typing, and highlighting may flicker or reset, breaking the visual context needed for editing. While Sublime Text is generally lightweight and performant, these issues seem related to the interaction between the syntax engine, the installed packages, and the specific structure of my web files. Even reducing the number of active packages does not fully resolve the problem, indicating that the core syntax parsing engine may struggle with certain complex patterns.

Additionally, multi-file projects present their own challenges. Sublime Text’s project-wide search and auto-completion sometimes fail to reference symbols or class names defined in other files within the same website project. For example, CSS class names defined in a separate stylesheet are occasionally not suggested when editing HTML templates, and JavaScript functions declared in one file may not appear in auto-completion for another. This inconsistency breaks the intended workflow for cross-file development and requires frequent manual verification of definitions, increasing the risk of errors and reducing productivity.

I am seeking guidance from the Sublime Text community on best practices to stabilize syntax highlighting and auto-completion for complex web projects. Specifically, I would appreciate advice on configuring Sublime Text and packages to reliably handle embedded scripts, templating logic, and multi-file project references. Recommendations on optimized settings, syntax definitions, or workflow improvements that can reduce lag, preserve highlighting, and ensure accurate auto-completion would be extremely valuable. My ultimate goal is to have Sublime Text function as a fully reliable editor for my website development, providing consistent visual feedback and code assistance without intermittent failures or performance degradation. Sorry for long post!

[deathaxe]

First of all, valuable support can only be provided, if dedicated examples with broken code situations are available. You are welcome to open issues in e.g. Liquid repository with proper examples of broken code.

Syntax Highlighting

Mixing complex syntax definitions such as HTML, CSS, JS, … into each other is in general a rather challanging task, especially the way it is required for some templating languages.

A static syntax engine, without language specific evaluation capabilities, however has to make some trade-offs. Templating engines certainly support various weird constructs, which can’t be implemented by static syntax definitions. They focus on supporting commonly known expressions. Again, it requires examples to help out or possibly optimize syntaxes further.

Initial loading delays, when opening files of complex templating languages for the very first time may be normal, as syntax needs to be loaded or even compiled first.

But I haven’t realized noticible lags when editing, especially not in tiny files of a couple hundred lines of code. Things may sometimes become wonky in files of 20k+ lines, but not below - when using up-to-date syntaxes.

Please note that template syntaxes such as Liquid, Twig, Jinja2, … heavily rely on ST’s built-in syntax definitions. Some 3rd-party packages such as CSS3 override or even disable core syntaxes, but provide incompatible implementation, which is known to cause all sorts of trouble. Some of them even use TextMate grammer, which heavily rely on lookbehinds, triggering older and slower syntax engine features.

So the only general advice at this point is to not use those 10-20 years old lagacy packages.

With regards to “Django”: This is one of those legacy syntaxes, too, designed for limited capabilities of Sublime Text 2 and 3. The way it mixes in CSS and JS is likely to cause syntax highlighing issues. It worked all well back when it was created, but syntax definitions have evolved and got too complex for the way some of those old template syntaxes are implemented.

My recommendation: use Jinja2 package, instead.

Completions

If you need sophisticated context sensitive completions, use LSP and related language servers.

ST’s built-in completions and snippets engine restricts them only by selectors (combination of scope names). Most packages eighter define too simple selectors and/or many languages don’t or even can’t provide detailed enough scope names, to enable fully context sensitive completions.

ST as a general purpose editor, not targetting certain lanuages, does not know much about code structure or any languages details. It just works on tokens. Hence it also can’t provide reliable and semantically correct goto definition or cross-file completions.

Advices

More specific support would require more information - is it only Django and Liquid we are talking about? Which packages are installed. Any example projects or code snippets available to reproduce possible issues?