Using GitLab's built-in IDE

Using GitLab's built-in IDE

Welcome to Tanuki Tuesday, where I look at the features offered by GitLab. This week I take a look at how to edit files in GitLab using the IDE.

Within GitLab there are several ways to modify files. Gitpod was added most recently, and uses an external cloud IDE including environment setup and configuration. There is also the single file editor when browsing through the files in the repository. But when you want to edit several files, or add new ones, the 'Web IDE' comes in handy.

On the surface, the web IDE looks like a standard text editor which has been given a fancy title, but with no actual IDE functionality. It does, however, offer some syntax highlighting for a range of languages such as XML, PHP, C#, C++, Markdown, Java, VB, Batch, Python, Ruby, and Objective-C. There's also some IntelliSense included for JavaScript, CSS, JSON, HTML, and some other related languages.

The IDE won't show syntax errors for languages, so it is very easy to commit changes which have bugs and syntax errors. To counter this you can run an interactive web terminal (currently in beta, and you need your own CI runners) which look as though they should be able to run CI jobs from within the terminal. Assuming you have linting and code sniffing jobs for your project, this should allow you to run those against any changes and identify any issues prior to a commit.

If you need a way of being able to modify or add a few files to a project from time-to-time, and you don't have the code locally or don't want to have the overhead of Gitpod, then this might be just what you need. You can add files and folders, as well as upload new files via the interface. It allows easy navigation through the project's directory structure, and will save the changes automatically ready for committing to a branch.

Commit message area, with a pre-populated intelligent commit message

When you do get to a point of committing, you have the choice of committing back to the branch you came from, or to create a new branch. There is also the option at that point to create a new merge request from the change if you aren't committing to the default branch.

For anyone who is used to using keyboard shortcuts, there are some available within the IDE. When in the edit pane of the IDE, press F1 and you'll be able to search for, and scroll through, the commands to see what you can do quickly and easily. I have found that they do not always work as prescribed (I found the 'comment line' Ctrl+K) by experimentation, but could not reliably replicate the functionality. It's not the end of the world. I was not expecting it to have anything like that built in anyway - I just wanted to try it out.


If you need something more advanced than a single file editor, but without the overhead of a something like GitPod, then GitLab's built in IDE is certainly worth a look. It does not have the bells and whistles you might need and expect from an IDE, but it will get the job done. If you need something more fully featured, use GitPod.