Why I write code by vscode
Tags: vscode, programming, vim, tooling
Published: 2022-06-10 13:10:41

## Introduction

Every engineers reading this articles write code by Vim, Atom, Jetbrain etc

I think you are more familiar with the editor you are using, so there is a limit to comparing it with other editors. Also, I can't accurately compare VS Code with other editors for features and comfort.

So, I want to create an opportunity for you to use VS Code by appealing the goodness of VS Code that I use every day.

*** Don't write here ***

- Introduction to customized key configs

However, it is possible to assign your favorite key config to the VS Code features introduced here.

- Comparison with other editors (Emerging editors such as Vim JetBrain Helix)

## Table of Contents

1. What is VS Code?

2. Monthly updates

3. VS Code's default feature

4. Abundant and attractive about extensions

5. Summary

## 1. What is VS Code?

VS Code is an editor that has been developed by Microsoft since 2015. It can be used on Windows, Linux, and Mac OS.

The development language is mainly Typescript, and it is developed using a framework called Electron. This framework is also adopted in Slack.

By default, the languages supported include Javascript, Typescript, C++, etc.

It celebrated its 7th anniversary in April 2022! The web version has also been released. Therefore, you can feel free to try it without messing with your local environment.

[VS Code official site](https://code.visualstudio.com/)
[VS Code Web](https://vscode.dev/)

When using vscode, there are no restrictions, and it is an editor that allows you to continue to use it for free for semi-permanent.

As long as the development languages Javascript and Typescript do not become obsolete, the development of VS Code will not stop, so you can continue to use it with confidence.

## 2. Monthly updates

As much as you can use VScode for free, you can also use it for other services and the purchase price of technical books.

This alone is great, but I'm looking forward to getting regular updates.

With monthly updates, things that can only be realized with extensions can be realized by default. For example, a function that identifies and colors parentheses pairs was incorporated as the default function.

https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

Because the number of functions included by default increases, I think that some users may have more unnecessary functions, but you can also disable them depending on the settings.

## 3. VS Code's default feature

Even if you don't add an extension, you can install it and use it as an editor immediately. Here are some features that are included by default.

### Search File name

You can search for all file names starting from the parent directory that is open in VS Code. However, it is possible to search not only by search but also by partial match.

In addition, since it is possible to exclude files that rarely see the contents, such as node_modules, from the search target, it is possible to increase the search speed and reduce the memory used.

Key Config： command + p

### Search text

You can search the full text search individually for directories or only in the file.

VS Code has two ways to search for text.

1. text search for one file

2. text search for all files under the parent directory

In each of these two methods, you can search with the following three options.

1. Search for text case-sensitive

2. Search for text using regular expressions

3. Search for text by word

In addition, you can combine this search option to replace and batch words in a file.

You can easily change the variable name and CSS class name.
Key Config： command + f  /  command + shift + f

### Edit multiple lines

You can spread the cursor over multiple lines to operate it.

It is useful when you want to declare a variable with a similar name or write a method.

Even if it's not a row, you can increase the cursor multiple times and edit it at the same time.

In addition, it is useful when you want to delete words at the same time.

It is also possible to replace the whole line.

Key Config： command + option + ↑ or ↓

### Multiple windows can be arranged

It is very useful when you want to edit a file with a long number of lines, or when you want to edit the view file and CSS in parallel.

As long as memory allows, it is possible to split the workbench, and it is also useful when you want to check the diff.

### Git operations

You can create branches and switch branches on VS Code.

If the setting remains the default, it's not very easy to use.

Because the icon to create a branch is small. As a result, it is difficult to click with the mouse.

To get rid of this, setting your favorite shortcut key will be dramatically easier to use.

Example

When I want to create a branch with a git branch, I assign a key like this.
git branch : command + g + b

### Hit the command in the terminal on VS Code

By specifying a shell, you can operate zsh, bash, or fish in the VS Code terminal.

Like iTerm and kitty, you can't customize it finely, but you don't have to worry about running commands.

However, I don't think it's very easy to use because the font size of the workbench and the font size of the terminal can't be unified.

Also, I don't use terminals on VS Code much because I want to save command history with zsh's peco. This is because even if you hit a command in the terminal on VS Code, the history of the command will not be saved. The only purpose is to create a file.

### Settings can be synchronized on multiple devices

When you are separating your PC for work and private use, you can synchronize the entire VS Code settings and extensions.

The image looks like dotfiles. It is a feature that can be used if you have a Github or Microsoft account.

## 4. The appeal of extensions

You can also write code with VS Code's default feature.

However, the following weaknesses exist:

- When writing code in other languages such as Ruby and Golang, syntax highlight is not displayed correctly because it does not support completion or parsing.

- I don't know if there is a full-width space.
Japanese is multibytes, so it's common.

- It's hard to understand when the indentation of the string is misaligned.

In order to make up for this weakness and to make writing code more efficient, we will put in extensions.

Installation and uninstallation of VS Code extensions is simple

You can search for apps like the App Store on your iPhone, and just press the install button to install the extension into VS Code. Also, if you press the uninstall button, you can uninstall it with one click.

I'd like to introduce a group of extensions from my point of view.

My setting is still rough and I haven't sharpened it at all. I think I should be able to make this setting even easier to use.

### [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.VSCode-language-pack-ja)
Convert the VS Code menu to your native language.

My native language is Japanese, so I put it in.
If I set the detailed settings, the full text is tight in English, so Japaneseization is applied.

### [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

It detects whether there are any half-width spaces or full-width spaces at the end of the line.

If there is a half-width space in the code, it is relatively convenient because it tells you visually. It's because when I just became an engineer, it was pointed out in Haml-lint many times.

### [Tabnine AI Autocomplete](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-VSCode)

It analyzes the lines before and after the files edited by AI and presents completion suggestions.

Not only does it support many programming languages, but it also supports the completion of Japanese input.

The advantage is that you don't have to copy and paste to enter the variable name, and you don't have to spell it wrong. It is also useful because it presents suggestions for method names.

However, since the memory usage is around 500MB, if it is not a PC with plenty of memory, the load will be heavy. For each update, the memory used is decreasing.

### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

This is an extension that allows you to look up the history of Git on a file-by-line and line basis.

For example, when you want to know code which was created in PR.

It is also possible to trace the history of the file, so it helped us understand how Dockerfile is created, modified and changed.

It's very good because the function is always active.

### [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisensegi)

It is an extension that complements the file path.

1. When you want to specify the path of the javascript you want to import

2. When you want to specify the path of the image to specify the background image

It shows the completion of the path without having to check the file tree.

It's a very useful extension in situations like this.

### [GitHub Pull Requests and Issues](https://marketplace.visualstudio.com/items?itemName=GitHub.VSCode-pull-request-github)

This is the official extension of GitHub.

This is an extension that allows you to create PRs and issues on VS Code. It can be used in combination with the functions of the default Git operation.

For example, you can create a pull request after loading commits on VS Code and pushing remote branch.

In addition, it has the ability to exchange PR comments in VS Code. Personally, I feel it's easier to use than New Relic.

If you can check the progress of Github Actions, it's even more⭕️

I used to write code in VS Code and push and pull with GitHub desktop, but I was able to aggregate from those app configurations to VS Code only.

### [endwise](https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise)

It is an extension that automatically compensates for end when there is no end after class or def, press Enter. Sometimes it doesn't work.

### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

It is an extension that distinguishes indentation by coloring. In a view file with a complicated indentation, it's a very helpful feature. You can also add colors freely.

It is a function that is effective with Haml.

### [Database Client](https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2)

This is an extension that allows you to connect to the database, edit records, and search. It moves crisply and is easy to operate.

However, since the edited part is not colored, it is not good compared to the operability of Table Plus.

Therefore, it is used only to connect to the local database.

## 5. Summery

VS Code is a lightweight and highly functional editor that can be used for free!!!!!!

Let's try VS Code!