Whitepaperpdf

Text Editing Software:
Usability Comparison of Vim and VS Code

Usability Comparison |2
Contents
Methodology ......................................................................................................................................3
Test Environment ................................................................................................................................................. 3
Tasks ........................................................................................................................................................................ 4
Evaluative Criteria/Rating Scale ........................................................................................................................ 4
Results...................................................................................................................................................5
Task 1: Create a new file and save it to a directory. .................................................................................... 5
Task 2: Change the color scheme of the editor ........................................................................................... 6
Task 3: Change the name of all the instances of a variable ...................................................................... 7
Task 4: Open another file and split the window .......................................................................................... 8
Task 5: Toggle Line Numbers on and off. ..................................................................................................... 9
Task 6: Comment out a block of code at once ........................................................................................... 10
Task 7: Indent and Format Code .................................................................................................................... 11
Task 8: Cut and Paste a Block of Code.......................................................................................................... 12
Task 9: Search the Code for the name of a function ................................................................................. 13
Task 10: Save Edits and Compile the Code ..................................................................................................14
Conclusion ......................................................................................................................................... 15
Bibliography ...................................................................................................................................... 16
Appendix............................................................................................................................................ 17
Braxton Marlatt
Introduction
Vim and Visual Studio Code are popular text editors with the intended use of
programming and designing software. Users are often programmers with varying
familiarity with text editors. A seasoned programmer will have a higher technical ability
than a college freshman that is just starting to code. Vim dates to the early 1990s and
is known for its extensive customization, optimization and efficiency, while also taking
a bit of getting used to. On the other hand, VS Code is easier to get into due to the
robust user interface, and a more modern take on the text editor. This white paper
features the outcomes of cognitive usability tests of how well the text editors
performed over several tasks. The results are structured using the five standard
components of usability.
Methodology
Test Environment
The test environment consisted of me in my bedroom with the door shut and no
outside noise or other distractions. This was to closely simulate the environment that a
software developer would likely be working in, whether that be from an office, home,
etc. The computer used for testing was a Lenovo Desktop computer running the Linux
operating system. A large majority of professional development is done with Linux,
hence why it was used. Vim comes with most Linux distributions, so it was already
installed on the computer, and VS Code was downloaded from a browser. Both text
editors were updated to their most recent version.
Braxton Marlatt
Tasks
1. Create a new file and save it to a directory.
2. Change the color scheme of the editor to white and black.
3. Change the name of all instances of a variable.
4. Open another file and split the window.
5. Toggle line numbers on and off.
6. Comment out a block of code.
7. Indent and format code.
8. Cut and Paste code to a different location.
9. Search the code for a name of a function.
10. Save edits to code then compile.
Evaluative Criteria/Rating Scale

Each task will be completed on both editors and evaluated under these criteria:
1. Effective: The task was completed effectively.
2. Efficient: The task is achievable with little input or thought from the user.
3. Engaging: The required steps in the task were simple and satisfying to
undergo.
4. Error Tolerant: Errors in the task were recognizable and did not create large
issues.
5. Easy to Learn: Process to achieve task is intuitive and easily repeatable after
initial inquiry.
These criteria will be rated using a 6 Point Likert Scale. This scale avoids a neutral
option which testers are more inclined to choose. The scale can be visualized as
follows:
Table 1: 6 Point Likert Scale
Braxton Marlatt
Results
This section includes the results of the cognitive walkthrough. Each text editor will be
reviewed in how they performed the designated tasks to test usability.
Task 1: Create a new file and save it to a

directory.
VS Code: Creating a new file and saving it to a directory was
intuitive and straightforward in VS Code. The User Interface
allows for easy navigation of the menus and file system. As
you can see in Figure 1, the menu is clean and allows the
user many options and functions in a clean format.
Vim: A common theme throughout this review will be that
Vim is much more text input oriented, as is the case with
creating a new file. Vim requires the user to call a command Figure 1: VS Code New File Creation
in the Linux terminal to open and save the file, which requires a bit more memory and
experience, but allows for the task to be achieved at a faster rate compared to VS
Code. You can see the text-based input that allows for fast navigation in Figure 2 and
3.
Figure 2: New File Creation in Vim
Creating and Saving New File

7
6 Figure 3: File Saving in Vim
5
4
3
2
1
0
Efficient Effective Engaging Error Tolerant Easy to Learn
VS Code
Vim
Table 2: Task 1 Bar Graph
Braxton Marlatt
Task 2: Change the color scheme of the editor

