VS Codeでインデント時に縦線を入れて可読性をあげよう!

VS Codeでインデント時に縦線を入れて可読性をあげよう!

こんにちは、たっきー(@ryutoblog)です。今回は、VS Codeでインデント時に縦線を入れて可読性をあげる方法について紹介します。

TAB(インデント)を押した時にコードが見づらい!

自分が書いたコードをもっと読みやすくしたい!

こんな悩みを解決します。

結論、本記事を読めば全て解決します。現在自分の通っているインターンで実務経験をしている上でかなり役に立っているので保証します。

この記事は3分で読めます。

VS codeで縦線を入れる手順

1, VS codeを起動

vscodeのトップ画面

まずは、上の画像のようにvscodeを起動します。

2, 左下の歯車マーク(設定)を押し、settings を押す

歯車マークを押した画面

次に、画面左下に歯車マーク(設定にいく)をクリックすると、図のように選択肢が出てくるので、Settingsを押します。

3, 検索欄で rulers と打ち検索

rulersの検索画面

次に、画像上部の検索欄にて、rulers と入力しenterを押します。

4, Edit in settings.json を押す

すると、画像のようにEditor: Rulersという項目が出てくるので、その下のEdit in settings.jsonをクリックします。

5, 画像のカーソル欄のように入力

数値入力画面

Edit in settings.jsonをクリックすると、画像のような画面が出てくるので青色のカーソルの部分を入力します。

"editor.renderIndentGuides": true と入力し保存

保存し再起動すると、上の画像でいうと { と } を繋いでいる黄色い線が表示されると思います。線が確認できたら終了です!

VS codeで縦線を入れる方法まとめ

今回は、vscodeで、インデント時の縦線の入れ方について紹介しました。ちなみに、インデント以外にも好きな行数に縦線を入れる方法も紹介しているのでぜひ試してみてください。