First impressions: Copilot wrote my translation files for me

I am not excited about using Gen AI for software development. Not against it per se, just not terribly interested in it.

But work has been pushing us to use GenAI lately, so I've been (somewhat reluctantly) trying to incorporate it into my workflow.

A few months ago, I signed up for a ChatGPT account, used it for a few research questions, and then mostly ignored it.

This week, we all got Copilot licenses. This post is about my initial impressions of Copilot, and a couple of small wins using it in VSCode, while working on react-i18n translation files.

"Installing" Copilot

Installing Copilot into VSCode was a weird experience. The docs say you need to install 2 extensions to use Copilot, but Copilot chat window was just there, despite those extensions not showing as being installed. Then when I setup Copilot, those extensions show up as installed. This is probably some weird MS thing where they have special casing for their extensions in their otherwise ostensibly open source IDE. I'm sure that annoys lots of FOSS folks; I just find it strange.

The Copilot IntelliJ plugin was a standard plugin, installed through the Marketplace. I haven't use it yet though, since I've been working on Frontend lately.

Chatting is slow

Initially, I tried the chat window interface, describing what I wanted the code to look like. I was able to eventually get what I wanted from it, but it took a long time--far longer than it would have take to write the code by hand.

Now, there are some caveats here that mean it might not be a fair test. 1) I knew pretty much exactly the code I was looking for 2) I hadn't use the tool before. Even so, chat (even in Agent mode) doesn't feel like the right way to work with Copilot most of the time.

Stop helping!

To be fair, I yell this at my IDE somewhat often, even without AI features. Autocomplete I don't want right now; a popover dialog blocking the code I'm trying to read. Whatever it may be, all that power that an IDE provides can sometimes get in the way.

However, Copilot is so much more aggressive with its suggestions. Maybe there are settings I can tweak.

Ok, maybe keep helping: react-i18n

This was my task:

1. re-organize the translation files with an extra grouping
2. update the existing component to use the re-organized keys
3. add a new component with the base translations in the english file
4. add the translations for the other 2 languages we support

None of this is terribly complicated but it takes time.

For reference, these translation files are json with hierarchical keys, which you then reference using dot notation. For example, if you have the following translation file

{
	"foo": {
		"bar": "Foo bar"
	}
}

Then you would reference it in your component like this:

function FooBar() {
	const { t } = useTranslation();

	return <div>{t('foo.bar')}</div>
}

I did step 1 manually, and Copilot made a couple of suggestions that drastically simplified steps 2-4.

For Step 2, Copilot "saw" the change (whatever that means for an LLM) and suggested the corrected keys automatically. Although, strangely, it did it in several steps--for 10 fields, it suggested changes to 3 fields, then 4 then 3 again.

For Step 3, my normal process would be to write the component without translations, copy the relevant component code into the translation file (or an empty file) and use multi-line editing to turn it into what I want.

Since I was working on a menu component, composed of <ListItem/>s, this is a pretty straight forward process, that Copilot just did for me. I pasted TSX into a JSON file

{
	"Actions": {
		<ListItem>Foo</ListItem>
		<ListItem>Bar</ListItem>
		<ListItem>Baz</ListItem>
		<ListItem>Quux</ListItem>
	}
}

And Copilot auto suggested this:

"Actions": {
  "Foo": "Foo",
  "Bar": "Bar",
  "Baz": "Baz",
  "Quux": "Quux"
}

For Step 4, I pasted the English translations into the other file and Copilot auto translated for me. Presumably this is using something like Google Translate (or whatever Microsoft's equivalent is) behind the scenes.