VS Code: The process to change the color scheme of Visual Studio requires you to
access the settings, which is natural for such a task and then scroll through the
different options in the search bar, shown in Figure 4.
Figure 4: Changing Color Scheme of VS Code
This menu was not very usable as you could only view each color scheme if you
selected it, and then you had to redo the whole process to view another color
scheme.
Vim: Vim again requires a command that is intuitive, but like VS Code, to view the
color scheme you would have to select it and then restart the process of choosing
another scheme to change it. The process to open the menu to change colors was
faster in Vim so this was not as big of deal.
Figure 5: Vim Color Scheme Changing
Changing Color Themes

7
6
5
4
3
2
1
0
VS Code
Series 2
Braxton Marlatt
Task 3: Change the name of all the instances of a variable

VS Code: VS Code only requires a simple keyboard command (Control and F2) to
change all instances of a variable in your desired scope. You can see in Figure 6 that
the variable names get highlighted, and you can see in live time the changes you
make to them. This makes for an engaging and simple experience.
Vim: Vim requires a more complicated
knowledge and learning curve when it comes
to changing variable names. You must input
the line in Figure 6, where the string in the Figure 7: Changing Variables in VS Code
middle is the original variable and the one on
the right is the variable, you want to replace.
This is a bit confusing and requires more focus Figure 6: Changing Variables in Vim
from the editor.

Changing Color Themes

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Task 4: Open another file and split the window

VS Code: VS Code took some navigation to open the file and drag the file to the right
side of the screen to split it. His is not the most efficient process, but it is intuitive and
simple and aides in efficiency when writing code. You can see the split window format
in Figure 8.
Figure 8: Split Window in VS Code
Vim: I could not figure out how exactly to get a proper split window to work in Vim,
you can easily open files at once but not view them at the same time. I resorted to
opening two terminals and using those simultaneously. This gives a similar effect to
what I was aiming for but takes longer to set up and is not as engaging as expected.
Figure 9: Split Window in Vim
Open a File in Split Window

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Task 5: Toggle Line Numbers on and off.

VS Code: VS Code requires the user to naviagte to the settings to complete this task. I
found it was easiest just to search for the toggle option in settings. The process is
simple and clean and takes minimal time, especially for something you will probably
only do on occasion.
Vim: Again the command line was
used for this task. The command, seen
in Figure 11, is very simple and
repeateable, making this task

Figure 10: Toggle Line Numbers in VS Code
extrememly easy and fast in Vim.
Figure 11: Toggle Line

Numbers in Vim
Toggle Lined Numbers

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
U s a b i l i t y C o m p a r i s o n | 10
Task 6: Comment out a block of code at once

VS Code: Very easy with the use of the cursor, as all you had to do is highlight the
desired lines and press the comment button “/”. This makes for commenting out big
chunks of code fast and intuitive.
Vim: Without the use of the cursor to select the text,
this task becomes much harder and time consuming. I
was not able to find a way to comment out a block at

Figure 12: Commented Block of Code in Vim
once, so I was left to comment out each line
singularity.
Figure 13: Commented Block of Code in Vim
Toggle Lined Numbers

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Task 7: Indent and Format Code

VS Code: Indenting and formatting code in VS Code is very automated and intuitive.
Indentations can be made over large block quickly by selecting the code with the
cursor and pressing tab. This, along with the fact that the editor automatically inserts
the closed versions of brackets, parentheses, etc. makes for fast and easy formatting
and refactoring of code.
Vim: To select code to indent in Vim, you must enter
the Visual Block mode via the Control V command.
This takes a little longer than using the mouse, and the
Figure 14: Indented Text in VS Code
selection process with the arrow keys is clunky and
slow. There is also not much offered in terms of
automation such as the insertion of closed brackets.
Figure 15: Indented Text in Vim
Indentation and Formatting of Code

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Task 8: Cut and Paste a Block of Code

VS Code: Cutting and pasting works just as it does in almost any other context. Very
quick and easy but does allow for some margin for error in selecting the text if one is
going too fast.
Vim: Again, the lack of mouse input in Vim holds it back. Had to input several
commands to enter the Visual Block, select the correct text, and cut and paste it.
Selecting the correct text is a bit tricky and takes some getting used to and the
process is a bit convoluted.
Cut and Paste a Block of Code

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Task 9: Search the Code for the name of a function

VS Code: Using the Control F feature that many people are familiar with worked will in
Visual Studio. All off the appearances of the name of the function could be cycled
through and there was a small preview of the code file displayed that highlighted the
lines in which the function appeared.
Vim: Required the
command line to
Figure 16: Visual Studio Search Feature
search through the
document. Command of just a ‘/’ was very intuitive and easy to learn and the different
appearances could be cylced through using ‘n’.
Figure 17: Vim Search Feature
Search the Code for a Function

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Task 10: Save Edits and Compile the Code

