wayou / vscode-todo-highlight

a vscode extension to highlighting todos, fixmes, and any annotations...

VSCODE-TODO-HIGHLIGHT

Highlight TODO, FIXME and other annotations within your code.

Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.

Hope this extension helps you as well.

NOTICE

Many report that the List highlighted annotations command is not working, make sure you have the file types included via todohighlight.include.

Preview

• with material night color theme:

• with material night eighties color theme:

Config

TODO:,FIXME: are built-in keywords. You can override the look by customizing the setting.

To customize the keywords and other stuff, command + , (Windows / Linux: File -> Preferences -> User Settings) open the vscode file settings.json.

	type	default	description
todohighlight.isEnable	boolean	true	Toggle the highlight, default is true.
todohighlight.isCaseSensitive	boolean	true	Whether the keywords are case sensitive or not.
todohighlight.keywords	array	N/A	An array of keywords that will be hilighted. You can also specify the style for each keywords here. See example below for more infomation.
todohighlight.keywordsPattern	string	N/A	Specify keywords via RegExp instead of todohighlight.keywords one by one. NOTE that if this presents, todohighlight.keywords will be ignored. And REMEMBER to escapse the back slash if there's any in your regexp (using \ instead of signle back slash).
todohighlight.defaultStyle	object	N/A	Specify the default style for custom keywords, if not specified, build in default style will be applied. See all available properties on VSCode doc DecorationRenderOptions section
todohighlight.include	array	[ "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss" ]	Glob patterns that defines the files to search for. Only include files you need, DO NOT USE {**/*.*} for both permormance and avoiding binary files reason. For backwards compatability, a string combine all the patterns is also valid "{**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.html,**/*.php,**/*.css,**/*.scss}"
todohighlight.exclude	array	[ "**/node_modules/**", "**/dist/**", "**/bower_components/**", "**/build/**", "**/.vscode/**", "**/.github/**", "**/_output/**", "**/*.min.*", "**/*.map" ]	Glob pattern that defines files and folders to exclude while listing annotations. For backwards compatability, a string combine all the patterns is also valid "{**/node_modules/**,**/bower_components/**,**/dist/**,**/build/**,**/.vscode/**,**/_output/**,**/*.min.*,**/*.map}"
todohighlight.maxFilesForSearch	number	5120	Max files for searching, mostly you don't need to configure this.
todohighlight.toggleURI	boolean	false	If the file path within the output channel not clickable, set this to true to toggle the path patten between <path>#<line> and <path>:<line>:<column>.

an example of customizing configuration:

{
    "todohighlight.isEnable": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.keywords": [
        "DEBUG:",
        "REVIEW:",
        {
            "text": "NOTE:",
            "color": "#ff0000",
            "backgroundColor": "yellow",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "#000",
            "isWholeLine": false,
        },
        {
            "text": "TODO:",
            "color": "red",
            "border": "1px solid red",
            "borderRadius": "2px", //NOTE: using borderRadius along with `border` or you will see nothing change
            "backgroundColor": "rgba(0,0,0,.2)",
            //other styling properties goes here ... 
        }
    ],
    "todohighlight.keywordsPattern": "TODO:|FIXME:|\\(([^)]+)\\)", //highlight `TODO:`,`FIXME:` or content between parentheses
    "todohighlight.defaultStyle": {
        "color": "red",
        "backgroundColor": "#ffab00",
        "overviewRulerColor": "#ffab00",
        "cursor": "pointer",
        "border": "1px solid #eee",
        "borderRadius": "2px",
        "isWholeLine": true,
        //other styling properties goes here ... 
    },
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss"
    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**"
    ],
    "todohighlight.maxFilesForSearch": 5120,
    "todohighlight.toggleURI": false
}

Commands

This extension contributes the following commands to the Command palette.

• Toggle highlight : turn on/off the highlight
• List highlighted annotations : list annotations and reveal from corresponding file

Known issue

