今回はテキストエディタ「VScode」のステータスバーについて説明します。
そもそもステータスバーって何？
ステータスバーはVScodeの下部に表示されています。
デフォルトのテーマだと水色で表示されている箇所です。
ここでは、文字コードや改行コード、開発しているプログラミング言語の指定などを行うことができます。
便利な機能がたくさんありますので、しっかり最後まで見ていきましょう。
ステータスバーに表示する内容の変更について
ステータスバーの上で右クリックをクリックすると、メニューが表示されます。
このメニューでステータスバーに表示する内容のオンとオフを切り替えることができます。
メニューの中で、項目の左にチェックが入っているものがステータスバーに表示される項目です。
ステータスバーの項目は左右に表示されている
ステータスバーの中の表示ですが、右側に表示される項目と左側に表示される項目があります。
それぞれの項目を次項で見ていきましょう。
ステータスバー それぞれの機能
それでは、ステータスバーに表示されているアイコンを左から順番に見ていきたいと思います。
問題
ステータスバーの右側に○と△があり、✕や！が中に書かれている箇所です。
この「問題」の箇所をクリックしてみましょう。
コードを入力するエリアの下部に新しいエリアが表示されます。
ここでは、
- 問題
- 出力
- デバックコンソール
- ターミナル
を扱うことができます。
「出力」や「デバックコンソール」、「ターミナル」については、プログラミングの学習を進めて行く中で学ぶ機能です。
プログラミング初学者の人は、これらの機能を最初から学ぶ必要はありません。
ただ、「問題」については覚えておきましょう。
「問題」は、スペルミスなどコードの中に問題がある時に教えてくれて、解決策を表示してくれる機能になります。
特に勉強を始めたばかりの頃はスペルミスや、全角スペースによるエラーなどをよく起こします。
この「問題」でそれぞれを解決することができます。
カーソルの位置
次は右側のアイコンを順番に見ていきます。
赤枠で囲った箇所です。
現在は「行1、列1」と表示されていますが、これはカーソルの位置になります。
例えば以下の画像のような文字を入力したとします。
カーソルは「頑張りましょう」の後ろにあります（縦棒で表示されています）。
この時にステータスバーを確認してみると、
「行2、列18」と表示が変わったのが確認できますね。
カーソルが移動すると、この数値が変わりカーソルの位置を教えてくれます。
最初はあまり見ることはないかもしれませんが、コードが長くなると重宝する機能です。
最初にうちから、覚えておくと良いでしょう。
インデント
次の項目は、「インデント」になります。
現在は「スペース:2」と表示されている箇所です。
インデントというのは字下げの意味で、プログラミングコードはインデントを使いながら書いていきます(VScodeの場合は自動でインデントしてくれます)。
このインデントの量を今表示しているのです。
「スペース:2」であればインデントの時の字下げの量がスペース2個分となります。
このインデントは設定で変更することができますが、「スペース:2」で何も問題ないです。
「スペース:2」または「スペース:4」で使うことが多いですが、これを変更したからといって見た目以外に大きな影響はなく、どちらかと言うと好みの問題になります。
プログラミング学習を始めたばかりの人は、とりあえず初期設定のままで大丈夫です。
文字コード
次は「文字コード」です。
VScodeの場合はデフォルトで「UTF-8」とという文字コードが表示されていると思います。
これからHTMLやCSS、javascriptを勉強する人は「UTF-8」のままで問題ないです。
文字コードが違っていると文字化けの原因になったりしますが、HTMLなどのプログラミング言語では、ほとんどUTF-8が使われています。
最初はあまり気にしなくても大丈夫です。
改行コード
続いて「改行コード」です。
改行コードというのは、改行のデータみたいなもので、
- macOS(またはLinux)の場合はLF
- windowsの場合はCRLF
になります。
これも最初は気にしなくて大丈夫です。
VScodeではデフォルトでパソコンの環境に合った設定になっていると思います。
言語モード
その次は「言語モード」です。
ここには、今開いているファイルで使っているプログラミング言語が表示されています。
自動で言語を認識する機能もVScodeにはありますが、保存したファイルの拡張子を見て言語を判別します。
HTMLであれば、ファイルの拡張子が「.html」になるので、その拡張子を見ているわけです。
この言語モードでは、プログラミング言語に合わせた色分けや、予測文字などの表示を行ってくれています。
手動で設定することもできますが、ファイルを保存して拡張子が正しくなっていれば手動で設定することもなくります。
フィードバックと通知
最後は「フィードバック」と「通知」です。
「フィードバック」は人の形とディスプレイが表示されているようなアイコンで、VScodeでバグが合った場合や、何か意見などがあれば連絡できる機能です。
「通知」はベルのアイコンの方です。
何か通知がある時には、このベルの形が丸（●）の形になります。
まとめ
いかがだったでしょうか？
さりげなく表示されているステータスバーにも便利な機能が盛り込まれていることが分かったかなと思います。
最初は全てを把握する必要もないので、自分にとって必要そうなものから見ていくと良いでしょう。
何か気になることがあれば、検索すると答えが見つかりますのでその都度覚えていくと良いと思います。
コメント