VS Code: Being a separate application from the terminal causes this process to take
more time in VS Code. One must save before switching screens to the terminal, which
causes room for error in forgetting to save and having to restart the process. Saving
edits is quick and easy and can be done with a simple command, but switching to the
terminal is a bit tedious as you must take your hand off the keyboard.
Vim: Since Vim is built into the terminal is very intuitive to save and exit Vim with a
single command. Task is error proof as you must exit Vim to compile the code, so it
will be saved. This process can be done very quickly, and the user doesn’t have to
remove their hands from the keyboard.
Save Edits and Compile the Code

7
6
5
4
3
2
1
0
VS Code
Vim
Braxton Marlatt
Conclusion
Final Scores
70
60
50
40
30
20
10
0
VS Code Vim
Table 12: Final Scores
This usability test has revealed valuable insight into the strengths and weaknesses of
both Vim and VS Code. While my test has fallen quite heavily in favor of VS Code, I do
believe that there is a niche market for Vim and its more complex design and steep
learning curve. Hardcore developers and enthusiasts might enjoy the text input style
and potential efficiency of Vim, but for beginner programmers and college students,
the clean Graphical Interface of VS Code makes for a smooth transition into the world
of code.
Braxton Marlatt
Bibliography
“Vim - the Ubiquitous Text Editor.” Vim Online, www.vim.org/.
“Visual Studio Code - Code Editing. Redefined.” Microsoft, code.visualstudio.com/.
Braxton Marlatt
Appendix
Tasks VS Code Vim
TASK 1 Create new file and save it to directory. Create new file and save it to directory.
Efficient Task was efficient but required removing hand from Task was very efficient
keyboard and some User Interface navigation.
Strongly Disagree Slightly Slightly Agree Strongly Strongly Disagree Slightly Slightly Agree Strongly
Disagree Disagree Agree Agree Disagree Disagree Agree Agree
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively. Task was completed effectively

1 2 3 4 5 6 1 2 3 4 5 6
Engaging User Interface was intuitive and easy to navigate Commands are intuitive and engaging
1 2 3 4 5 6 1 2 3 4 5 6
Error Hard to make errors in this task but allows for some Easier to make errors with commands, but helpful tips
Tolerant tolerance. are given if you input incorrect commands
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Very similar to software such as Word or Excel, should be Takes a few minutes to learn the proper commands.
Learn easy to pick up on for anyone.
1 2 3 4 5 6 1 2 3 4 5 6
Additional Used File button in top right, selected New File, and Used “cd” command to navigate to proper directory, then
Notes navigated to the proper directory and saved the file. used “vim test.cpp” to open the new file, and saved by
hitting escape, then “!” then “wq”. This might sound like
a lot but is very fast once you get the hang of it.
Tasks VS Code Vim

TASK 2 Change the color scheme of the editor. Change the color scheme of the editor.
Efficient Took some time to cycle through color schemes of my No option to preview color schemes, took long to find one
liking. that suited me.
1 2 3 4 5 6 1 2 3 4 5 6
Effective The task was completed effectively. Task was completed effectively.
1 2 3 4 5 6 1 2 3 4 5 6
Engaging Navigating the theme menu was not very intuitive. Vim command line was intuitive using ‘color scheme’
command.
1 2 3 4 5 6 1 2 3 4 5 6
Error User interface was error tolerant. Not necessarily and error but selecting the wrong color
Tolerant scheme a complete restart of the task.
1 2 3 4 5 6 1 2 3 4 5 6
Easy to User interface was easy to learn. Took a couple minutes to find the proper command.
Learn
1 2 3 4 5 6 1 2 3 4 5 6
Additional Finding the settings in the bottom left was a bit tricky, after Entered the Vim command line with escape and then typed
Notes that finding the proper theme was easy, although a little ‘colorshceme’ followed by the proper colors I wanted.
time consuming.
Braxton Marlatt
Tasks VS Code Vim

TASK 3 Change the name of all instances of a variable Change the name of all instances of a variable.
Efficient Task completed very efficiently Task was not relatively efficient
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task completed effectively Task completed effectively

1 2 3 4 5 6 1 2 3 4 5 6
Engaging Task was very engaging intuitive. Command was not intuitive.
1 2 3 4 5 6 1 2 3 4 5 6
Error Errors are hard to make in this task Command was a bit complex, and somewhat error prone.
Tolerant
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Very simple command, easy to learn and replicate. Command took several minutes to understand, would have
Learn to relearn after a short period of not using it.
1 2 3 4 5 6 1 2 3 4 5 6
Additional Found that you can press control and f2 to edit all Entered a complicated command in the command line,
Notes instances of a variable. Quick and easy. took several attempts.
Braxton Marlatt
Tasks VS Code Vim

