NGINX Log Highlighter README

A VS Code extension to add syntax highlighting to your NGINX access.log files.

The expected format is:

remote_addr - remote_user [time_local] "request_verb request_endpoint request_result" status body_bytes_sent "http_referer" "http_user_agent" "http_x_forwarded_for"

Where the three http* elements after body_bytes_sent are optional.

How do I use this?

Open an NGINX access.log file in VS Code, or paste a few log lines in an empty tab.
In the Command Palette, select Change Langauge Mode, then NGINX Log. You can also change the syntax in the lower-right menu.
That's it! If you want to change some colors, see below.

Example

Here's an example NGINX log output line, which can also be used to test your color scheme:

192.168.42.24 - - [31/Oct/2017:20:19:18 +0000] "GET /foo/request/index.php?bar=baz HTTP/1.1" 200 33441 "http://example.com/referer" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36" "-"

Default colors

Using a default scheme, you'll see some color variation, e.g.:

IDLE

Solarized-dark

Custom colors

The syntax of a log line is parsed into multiple scopes. Using the example line above, here are the assigned scopes (all prefixed with text.nginx meta.nginx.log):

Built-In Scope	Custom Scope	Log piece
keyword	remote_addr	192.168.42.24
comment	spacer	-
text	remote_user	-
string	time_local	[31/Oct/2017:20:19:18 +0000]
constant	request_type	GET
support.function	request	/foo/request/index.php?bar=baz
keyword.operator	request_result	HTTP/1.1
keyword.other	status	200
entity.other.attribute-name	body_bytes_sent	33441
entity.name.tag	http_referer	http://example.com/referer
constant.numeric	http_user_agent	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36
string	http_x_forwarded_for	-

The built-in scopes don't necessarily correspond to the log piece type; they're simply different scopes that most robust themes include a different color for, and will help make your log statements stand out without adding custom theme definitions.

If you do want to style each piece yourself, add a style definition for each scope to your user settings file inside editor.tokenColorCustomizations, like this:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "remote_addr",
            "settings": {
                "foreground": "#FF0000"
            }
        },
        {
            "scope": "time_local",
            "settings": {
                "foreground": "#FF00d0"
            }
        }  
    ]
}

TO-DO

Add support for other log formats (or a custom format)
Add theme file and/or example color scheme definitions