The clickable file pattern within the output channel differs from OS platform(<path>#<line> for Mac/Windows and <path>:<line>:<column> for Linux, for details see this issue ).

Basically the extension auto detects the OS platform.

If you find that the file path is not clickable, set todohighlight.toggleURI to true to toggle the file pattern.

vscode-todo-highlight's Issues

Feature requests

Thank you for adding this wonderful extension. Absolutely loved it.

I would like add some feature requests:

1. Explore all todos (can be by custom keyword that is predefined or all keywords) in a file.
2. Todo counter
   

Feature: Add Auto update

At the moment, it seems that when you add or remove a TODO:, the list doesn't automatically updates and the List hilighted annotations command to refresh the list.

Would be nice if there's an option to enable auto-update on file save.

Status bar says "resut(s)" instead of "result(s)"

So minor, but see below:

Text Bold ? is possible ?

Hi friend, is it possible to put the text bold in style???
//normal|bold|bolder|lighter|number|initial|inherit|900|600|400

customise with a bold (font-weight) property ?

hi friend.
am new on VBC.
is possible to add bold (font-weight) ?
what is the syntaxe ?
thanks
EX:

        {  
            "text": " NOTE:", 
            "color": "black", 
            "backgroundColor": "white",
            "font-weight": "bold"
        }

special characters /* $system .

I do not know if these since an update, but the special character no longer works.
ex:
{ "text": "$system","color": "#b71e1e" },

command list-highlighted-annotations doesn't work

I have todos and fixmes in my code, and they are highlighted properly. But when I try and list them from the command pallette, it says none were found

List highlighted annotations returns nothing always

I get this when running the command :

Have no idea why it doesn't register them. Here is my settings.json file.

Thank you for any help.

FeatureRequest: Highlight entire line

Would be great to have possibility to have a setting (global and per keyword) to switch between highlighting keyword only(current behavior) and entire line.
It would make TODOs poke your eye even stronger and I got used to it from ReSharper in VS.

highlight multiple keyword with bracket ? [" ", " "]

Hi its possible to add bracket to set multiple highlight groupe ?
I have a lot of keyword to put up with some color.
Would be great if you can add this feature?

ex:
{ "text": [".quad:",".cubic:",".quart:",".quint:",".sine:",".exp:",".bounce:"], "color": "#000" }

Output panel provides no way to jump to the TODO

Windows 10
VS Code 1.9.1
TODO Highlight 0.4.1

When listing using the command to list the highlighted TODOs, the results appear in the output panel. However, there is no way to jump to the TODO line for the file it relates to.

Your GIF seems to show clickable links, however the paths that show on my system cannot be clicked.

wonderful! ... feature request: list annotations -> side panel

I use vscode-todo-highlight constantly - wonderful - thanks!

Is there any plan to have List Annotations display in a (split?) side panel rather than in the popup? I ask because I often have many of them and would like to navigate through them with some persistence not possible with the popup?

Something like Markdown>Open Preview to Side

Thanks!

Mark found items as warnings in Problems view

I'd like to see an option to mark found items as warnings in the Problems view (Ctrl+Shift+M) so items can quickly be navigated between via F8 and Shift+F8. The user should be able to toggle this on or off per keyword via configuration, and perhaps choose to make them errors or infos instead of warnings.

How to customize built-in colors?

The VSCode scope inspector is no help here. In my theme the default is too bright. How can I change the colors in my theme? Or in settings.json?

Not working search inside .vue files.

Not working search inside .vue files.
Screen: http://joxi.ru/4AkQejZTMKX3Xm?d=1

Multiple keywords per style

I have read #36 , where the solution is to use the keywordsPattern setting along with the defaultStyle setting. The issue is, I, and maybe others, separate annotations into groups that use different styles. For example, a warnings group in yellow, and an errors group in red. defaultStyle only allows for one group.

A potential solution I can see is to change todohighlight.keywords.text to take an array instead of a single string. For example:

Or, to maintain backwards compatibility, you could create a new but similar setting keywordGroups that takes an array of keywords.

I understand if this is too problematic to implement due to the existing configuration. For now I might just fork the repo and change it to fit my own needs.

Unwanted partial word highlight

In my settings I have

{
  "text": "BUG:",
  "color": "#E47D7D",
  "backgroundColor": "transparent"
}

But this will create partial highlights like DEBUG:

Would be nice if we could specify keywords with RegEx to be able to avoid this.

todohighlight.defaultStyle does not work

Hi Wayou,

Thanks for this addon,

Do you know what is going on, I cannot set custom style.
I tried both workspace and user settings then restarted vs, still no luck.

Thanks

window output channel should be cleared when search returns no results

window output channel should be cleared when search returns no results

Another keywords option

I want to add keywords like these: NOTE, OPTIMIZE, TODO, HACK, XXX, FIXME, and BUG

Feature Request: Highlight by RegExp

Awesome Extension!
I have a small request.

I’d like to match different keywords by one custom highlight rule (like matching "TODO:" and "TODO" together).

This would have two benefits:

• Less setup effort for the configuration, since currently you have to define a rule for each item. If they had the same rule, this wouldn’t be necessary.
• Simplification of match listing. Matches found for either of these keywords would show up in the same highlight search.

Example:
A hint/note that something in my code needs review is either marked with "DB" or "Look". One is addressed directly towards me, while the other one is for all members. Since I have to take a look at both, it would simplify things if they showed up together. Currently, I have to define separate rules for both keywords. When searching during the correction process, I have to do it twice.

Proposal for solution:

• Add an additional optional parameter for custom keywords: "regExp": string
• When present, only strings matching that RegExp will be highlighted ("text"-property has another meaning in that case)
• When listing highlights, it displays the "text"-property in the dropdown (which behaves like the name for this rule)
• Using RegExp even more complex matches would be possible. This means you could restrict it to comments only ("// *DB" would match "//DB" and "// DB") avoiding in-code matches.

Cannot open listed TODOs

Hi,
on Mac OS X I can't (again!) open any of the listed TODO's:

#1 file:///Users/Marcello/Documents/test/src/auth.js#66
TODO: you must retrieve all permissions for the logged user

#2 file:///Users/Marcello/Documents/test/auth.js#67
TODO: you must encrypt and store all permissions

The link is broken.
Regards,

Marcello

Auto Detect Platform and log File Path Accordingly

The extension is depending upon the config named "todohighlight.changeFilePattern" to log the file path according to platform so that the link is clickable.

This can be done automatically using the os.platform() method.

The exclude option is not working.

I am trying to exclude searching all the *.js files. I have the configuration setup like shown below. But still it is searching all the *.js files. Please advise.

Thanks
Adam

"TodoParser": {
"exclude": [
"cpp",
"c",
"**/*.js"
],