TASK 4 Open another file and split the window Open another file and split the window
Efficient Task was efficient. Task required some extra steps causing it to take more
time.
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively. The task was not completed to complete satisfaction.
Required another terminal to be opened which was not was
I was looking for.
1 2 3 4 5 6 1 2 3 4 5 6
Engaging Task was straight forward and engaging. Task required some work arounds, was not straight
forward.
1 2 3 4 5 6 1 2 3 4 5 6
Error No steps allow for the possibility of any major errors. No steps allow for the possibility of any major errors.
Tolerant
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Task was very easy to learn requiring almost no time. Since solution was a work-around there isn’t really a task to
Learn learn besides opening a file.
1 2 3 4 5 6 1 2 3 4 5 6
Additional Opened a new file with the file tab and dragged it to the Could not find how to open to files in one terminal
Notes right side, very quick and easy. simultaneously, opened two files in two terminals for
similar effect.
Braxton Marlatt
Tasks VS Code Vim

TASK 5 Toggle Line Numbers on and off Toggle Line Numbers on and off
Efficient Task was not the fastest but wasn’t unbearable. Task was completed efficiently
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively Task was completed effectively

1 2 3 4 5 6 1 2 3 4 5 6
Engaging User interface to complete task was engaging Command was straightforward and intuitive
1 2 3 4 5 6 1 2 3 4 5 6
Error Task leaves little to no room for error. Could possibly make mistake in command typing, would
Tolerant only require a short retype.
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Task was easy to learn and repeatable. Command is simple to learn and easy to remember
Learn
1 2 3 4 5 6 1 2 3 4 5 6
Additional Required me to enter settings and search for the toggle for Require the set number! Command. Easy and quick.
Notes the numbered lines, not the fastest solution.
Braxton Marlatt
Tasks VS Code Vim

TASK 6 Comment out a block of code all at one time. Comment out a block of code all at one time
Efficient Task was completed efficiently I was not able to find a way to select a block of code and
comment it out all at once.
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively. Task was complete effectively, but not in the manner I had
in mind.
1 2 3 4 5 6 1 2 3 4 5 6
Engaging Task was engaging and intuitive. Task was completed by commenting out each line,
repetitive and frustrating.
1 2 3 4 5 6 1 2 3 4 5 6
Error Selecting the incorrect code might lead to some errors, Easy to avoid errors when manually selecting each line.
Tolerant although easy to fix.
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Easy macro input to complete task. Easy to learn and Nothing really to learn as the task just requires
Learn repeat. commenting.
1 2 3 4 5 6 1 2 3 4 5 6
Additional Selected block of code and pressed control and “/” Went line by line and commented the code out manually.
Notes
Braxton Marlatt
Tasks VS Code Vim

TASK 7 Indent and format code Indent and format code
Efficient Task was completed efficiently Task was completed efficiently

1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively Task was completed effectively

1 2 3 4 5 6 1 2 3 4 5 6
Engaging Task was engaging an intuitive. Task was engaging, but selection process for text is slightly
less engaging.
1 2 3 4 5 6 1 2 3 4 5 6
Error Task is error tolerant. Task is slightly prone to errors as it requires a few keyboard
Tolerant commands.
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Task is easy to learn, took less than a few seconds. Task to a few minutes to learn but is still very easy and
Learn repeatable.
1 2 3 4 5 6 1 2 3 4 5 6
Additional Selected desired indentations and pressed tab. Also Entered visual mod with control v and selected the lines
Notes created a closed version of all applicable characters such with arrow keys then pressed >.
as {}, (), and [], Which is nice for formatting.
Braxton Marlatt
Tasks VS Code Vim

TASK 8 Cut and paste a block to a different location Cut and paste a block to a different location
Efficient Task was completed efficiently. Task took several steps to complete.
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively. Task was completed effectively.

1 2 3 4 5 6 1 2 3 4 5 6
Engaging Task was intuitive and engaging. Task was slightly less engaging as the process of pasting
the block of code was a bit tricky.
1 2 3 4 5 6 1 2 3 4 5 6
Error There some room for error in selecting the text, but can Pasting in the correct location is a bit hard and can lead to
Tolerant easily be fixed. errors.
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Very easy to learn. Task takes a bit of learning but operates similar to a
Learn normal cut and paste with practice.
1 2 3 4 5 6 1 2 3 4 5 6
Additional Just like copying and pasting in any other context. Very Not being able to use the cursor to select the text makes
Notes easy. copying and pasting more difficult.
Braxton Marlatt
Tasks VS Code Vim

