create account

Writing my first code formatter by oyvindsabo

View this thread on: hive.blogpeakd.comecency.com
· @oyvindsabo ·
Writing my first code formatter
Now that we've entered 2019, I'm looking back at the past year, realizing that I have a lot of programming projects which I have yet to write about here on Steemit. On that note, I would like to share one of my latest projects, one i just recently finished.

![OyvindSabo 1036 commits.png](https://cdn.steemitimages.com/DQmUR75nQDE1FZcf1VGUzhYCX7AkNxzt6UMw2cUDYEo7RzM/OyvindSabo%201036%20commits.png)

I've been writing a lot of Gremlin code over the past few months, and despite the extensive Apache Tinkerpop documentation, there seems to be some mixed opinions about how to format the queries. In hopes of arriving at something which could be considered somewhat of a standard, I decided to spend a few days of this Christmas to write a Gremlin code formater.

Usually, when developing small widgets, I like to stick to a single HTML document containing all the JavaScript, HTML and CSS in a single file. I know this might not be the cleanest approach, but when it comes to open source software, I know that the chance of the code ever being used (or even tested) by someone else, quickly goes to zero if they are not able to easily run the code. Sticking to a single HTML file enables people to simply paste the code onto their website, or easily run the code locally opening it in a browser.

![Gremlint GitHub.png](https://cdn.steemitimages.com/DQmbDp5XYbZLUecTMaEvMHXJM5Z1bX3NHsNz1u7ewZvHnt9/Gremlint%20GitHub.png)

Having little experience with parsers (except from that time when we were encouraged to program the Oz programming language inside the Oz programming language...), I was a bit unsure about what approach to take. I considered taking a very functional approach, using multiple maps and filters, but in the end I realized that the formatting of each line depended very much on the previously formatted lines, so I decided to just parse the queries one character at a time, while simultaneously keeping a set of counters for unclosed parentesis, unclosed comments, unclosed strings, and so on.

The formatter would make sure to vertically align lines, properly indent nested method calls, add consistent quotes, and color code strings, parameters and comments.

![Gremlint Internet Explorer.png](https://cdn.steemitimages.com/DQmVpo6NW3UkDYviR2MoPra6NV7XdcqyVe5s6zTe1V1Z5U5/Gremlint%20Internet%20Explorer.png)

A complicating factor I initially underestimated was the fact that Gremlin queries can contain Groovy code. Groovy is very different from Gremlin when it comes to parsing. The structure of a Gremlin query is very simple, so for instance, all whitespaces which are not inside a String can be removed, and the query will still work as before. Realizing that writing a separate formatter for Groovy would be a huge endeavor, I decided to simply retain the formatting of the parts of the queries which consist of Groovy. After all, I was writing a Gremlin formatter.

![Gremlint Code.png](https://cdn.steemitimages.com/DQmZaCduD36QTQ6t4vNEqU4jNYJJD6uCEus2wasyyina3i7/Gremlint%20Code.png)

My iterative parsing approach scaled very quickly, and I suddenly found myself with a single function spanning 250 lines. Woops. But it works. For now.

Well, anyways, since I had made a linter/formatter for Gremlin, I decided to name it Gremlint. It's a pun.

![Gremlint logo 1920x360.png](https://cdn.steemitimages.com/DQmVTNMgZkxa2wxJVVLr4yihneNkB9amcYyoH4fVdXdZ3vm/Gremlint%20logo%201920x360.png)

It turns out that <a href="https://gremlint.com">gremlint.com</a> was available, so I bought it and put my freshly built formater online.

![Gremlint website.png](https://cdn.steemitimages.com/DQmbSwi17BBWhD2FzVG9AUzWjMBQHSCgVcAGvvwFxfh3DML/Gremlint%20website.png)

I had a lot of fun drawing small gremlin cartoons to fill the webpage.

![Gremlint Gremlin Cartoons.png](https://cdn.steemitimages.com/DQmQQ2FttBspvW2S1FGfcvpqDVbV38QedMhNVTkhuUvaYcC/Gremlint%20Gremlin%20Cartoons.png)

Now that I had a website, I might as well write a Gremlin style guide to give the impression that I have some kind of authority in the Gremlin community.

![Gremlin Style Guide.png](https://cdn.steemitimages.com/DQmYtstwWUf7ebYq9zJdAhxvfxvAs6bdDmeNGMNf8DTWWpZ/Gremlin%20Style%20Guide.png)

The style guide is still very much a work in progress, but it would be fun to be the author of the world's best Gremlin style guide. It's such a niche market that I think it is very much possible.

If you want to checkout the Gremlint GitHub repo, you can do so here: https://github.com/OyvindSabo/gremlint

If you want to checkout the Gremlin Style Guide Github repo, you can do so here: https://github.com/OyvindSabo/gremlin-style-guide
👍  , , , , , , , , , , , , , , , , ,
properties (23)
authoroyvindsabo
permlinkwriting-my-first-code-formatter
categoryprogramming
json_metadata{"tags":["programming","code","gremlin","dev","javascript"],"image":["https://cdn.steemitimages.com/DQmUR75nQDE1FZcf1VGUzhYCX7AkNxzt6UMw2cUDYEo7RzM/OyvindSabo%201036%20commits.png","https://cdn.steemitimages.com/DQmbDp5XYbZLUecTMaEvMHXJM5Z1bX3NHsNz1u7ewZvHnt9/Gremlint%20GitHub.png","https://cdn.steemitimages.com/DQmVpo6NW3UkDYviR2MoPra6NV7XdcqyVe5s6zTe1V1Z5U5/Gremlint%20Internet%20Explorer.png","https://cdn.steemitimages.com/DQmZaCduD36QTQ6t4vNEqU4jNYJJD6uCEus2wasyyina3i7/Gremlint%20Code.png","https://cdn.steemitimages.com/DQmVTNMgZkxa2wxJVVLr4yihneNkB9amcYyoH4fVdXdZ3vm/Gremlint%20logo%201920x360.png","https://cdn.steemitimages.com/DQmbSwi17BBWhD2FzVG9AUzWjMBQHSCgVcAGvvwFxfh3DML/Gremlint%20website.png","https://cdn.steemitimages.com/DQmQQ2FttBspvW2S1FGfcvpqDVbV38QedMhNVTkhuUvaYcC/Gremlint%20Gremlin%20Cartoons.png","https://cdn.steemitimages.com/DQmYtstwWUf7ebYq9zJdAhxvfxvAs6bdDmeNGMNf8DTWWpZ/Gremlin%20Style%20Guide.png"],"links":["https://gremlint.com","https://github.com/OyvindSabo/gremlint","https://github.com/OyvindSabo/gremlin-style-guide"],"app":"steemit/0.1","format":"markdown"}
created2019-01-04 12:04:57
last_update2019-01-04 12:04:57
depth0
children2
last_payout2019-01-11 12:04:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,630
author_reputation1,341,628,885,463
root_title"Writing my first code formatter"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,859,151
net_rshares17,797,058,940
author_curate_reward""
vote details (18)
@steemitboard ·
Congratulations @oyvindsabo! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@oyvindsabo/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@oyvindsabo) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=oyvindsabo)_</sub>


**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemfest/@steemitboard/steemfest-meet-the-stemians-contest-the-mysterious-rule-revealed"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmasWw4jQHwxng82DKxY6Q6tVg9mWcto4xcDURs8knFgCa/image.png"></a></td><td><a href="https://steemit.com/steemfest/@steemitboard/steemfest-meet-the-stemians-contest-the-mysterious-rule-revealed">SteemFest Meet The Stemians Contest - The mysterious rule revealed</a></td></tr><tr><td><a href="https://steemit.com/steemfest/@steemitboard/steemfest-meet-the-steemians-contest"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmasWw4jQHwxng82DKxY6Q6tVg9mWcto4xcDURs8knFgCa/image.png"></a></td><td><a href="https://steemit.com/steemfest/@steemitboard/steemfest-meet-the-steemians-contest">SteemFest⁴  - Meet the Steemians Contest</a></td></tr></table>

###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-oyvindsabo-20191110t003012000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-11-10 00:30:12
last_update2019-11-10 00:30:12
depth1
children0
last_payout2019-11-17 00:30:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,555
author_reputation38,975,615,169,260
root_title"Writing my first code formatter"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,354,804
net_rshares0
@varignon ·
Honor to you brother. It is not easy to find motivation for programming projects. Good for you for being able to smack em around a bit.
👍  
properties (23)
authorvarignon
permlinkre-oyvindsabo-writing-my-first-code-formatter-20190112t060005680z
categoryprogramming
json_metadata{"tags":["programming"],"app":"steemit/0.1"}
created2019-01-12 06:00:06
last_update2019-01-12 06:00:06
depth1
children0
last_payout2019-01-19 06:00:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length135
author_reputation448,834,958,166
root_title"Writing my first code formatter"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id78,261,840
net_rshares0
author_curate_reward""
vote details (1)