Support for TypeScript and Sass by default

As VSCode is the de facto TypeScript editor, I would expect TypeScript to be supported by default by this plugin. Also I would like to have Sass support as well ;-)

The include pattern is now:
"todohighlight.include": "{**/*.js,**/*.html,**/*.php,**/*.css}"

why not add TypeScript and add:
"todohighlight.include": "{/*.ts,/.js,**/.html,/*.php,/.scss,**/.css}"

Tnx!

List TODO not finding anything in GoLang and Code 1.14.2

List TODO lists no results when looking for "//TODO: Message" in Golang (might be true for other languages too) using Code 1.14.2 and TODO Highlight v 0.5.8.

This is true when using the icon at the bottom of the editor, or if using the command palette.

Highlights are working as expected.

Simplify files pattern in config

Current definitions are made by splitting with simple commas, like following:

{
 "todohighlight.include": "{**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.html,**/*.php,**/*.css,**/*.scss,**/*.py}"
}

Users may add big patterns that will lead in an unique and unreadable / non intuitive line.

I would suggest to split it in a list, like this:

{
 "todohighlight.include": [
   "**/*.js",
   "**/*.jsx",
   "**/*.ts",
   "**/*.tsx",
   "**/*.html",
   "**/*.php",
   "**/*.css",
    "**/*.scss",
    "**/*.py"
  ]
}

It is more readable and maintanable than just one-line strings, so it will scale better.

I think is more readable and maintanable, than only one string with comma delimitter for patterns.

Searching for keywords crashes VS Code

Using the search functionality crashes VS Code on my machine.
VS Code Version: 1.14.1
OS Version: Ubunutu 16.04 LTS x64

This might be related to #35, although for me it never completes because of the crash.

Select command:

Command executing:

VS Code crashes:

Styles List ?

first, thank alot for this update!
you are awsome !👍 🥇
# Change Log +## 0.5.3 - 2017-05-31 +- remove todohighlight.highlightWholeLinefrom configuration contributes, it's supported yet +- update doc, add reference to the official API for a full list of available styling properties, resolve #40
I noticed that you say, that have can add more other style.
However I do try someone, it does not seem to work.
`
{ "text": "myText",

"color": "#ffffff",
"backgroundColor": "rgba(0, 0, 0, 0.3)",
"borderRadius":"85px 85px 0px 0px",
"borderRadius":"85px",
"borderStyle": "solid",
"borderWidth": "5px",
"boxShadow": "10px 10px 5px #888888",
"fontWeight:" "bold",
},
`
,"borderRadius": are very nice look.!