TASK 9 Search the Code for the name of a function Search the Code for the name of a function
Efficient Task was very efficient. Task was very efficient.

1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was effective. Task was effective.

1 2 3 4 5 6 1 2 3 4 5 6
Engaging Task was intuitive and engaging Task was engaging but required a few more steps.
1 2 3 4 5 6 1 2 3 4 5 6
Error Task was error tolerant. Task was error tolerant.

Tolerant
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Task was easy to learn and repeatable. Task was fairly easy to learn and is repeatable.
Learn
1 2 3 4 5 6 1 2 3 4 5 6
Additional Used control Control-F to search the code, just like any Very similar to the Control-F function but used the
Notes other context. command line with a slash to search.
Braxton Marlatt
Tasks VS Code Vim

TASK 10 Save edits to code then compile Save edits to code then compile
Efficient Takes a little bit of time to switch to the command line. Very efficient in compiling
1 2 3 4 5 6 1 2 3 4 5 6
Effective Task was completed effectively. Task was completed effectively.

1 2 3 4 5 6 1 2 3 4 5 6
Engaging Switching tabs to the command line was not very engaging. Saving and exiting Vim then compiling is very engaging.
1 2 3 4 5 6 1 2 3 4 5 6
Error You can forget to save before going to compile which Task is very error proof.
Tolerant causes issues.
1 2 3 4 5 6 1 2 3 4 5 6
Easy to Task is easy to learn. Task is easy to learn.

Learn
1 2 3 4 5 6 1 2 3 4 5 6
Additional Since VS Code doesn’t have the terminal built in, it is a bit Since Vim is built into the terminal it is easy to exit Vim and
Notes more of a process to compile the code. compile the code in the terminal without taking your hands
off the keyboard.
Braxton Marlatt

Whitepaperpdf

Uploaded by

Copyright:

Available Formats

You might also like

Whitepaperpdf

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Whitepaperpdf

Uploaded by

Copyright:

Available Formats

Text Editing Software:

Usability Comparison of Vim and VS Code

Test Environment ................................................................................................................................................. 3

Evaluative Criteria/Rating Scale ........................................................................................................................ 4

Task 1: Create a new file and save it to a directory. .................................................................................... 5

Task 2: Change the color scheme of the editor ........................................................................................... 6

Task 3: Change the name of all the instances of a variable ...................................................................... 7

Task 4: Open another file and split the window .......................................................................................... 8

Task 5: Toggle Line Numbers on and off. ..................................................................................................... 9

Task 6: Comment out a block of code at once ........................................................................................... 10

Task 7: Indent and Format Code .................................................................................................................... 11

Task 8: Cut and Paste a Block of Code.......................................................................................................... 12

Task 9: Search the Code for the name of a function ................................................................................. 13

Task 10: Save Edits and Compile the Code ..................................................................................................14

operating system. A large majority of professional development is done with Linux,

editors were updated to their most recent version.

Evaluative Criteria/Rating Scale

1. Effective: The task was completed effectively.

Table 1: 6 Point Likert Scale

reviewed in how they performed the designated tasks to test usability.

Task 1: Create a new file and save it to a

intuitive and straightforward in VS Code. The User Interface

allows for easy navigation of the menus and file system. As

user many options and functions in a clean format.

Vim: A common theme throughout this review will be that

Vim is much more text input oriented, as is the case with

Creating and Saving New File

Task 2: Change the color scheme of the editor

different options in the search bar, shown in Figure 4.

Figure 4: Changing Color Scheme of VS Code

faster in Vim so this was not as big of deal.

Figure 5: Vim Color Scheme Changing

Changing Color Themes

Table 3: Task 2 Bar Graph

Task 3: Change the name of all the instances of a variable

make to them. This makes for an engaging and simple experience.

Vim: Vim requires a more complicated

knowledge and learning curve when it comes

to changing variable names. You must input

middle is the original variable and the one on

the right is the variable, you want to replace.

from the editor.

Changing Color Themes

Task 4: Open another file and split the window

Figure 8: Split Window in VS Code

Figure 9: Split Window in Vim

Open a File in Split Window

Table 5: Task 4 Bar Graph

Task 5: Toggle Line Numbers on and off.

Vim: Again the command line was

used for this task. The command, seen

in Figure 11, is very simple and

repeateable, making this task

Figure 11: Toggle Line

Toggle Lined Numbers

Table 6: Task 5 Bar Graph

Task 6: Comment out a block of code at once