VS Codeで1行の文字数を確認する方法｜長すぎる行を視覚的にチェック！

「VS Codeでコードを書いていて、この行、何文字あるんだろう？」
「チームの規約で1行80文字以内にしたい」

と思ったことはありませんか？

VS Codeには1行の文字数（長さ）を視覚的に確認したり、超えないようにガイドラインを表示する便利な機能があります。

この記事では、以下の方法について詳しく解説します：

  • ステータスバーでリアルタイム確認
  • ルーラー（縦線）による視覚的ガイド
  • 自動折り返し機能の活用
  • 長い行の警告とハイライト
  • チーム開発での文字数制限の統一
  • 言語別の最適な設定

コーディング規約を守りながら、見やすく保守しやすいコードを書く方法を身につけましょう！

スポンサーリンク

ステータスバーで現在のカーソル位置を確認

Screenshot

基本的な確認方法

VS Codeの右下（ステータスバー）には、現在のカーソル位置が表示されています。

表示例

Ln 10, Col 25

意味

  • Ln – Line（行番号）
  • Col – Column（列番号、つまり文字数）

実際の使い方

行の文字数を確認する手順

  1. 確認したい行の最後にカーソルを移動
  2. ステータスバーの Col の数値を確認
  3. その数値が行の総文字数

キーボードショートカットの活用

  • End キー – 行末へ移動
  • Home キー – 行頭へ移動
  • Ctrl + → – 単語ごとに移動（Windows/Linux）
  • Cmd + → – 行末へ移動（Mac）

ステータスバーの詳細表示

選択範囲の文字数確認

文字列を選択すると、ステータスバーに以下のような詳細情報が表示されます：

Ln 10, Col 25 (15 selected)

これで選択した部分の文字数も確認できます。

マルチカーソル時の表示

複数のカーソルがある場合：

Ln 10, Col 25 (3 cursors)

このように複数カーソルの状態も表示されます。

ルーラー（縦線）による視覚的ガイド

基本的な設定方法

長さの上限を視覚的に把握するなら、VS Codeの「ルーラー」機能がおすすめです。

settings.jsonでの設定

{
  "editor.rulers": [80, 120]
}

効果

  • エディタ上に縦線が表示される
  • 80文字目と120文字目の位置が分かる
  • 文字数制限を視覚的に確認できる

GUIから設定する方法

  1. Ctrl + ,（Mac: Cmd + ,）で設定画面を開く
  2. 検索欄に「rulers」と入力
  3. 「エディター: ルーラー」の項目を見つける
  4. 「設定を編集」をクリック
  5. [80, 120] のように配列形式で入力

詳細な設定オプション

複数のルーラー設定

{
  "editor.rulers": [
    80,      // 推奨最大値
    100,     // 注意ライン
    120      // 絶対最大値
  ]
}

言語別のルーラー設定

{
  "editor.rulers": [80],
  "[python]": {
    "editor.rulers": [79]  // PEP 8準拠
  },
  "[markdown]": {
    "editor.rulers": [100] // 文書は少し長めに
  },
  "[javascript]": {
    "editor.rulers": [80, 120]
  }
}

ルーラーの色をカスタマイズ

{
  "editor.rulers": [
    {
      "column": 80,
      "color": "#ff6b6b40"  // 薄い赤色
    },
    {
      "column": 120, 
      "color": "#4ecdc440"  // 薄い緑色
    }
  ]
}

自動折り返し機能の活用

基本的な折り返し設定

ソフトラップ（表示上の折り返し）

{
  "editor.wordWrap": "on"
}

効果

  • 画面幅で自動的に表示が折り返される
  • ファイル内容は変更されない
  • 長い行も読みやすくなる

詳細な折り返し設定

{
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  "editor.wrappingIndent": "indent"
}

設定の意味

  • bounded – 指定した文字数で折り返し
  • wordWrapColumn – 折り返し位置
  • wrappingIndent – 折り返し行のインデント

言語別の折り返し設定

プログラミング言語

{
  "[javascript]": {
    "editor.wordWrap": "off"  // コードは折り返さない
  },
  "[python]": {
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 79
  }
}

文書系のファイル

{
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 100
  },
  "[plaintext]": {
    "editor.wordWrap": "on"
  }
}

長い行の警告とハイライト

ESLintによる文字数制限

JavaScript/TypeScriptプロジェクトでは、ESLintで文字数制限を設定できます。

.eslintrcでの設定

{
  "rules": {
    "max-len": [
      "error",
      {
        "code": 80,
        "tabWidth": 2,
        "ignoreUrls": true,
        "ignoreStrings": true
      }
    ]
  }
}

VS Code設定での連携