I do not know if these styles can be taken?
Would you have a link to a list of available styles?
I do not find this list .

List todo not working?

Hi,

i have a folder with several .net core projects (extension .cs).
I put some todo here and there and tried the "list all todos" but nothing happens.

the status bar shows:

I am on MAC OS Sierra, with vscode insider 1.13.0

I tried adding the *.cs extension:

"todohighlight.include": "{**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.html,**/*.php,**/*.css,**/*.scss,**/*.cs}"

Huge resources hog while extension is pulling listings, enabled in general

I noticed that my VSC was acting up as of late and I couldn't put my finger on what could be the cause of that until I remembered that I started using TODO extension more frequently

and this is how VSC ran after I disabled extension on the workspace that I do things

Here's the config that I use

    "todohighlight.isEnable": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.defaultStyle": {
        "isWholeLine": "true",
        "color": "#eee"
    },
    "todohighlight.keywords": [
        {
            "text": "REMOVE:",
            "backgroundColor": "#E74C3C",
            "overviewRulerColor": "#E74C3C"
        },
        {
            "text": "BUG:",
            "backgroundColor": "#f9d0c4",
            "overviewRulerColor": "#f9d0c4",
            "color": "#332a28"
        },
        {
            "text": "DEPRECIATED:",
            "backgroundColor": "#2C3E50",
            "overviewRulerColor": "#2C3E50"
        },
        {
            "text": "DISABLED:",
            "backgroundColor": "grey",
            "overviewRulerColor": "grey"
        },
        {
            "text": "REVIEW:",
            "backgroundColor": "#3498DB",
            "overviewRulerColor": "#3498DB"
        },
        {
            "text": "REFACTOR:",
            "backgroundColor": "#3498DB",
            "overviewRulerColor": "#3498DB"
        },
        {
            "text": "IN PROGRESS:",
            "backgroundColor": "#01A2A6",
            "overviewRulerColor": "#01A2A6"
        }
    ]

If you need any other information let me know, I really like this extension and would like to continue using it if this issue gets resolved.

Showing both Windows and Mac path link can be too much.

Hello,

For each keyword found, the path link is shown twice, once for Mac and once for Windows. On larger projects with many TODOs etc, navigation of these keywords can be quite cumbersome.

Would it be possible to detect which operating system the user is running, and only show the one O/S's link? Or even just a parameter setting the user could set to define their platform?

Also, you may also want to change "Mac" to "Mac/Linux" or "Unix".

Thank you.

Can't get font color to customize?

Hi, here's my settings.json and the result.

Why isn't the text color grey?

where download the previous version ! urgent plz

I understand the purpose and orientation of the plugin.
However the last updates brings small problems that prevent me to correctly use the plugin, which why I use for.

How to go back to the previous version that worked correctly for my way of exploiting it.
Because my keywords no longer seem to be taken correctly.
I used it to highlight javascript specific function in comment.

Now the keyword with apostrophe, or with dots, are no longer highlight.
It is rather urgent at the moment, because I have a lot of dificult to find my lines of complex code.

Thank you very much to the author for his work, for the moment I will keep the previous version.

TODO view

It would be great to have a TODO view can be toggled to explore all the TODOs. And a couple of configuration settings to go along with it.

Something like a hideFromView setting, so all TODOs would show in the TODO view by default, but you can set certain ones to be hidden from there (perhaps because you only deal with those ones rarely, and then you would just do a global search through the code to find them, or change hideFromView temporarily).

And an ignore setting, to specify paths (e.g. "node_modules") and files (e.g. *.php) that shouldn't be included in the TODO view (all files would be included by default.

    "todohighlight.ignore": ["node_modules", ".vscode", "*.json", "*.php"],
    "todohighlight.keywords": [
        {  
            "text": "URGENT",
        },
        {  
            "text": "NOTURGENT",
            "hideFromView": true
        }
    ]

#7 suggested adding TODOs to the problems view but I don't think TODOs belong there. I see problems as something you want to solve short-term (such as before the next continuous integration build or deployment of your application), while TODOs are something longer-term. So it would be more useful for them to have their own dedicated view.

Customizable colors

Hi!

Thanks for writing this extension, this was a feature I really missed.
It would be cool though if you could make the colors customizable :).

Allow font weight to be specified

Suggested configuration:

{
    "text": "NOTE:",
    "fontWeight": "Bold"
}

