Cognitive Complexity Bar
Shows the cognitive complexity of the active file in the VS Code status bar:
$(pulse) CC 14 ▰▰▰▰▱
- Green: below the warning threshold (default 10)
- Yellow: from the warning threshold up to the error threshold
- Red: at or above the error threshold (default 20)
The bar fills up as the score approaches the error threshold. Hover it for the
most complex functions; click it to list every function by score and jump to one.
Line markers
Each function gets a stripe colored by its own score, and every line that adds
complexity shows its increment:
12 ▌ function load(items) {
13 ▌+1 for (const item of items) {
14 ▌+2 if (item.ready) {
15 ▌ run(item);
Hover the keyword or operator that caused an increment to see why, for example
if: +1, +2 nesting.
Choose where they are drawn with cognitiveComplexity.lineMarkers.style:
inline (default): between the line numbers and the code. The code moves about
four characters to the right, so indent guides and rulers look slightly off.gutter: as icons in the margin left of the line numbers, which breakpoints also use.
The code doesn't move.
Turn them on or off with Cognitive Complexity: Toggle Line Markers.
How the score is computed
It follows the SonarSource cognitive complexity rules:
| Construct |
Cost |
if, loops, switch, catch, ternary |
+1, plus 1 per level of nesting |
else, else if, elif |
+1 |
goto |
+1 |
Sequence of && / \|\| / and / or |
+1 each time the operator changes, even when the sequence spans several lines |
| Nested function or lambda |
increases nesting of its body |
Nesting of lambdas and callbacks counts towards the outermost function, as in the original definition.
Works with any file
The analysis is text based, so it doesn't need a language server:
- Comments and string contents are removed, using the syntax of the language.
- Nesting comes from indentation, which works the same for brace (
{}), keyword (end, fi) and whitespace (Python) languages.
- Keywords come from a language profile.
Dedicated profiles: JavaScript, TypeScript (and JSX/TSX), Java, Groovy, C, C++, Objective-C, C#,
Dart, Go, Swift, Kotlin, Scala, Rust, PHP, Python, Ruby, Shell, Perl, Lua, Elixir, R and SQL.
Files that embed code are split into fragments, and each fragment is painted separately:
| File type |
What is analyzed |
| Markdown |
Each fenced code block, in the language of its tag (```python, ```bash...). Untagged blocks use the generic profile; prose is ignored. |
| Dockerfile |
Each RUN instruction as shell, including \ continuations and <<EOF heredocs. |
| Vue, Svelte, HTML |
The <script> blocks. |
| CSS, SCSS, Sass, Less |
Each top-level rule is a fragment. Nested rules cost +1 plus nesting, like a nested if. @media, @supports, @container, @if, @each, @for and @while count as conditions and loops, @else as a branch, and Less when guards +1. |
Any other language (YAML, Makefile, Terraform, Tcl...) uses a generic profile that combines the
common keywords, so for example GitHub Actions if: conditions count.
Only formats with no control flow at all (plain text, JSON, TOML, INI, XML, CSV, logs...) always score 0.
Known limitations
Because it's a heuristic rather than a parser:
- Code must be reasonably indented (formatted code always is).
- Labelled
break/continue and recursion are not counted.
- Function detection covers common declaration styles; code outside any detected function is reported as top level code.
Settings
| Setting |
Default |
Description |
cognitiveComplexity.scope |
function |
function: color by the most complex function. file: color by the whole file total (raise the thresholds if you use it). |
cognitiveComplexity.warningThreshold |
10 |
Yellow from this score. |
cognitiveComplexity.errorThreshold |
20 |
Red from this score. |
cognitiveComplexity.lineMarkers.enabled |
true |
Show the per-function stripe and per-line increments in the editor. |
cognitiveComplexity.lineMarkers.style |
inline |
inline: before the code. gutter: icons left of the line numbers. |
cognitiveComplexity.highlightBackground |
true |
Also use the status bar warning/error background for yellow and red. |
cognitiveComplexity.debounceMs |
300 |
Delay after typing before recalculating. |
The three text colors are theme colors (cognitiveComplexity.lowForeground, mediumForeground,
highForeground) and can be changed with workbench.colorCustomizations.
Commands
- Cognitive Complexity: Show Functions – list functions sorted by score and jump to one.
- Cognitive Complexity: Toggle Line Markers – show or hide the markers in the editor.
- Cognitive Complexity: Refresh – recalculate the active file.
Development
npm install
npm test # compile and run the analyzer unit tests
npm run package # build cognitive-complexity-bar-<version>.vsix
code --install-extension cognitive-complexity-bar-0.3.0.vsix
Press F5 in VS Code to open an Extension Development Host with the extension loaded.
