VS Codeで好きな列に縦線を引く方法

VS Codeで好きな列に縦線を引く方法

こんにちは、たっきー(@ryutoblog)です。今回はVS Codeで縦線を引く方法について紹介します。

縦線を入れるメリット

  • コードを一行にまとめて書きすぎることを防げる。
  • とても見やすくスッキリしたコードになる。
  • 実際の仕事現場での開発環境に近づく。

縦線を入れる手順

  1. VS Codeを起動
  2. 左下の歯車マーク( 設定 )を押す
  3. Settings を押す
  4. 検索欄で rulers と打ち検索
  5. Edit in settings.json を押す
  6. 画像のカーソル欄のように入力

VS Codeを起動

vscode トップ画面

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

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

vs code 歯車を押した時の画像

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

検索欄で rulers と打ち検索

rulerと検索している画像

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

Edit in settings.json を押す

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

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

数値入力画面

Edit in settings.jsonをクリックすると、画像のような画面が出てくるので青色のカーソルの部分を入力します。私は、見やすく5, 30, 120行目で縦線を表示していますが、どこに表示しても構いません。とりあえず120にしておけば問題ないです。

{ "editor.rulers": [ 5, 30, 120 ] } と入力し保存

[ ]の中の数字に合わせて、画像のように縦線が表示されることが確認できたら終了です!

まとめ

今回は、vscodeの縦線の入れ方について紹介しました。他にも何かリクエストありましたら、お問い合わせ または 私のtwitterまで連絡ください!では今回は以上です。