Result:

// NOTE: bla bla

Highlight entire multi-line comments

Hopefully this'll be a simple feature to add. Sometimes when I writing notes or TODO's, I'll do them at the top of a file in a list-form multiline comment. I think it would be a nice feature to be able to highlight the entire comment from opening chars to closing chars.0

I understand this may hinder drawing the highlight shape around the text and solving a wrapping issue maybe, but it's a feature I would love to see, and it's definitely something no other todo extension appears to have looked into (Feel free to correct me if I'm wrong on that!).

I absolutely love this add-on, it lets me keep my code organized, whilst still having a nice aesthetic! My hope is that this idea may help make it even better!

old version plz

OMG .. where i can download the old version ???
Nothing seems to work now, i loose all my marker ?, Am lost, without my colors markers.
I must disable this automatic update with your plugin.

possible to add "border-radius": ? property ?

hi friend.
It would be great if you can add the property "border-radius": !

ex:
{ "text": "//mytext","color": "#ffe8e8", "backgroundColor": "rgba(0, 0, 0, 0.7)", "border-radius": "25px"},

I use a lot your plugin to embellish work, very used to find me visuellement, especially that i have more than 5000 line code !
However sometimes the style a little too square can attack the eye.
Being able to add some roundness would be really great.
These are a suggestion.

thank a lot friend

List Highlighted annotations not working for python .py file?

OS: Linux 64 bit Kubuntu 17.04
VSCode: 1.12.2
TODO Highlight: 0.5.0

It is correctly highlighted and listed by PyLint. But nothing happens when I want to the extension to list highlighted annotations. 😞

Let me know if you need any more information.

url endcoding under windows

Under Windows in list annotation the filepath looks someway strange.
It starts with:

file:///c%3A/asd/asd%20fgh/

Would be nicer and more windows style if it would look like this:

C:\asd\asd fgh

When language type is Go, List Highlighted Annotations doesn't work

Works fine (on OSX) when I'm writing JS/Babel, but as soon as I switch back to Go - List Highlighted Annotations no longer works.

From developer console:

[Extension Host] todohighlight err: Objectmessage: "no files"__proto__: Object
[Extension Host] todohighlight err: Objectmessage: "no files"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()
[Extension Host] todohighlight err: Object

Links in output channel does not work on MAC

In settings:

"todohighlight.toggleURI": true,

"File not found" upon link click.

Thank you for your efforts to fix #19. However, now upon clicking a link, VS Code cannot locate the file:

Unable to open 'test.c#1': File not found (/home/username/documents/test.c#1).

List highlighted annotations in current workspace

I found for myself some uncomfortable behavior.
Command "List highlighted annotations" will search all files in project and do:

1. List all founded annotations in "Output" window in bottom
2. Add total founded number in status bar

But more useful is after command "Save" search only in tabs that open right now. One of the solution is use "include" and "exclude" config parameters in project settings.
But more useful is search only in tabs that opened right now and after command "Save". For example this behavior is in linter for Python, that after save of file run linter of all opened tabs and marked numbers of error and warnings in status bar.

Color autocompletion?

Hello, is it possible to enable some form of autocompletion to help select a color identifier?

Background color is not removed when deleting keyword

I've written a FIXME statement and the extension automatically highlighted it. However, after deleting it, the background color is still pink. If I write anywhere else on the document, the text is fine, but if I start writing on the line where the FIXME was, even after completely deleting this line, the background will be pink.

.exclude docs probably not what you meant

In the examples for .exclude, there is this:

"todohighlight.exclude": "{**∕node_modules∕**,**∕bower_components∕**,**∕dist∕**,**/_output/**,**/*.min.*,**/*.map}"//A glob pattern that defines files and folders to exclude while listing annotations

Which (I believe) leads to the traversal of a zillion files in places like node_modules. I think you mean something more like this:

"todohighlight.exclude": "{node_modules,bower_components, ... }

The difference being the latter excludes the entire directory, but the docs' flavor excludes every file in the directory one-by-one (much slower).

I'm not 100% sure but when I made this change, my List Annotations sped up from about 30 seconds to about 1, so it seemed to make a difference for me.

Can I set this only effective in comments

I don't want UPLOAD_OPTIMIZE_SETTING variable be heightlight.

My setting:

I use OPTIMIZE rather than OPTIMIZE: because many old project use OPTIMIZE (no colon)