{
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Prettierによる自動整形

.prettierrcでの設定

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

VS Codeでの自動適用

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

その他言語での文字数制限

Python（Black + Flake8）

# setup.cfg または .flake8

[flake8]

max-line-length = 88 extend-ignore = E203, W503

Go（gofmt + golint）

{
  "[go]": {
    "editor.rulers": [80, 120],
    "editor.formatOnSave": true
  }
}

便利な拡張機能

Bracket Pair Colorizer

長い行でもカッコの対応が分かりやすくなります。

{
  "bracket-pair-colorizer-2.colors": [
    "#ffd700",
    "#da70d6", 
    "#87ceeb"
  ]
}

Indent Rainbow

インデントレベルを色分けして、構造を把握しやすくします。

{
  "indentRainbow.colors": [
    "rgba(255,255,64,0.07)",
    "rgba(127,255,127,0.07)", 
    "rgba(255,127,255,0.07)"
  ]
}

Better Comments

長いコメント行も色分けで見やすくなります。

// TODO: この関数は80文字を超えているので、後でリファクタリングが必要
// ! 警告: この行は非常に長いので注意が必要です
// ? この実装で本当に良いのか？

チーム開発での文字数制限統一

.vscode/settings.jsonでの共有設定

プロジェクトルートに.vscode/settings.jsonを作成して、チーム全体で設定を統一できます。

{
  "editor.rulers": [80, 120],
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.rulers": [80],
    "editor.wordWrap": "off"
  },
  "[python]": {
    "editor.rulers": [79]
  },
  "[markdown]": {
    "editor.rulers": [100],
    "editor.wordWrap": "on"
  }
}

EditorConfigでの統一

.editorconfigファイルでエディタ共通の設定を管理：

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,ts,jsx,tsx}]
indent_style = space
indent_size = 2
max_line_length = 80

[*.py]
indent_style = space
indent_size = 4
max_line_length = 79

[*.md]
trim_trailing_whitespace = false
max_line_length = 100

Git Hooksでの自動チェック

コミット前に文字数制限をチェック：

#!/bin/sh
# .git/hooks/pre-commit

# 80文字を超える行をチェック
long_lines=$(git diff --cached --name-only | xargs grep -l '.\{81,\}' 2>/dev/null)

if [ -n "$long_lines" ]; then
    echo "Error: Lines longer than 80 characters found in:"
    echo "$long_lines"
    exit 1
fi

実用的な使用例

Webフロントエンド開発

React + TypeScript プロジェクト

{
  "editor.rulers": [80, 120],
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.rulers": [80],
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.rulers": [80],
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.printWidth": 80,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

CSS/SCSS設定

{
  "[css]": {
    "editor.rulers": [120],
    "editor.wordWrap": "bounded",
    "editor.wordWrapColumn": 120
  },
  "[scss]": {
    "editor.rulers": [120]
  }
}

バックエンド開発

Python Django プロジェクト

{
  "[python]": {
    "editor.rulers": [79, 88],
    "editor.formatOnSave": true,
    "python.formatting.provider": "black"
  },
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": [
    "--max-line-length=88"
  ]
}

Node.js プロジェクト

{
  "[javascript]": {
    "editor.rulers": [80],
    "editor.formatOnSave": true
  },
  "eslint.workingDirectories": ["./"],
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

文書作成

技術文書・ブログ執筆

{
  "[markdown]": {
    "editor.rulers": [80, 100],
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 100,
    "editor.quickSuggestions": false
  },
  "markdown.preview.scrollPreviewWithEditor": true,
  "markdown.preview.scrollEditorWithPreview": true
}

パフォーマンスとアクセシビリティの考慮

パフォーマンス面での注意点

大きなファイルでの設定

{
  "editor.rulers": [80],
  "editor.wordWrap": "off",  // 大きなファイルでは無効に
  "editor.largeFileOptimizations": true
}

メモリ使用量の最適化

{
  "editor.suggest.localityBonus": true,
  "editor.suggest.shareSuggestSelections": false,
  "editor.wordBasedSuggestions": false
}

アクセシビリティの向上

色覚に配慮したルーラー色

{
  "editor.rulers": [
    {
      "column": 80,
      "color": "#666666"  // 高コントラスト
    }
  ]
}

拡大表示での見やすさ

{
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5,
  "editor.rulers": [60]  // フォントサイズに応じて調整
}

トラブルシューティング

よくある問題と解決方法

ルーラーが表示されない

原因と解決方法

  1. 設定の確認：editor.rulersが正しく設定されているか
  2. テーマの問題：一部のテーマでルーラーが見えにくい場合がある
  3. ファイル種別：一部のファイル形式で表示されない場合

解決例

{
  "editor.rulers": [
    {
      "column": 80,
      "color": "#ff0000"  // 明確な色で確認
    }
  ]
}

文字数がずれる

タブとスペースの混在

{
  "editor.detectIndentation": false,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all"  // 空白文字を表示
}

全角文字の扱い

日本語を含むコードの場合

{
  "editor.rulers": [40, 80],  // 全角文字を考慮して調整
  "[markdown]": {
    "editor.rulers": [50, 100]
  }
}

デバッグ用の設定

文字数確認用の設定

{
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true,
  "editor.renderLineHighlight": "all",
  "editor.showFoldingControls": "always"
}

まとめ

VS Codeで1行の文字数を確認し、制限を守るための方法をまとめました：

基本的な確認方法

  • ステータスバーの Col で現在位置を確認
  • ルーラー機能で視覚的なガイドライン表示
  • 自動折り返しで長い行を読みやすく

高度な機能

  • ESLint/Prettier で自動的な文字数制限
  • 言語別設定 で最適な制限値
  • チーム統一設定 で開発環境の標準化

実用的な設定例

すぐ使える基本設定

{
  "editor.rulers": [80, 120],
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  "editor.formatOnSave": true
}

チーム開発向け設定

{
  "editor.rulers": [80],
  "[javascript]": {
    "editor.rulers": [80]
  },
  "[python]": {
    "editor.rulers": [79]
  },
  "[markdown]": {
    "editor.rulers": [100],
    "editor.wordWrap": "on"
  }
}

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました