Logo

dev-resources.site

for different kinds of informations.

Create A Vim Plugin For Your Next Programming Language, Structure, and syntax highlight.

Published at
6/14/2024
Categories
communicationprotoco
vim
extension
programminglanguages
Author
ezpzdevelopement
Author
16 person written this
ezpzdevelopement
open
Create A Vim Plugin For Your Next Programming Language, Structure, and syntax highlight.

Create A Vim Plugin For Your Next Programming Language, Structure, and syntax highlight.

Vim is a text-based editor, opensource, it is also an improved version of the old vi UNIX, Vim has so many features including multi-level undo, syntax highlighting, command line history, on-line help, spell checking, filename completion, block operations, script language, etc.

If we want to talk about compatibility, Vim runs under MS-Windows (XP, Vista, 7, 8, 10), macOS, Haiku, VMS, and almost every OS based on UNIX.

In today's post, I would like to show you how to write your own vim extension for a new programming language, I wrote this plugin with the help of my two coworkers Imen and Djamel.

Introduction

First, let me introduce you to IOP (Intersec Object Packer) it is a method to serialize data in different communication protocols, inspired by Google Protocol Buffers, IOP syntax looks like D language syntax, and all of this is according to IOP official documentation.

The Structure of a Vim Plugin

When we start working on our extension, we will create a root folder under the name vim-iop, which is exactly what we picked as a name for our vim extension.

This directory will contain three other important folders which are :

  • autoload: is a technique for blocking the loading of your plugin’s code until it’s required, in our case, we will implement the autocomplete feature in this folder.
  • ftdetect: or file type detection, has a clear purpose to figure out what file type a given file is.
  • ftplugin: contains scripts that run automatically when vim detect a file opened or created by a user, in our case this file will contain the logic to implement indentation.
  • scripts: contains a script that implements syntax highlight.

Detect File Type

In this section, we add the code to set file type for IOP files, but first, our root folder vim-iop must look like this :

vim-iop
------- ftplugin
------- ftdetect
------- syntax
------- autoload
Enter fullscreen mode Exit fullscreen mode

In this part we need to create a new file ftdetect/iop.vim, add this code below to it:

" ftdetect/iop.vim
autocmd BufNewFile,BufRead *.iop setfiletype iop
Enter fullscreen mode Exit fullscreen mode

Syntax Highlight

In this section, we will write some vim script in addition to some regex, so we can add the syntax highlight feature to our Vim extension.

Before we can start coding i want to mention that IOP has Basics types which are : int, uint, long, ulong, byte, ubyte ... and more, plus four complex types struct, class, union, enum , if you want to learn more about this types make sure to check this link.

So for the code below, we need add the logic to highlight the IOP types mentioned in this part of IOP documentation.

"syntax/iop.vim

**_syntax keyword_ iopComplexType** class enum union struct module **nextgroup** =iopComlexTypeName **skipwhite**
 **_syntax keyword_ iopBasicTypes** int uint long ulong xml 
**_syntax keyword_ iopBasicTypes** byte ubyte short ushort void 
**_sytanx keyword_ iopBasicTypes** bool double string bytes

" complex types name
**_syntax match iopComlexTypeName_**" **\w\+**" contained
Enter fullscreen mode Exit fullscreen mode

as you can see we have iopComplexType , iopBasicTypes both of these variables contain the different complex and basic types of IOP, we also want to tell our extension that each complex type is followed by a name and that white space should be ignored, after this, we need to tell our vim extension to highlight this types by adding the code below in the bottom of syntax/iop.vim.

"syntax/iop.vim
**_highlight link_**  **iopComplexType** Keyword
**_highlight link_ iopBasicTypes** Type
Enter fullscreen mode Exit fullscreen mode

in the end and after adding this extension to our vim ide, we will see something like this.

IOP syntax contains decorators also, we are going to write some regular expressions in order to highlight this, so just add the code below to our syntax/iop.vim file.

"syntax/iop.vim

syntax match iopDecorator /^ **\s*** @/ nextgroup=iopDecoratorFunction
syntax match iopDecoratorFunction contained / **\h** [a-zA-Z0-9_.]*/
Enter fullscreen mode Exit fullscreen mode

In the first line of the code above we are telling our vim extension that this decorator can start with a zero or multiple white spaces followed by an β€œ@” ( /^ \s *@/) , and the nextgroup keyword means that after β€œ@” there is a name of this decorator, the name of this decorator can contain all alphabet letters whether it is upper or lower case, this decorator name can also contain numbers and the two special characters β€œ_ β€œ and β€œ.”.

After telling our vim extension to highlight the decorators.

"syntax/iop.vim

highlight link iopDecoratorFunction Function
Enter fullscreen mode Exit fullscreen mode

This is an example of what we will see in our vim IDE.

if you want the complete implementation of vim-iop syntax highlight make sure to check this link.

That's it for now, in the next post, i will show you how to add autocomplete and indentation.

References:

extension Article's
30 articles in total
Favicon
Avoiding a "Host Permission" Review Delay When Publishing a Chrome Extension
Favicon
Unlock Cleaner Code with Dexter.ai: A must have VS Code extension for Python Development
Favicon
Export LinkedInβ„’ Profile to CV using Browser Extension
Favicon
Learn Spanish Chrome extension
Favicon
A "New Way" to Pay Creators
Favicon
Chrome Extension Boilerplate with Popup Interaction (Manifest V3)
Favicon
How to Build a Simple Chrome Extension to Search Selected Text on YouTube
Favicon
Creating a Chrome extension
Favicon
Create A Vim Plugin For Your Next Programming Language, Indentation and Autocomplete
Favicon
Creating a browser extension for Chrome / Edge
Favicon
Create A Vim Plugin For Your Next Programming Language, Structure, and syntax highlight.
Favicon
Build your own VS Code extension
Favicon
Get Affordable and Non Surgical Hair Patching and Hair Extension In Kolkata
Favicon
Introducing Shell Command 2: The Ultimate Shell Command Runner for VSCode
Favicon
How do ad blockers work in the browser?
Favicon
How to test a browser extension locally
Favicon
Explore the Best VSCode Themes for a Stylish Coding Experience 🌈
Favicon
GPT 4 and Why it is Good for Chrome to Crumble
Favicon
Streamline Your WPF Development with Syncfusion: Introducing the WPF Template Studio for Visual Studio
Favicon
VSCode Extension - Doc Tab: edit the doc comments in a new tab
Favicon
Using External Weather Data In A Custom Panel Extension
Favicon
[AWS] Using API Gateway for S3 Uploads to Trigger Lambda Functions
Favicon
Chrome side panel: Simulate close event
Favicon
Data Storage & Retrieval Troubles with Bookmark Decay
Favicon
Diving into Chrome Extension Development: 3 Essential Resources
Favicon
Developing a Chrome Extension for Bookmark Decay
Favicon
"Bookmark Decay": A Project for Learning
Favicon
Twitch Mention Notifier web extension
Favicon
Looking to partner with a chrome extension partner.
Favicon
How to add a progress bar to terraform cli

Featured ones: