Evasion of breathing tax: editing TEI with VSCode

This article introduces how to set up VSCode so that any user can edit TEI/XML relatively easy by free, based on a brief report by Yifan Wang who is graduate student of the University of Tokyo and junior fellow in the International Institute for Digital Humanities.

I strongly recommend to use Oxygen XML Editor for TEI, if you have enough budget due to its tremendous usability.

Breathing with VSCode would not be easier than with Ox, but we can swim.

The setting process is blow:

1. Download and install VSCode.
2. Download and install Java.
3. Configure JAVA_HOME.
4. Download and install XML extension for VSCode.
5. Edit settings.json in VSCode.
6. Restart VSCode
7. install XML Tools
8. Restart VSCode
9. Try to open and edit a TEI/XML file.
10. Install vscode-htmltagwrap
11. Restart VSCode

Here we go!

1. Download and install VSCode.

Do it from the URL below:

https://azure.microsoft.com/en-us/products/visual-studio-code/

If you want to use non-English version, you may find a language pack as an extension of VSCode.

2. Download and install Java.

Do it from the URL below:

You can download and install Java according to the instruction in the URL below:

How do I install Java ?

3. Configure JAVA_HOME.

This setting is a little difficult for beginners and different between Windows and MacOS.

For Windows, see below:

javatutorial.net

For MacOS, see below:

www.appsdeveloperblog.com

During this process, note the value of your JAVA_HOME (that is, the path of Java installed in your PC).

4. Download and install XML extension for VSCode.

Install XML extension on VSCode.

1. Click "Extension" icon on the left-side bar.

2. input "XML" in the input from

3. Click "install" button surrounded by green in the "XML" extension provided by Red Hat.

5. Edit settings.json in VSCode.

This step is most difficult in this process. Please do it carefully.

1. After installing "XML" extension, click "setting" icon, then, select "Extension settings"

open extension settings

1. Find "Edit in settings.json" link on the center window and click it.

click settings.json

1. add "xml.java.home": with JAVA_HOME value in your PC. (You've already had it above.)

For example, "xml.java.home": "C:\Program Files\Java\jdk-13.0.1", is my case.

settings.json

6. Restart VSCode

Restart your VSCode. After that, XML file can be validated on VSCode.

7. install XML Tools

Install "XML Tools" extension like below:

xmltools

8. Restart VSCode

Restart your VSCode. After that, some convenient functions for XML are available like below:

outline of XML

9. Try to open and edit a TEI/XML file.

Open a TEI file by this VSCode. Probably it would not work well because it can not treat Relaxng file as the schema. Then, replace your tag with the following:

<TEI xmlns="http://www.tei-c.org/ns/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.tei-c.org/ns/1.0 https://tei-c.org/Vault/P5/current/xml/tei/custom/schema/xsd/tei_all.xsd">

Then, you will be able to find what we want like below:

tag candidates

10. Install vscode-htmltagwrap

So far, we don't have the "Ctrl-e" (or Command-e). We can not find the same function, but find a similar one as vscode-htmltagwrap.

install htmltabwrap

See the usage carefully.

11. Restart VSCode

You must restart VSCode again to activate the extension.

12. Install Auto rename tag

"Auto rename tag" extension is also necessary for us. Install it and restart VScode:

auto rename tag

As we might need some more functions, we will survey furthermore.