【設定いらず】VSCodeを使って楽々プログラミングをしよう

Visual Studio Code(VSCode)はエディタの下にターミナル(コマンドプロンプト)が表示されているため、CLI操作が必要なときにとても便利です。初期設定を特にせずとも十分な機能が備わっているので、初心者でも簡単に使えます。

プログラミングに勤しむ人

あ〜プログラミング大変!
エディタ開いたりターミナル開いたり
デスクトップごちゃごちゃしちゃう!
マジ卍

VSCodeを使えば1画面で完結します


VisalStudioCode(VSCode)とは

VSCodeとは、プログラムを書くためのソフト(エディタ)の一種です。
エディタとは簡単に言うと、超高性能なメモ帳です。

お決まりの文字(例えばブログだと”h2″とか)を自動入力する補完機能であったり
プログラムを読みやすくするためのインデント(字下げ)を自動挿入してくれたりします。

また、VSCodeは拡張機能があり、ファイルの拡張子(.htmlとか)を認識して、最適な補完機能を自動で選んでくれます。

初期インストールのまま、ほとんど設定をせずともかなり便利な機能が備わっているので、初心者でも簡単に使いこなすことができますよ!!

VSCodeをインストールする

ダウンロードページはこちら↓
https://code.visualstudio.com/

Windows版、Mac版、Linux版などあるので、よしなに選択してインストールしてください。

日本語設定にする

最初にインストールすると英語の画面が表示されると思います。
基本的にプログラミングは英語との付き合いが長くなるので、そのまま使って慣れるのがベストですが
そもそも使えなきゃ意味がないので、英語が無理ならささっと日本語化しましょう。

VSCodeを開いて Ctrl(Command)+Shift+pを押して、コマンドパレットと呼ばれる設定画面を呼び出します。
次に、コマンドパレットの検索バーに「Configure Display Language」と入力して、言語設定画面を開きます。
「locale.json」というタブが開かれ、下記コードが書かれていると思います。
{
// Defines VS Code's display language.
// See https://go.microsoft.com/fwlink/?LinkId=761051 for a list of supported languages.
"locale":"en" // ←この部分が言語設定
}

localeが言語設定でして、今は「en(English)」に設定されています。
これを「ja」に書き換えると、日本語に変更されます。

VSCodeを一旦終了して、再度開いて確認します。

日本語に切り替わらないときは、日本語ファイルがインストールされていない

VSCodeを再起動しても日本語化されないときは、言語パックがインストールされていないと考えられます。

画像↓のように、「Value is not Accepted(意訳:値がわからん)」というエラーが表示されていたら、言語パックが無いです。

言語パックをインストールするには画面左のメニューバーから「マーケットプレイス」を選択肢、「japanese」と検索します
vscode-japanese-pack

これで日本語化が完了しました!!

VSCodeでターミナルを使う

次はVSCodeの一番の利点である、ターミナル(コマンドプロンプト)を表示させます。

RubyやPythonはプログラムを書いて、ターミナルから実行しないと確認出来ませんが
エディタとターミナルが別々のソフトなのでいちいち切り替えるのがめんどくさいですよね。。。

VSCodeなら、1画面に両方表示されるので、切り替える必要もなくストレスフリーにプログラムチェックが出来ます!!

画面上部メニューバー「表示」→「ターミナル」をクリックすると、エディタ下部にターミナルが表示されます。

vscode-terminal

5秒でHello World

こんな感じで、上部のエディタ画面にコードを書いて
下部のターミナルからプログラムを実行します。

例として、pythonでHello worldをしています。
爆速です。

vscode-helloworld

自動保存と自動整形

プログラムとは不思議なもので、保存しようとするとバグって消えがちです。

僕もWordで報告書を書いてる時によくやられてハゲそうになります。

こういった悪意ある嫌がらせ人的ミスを防ぐために、VSCodeには自動保存という素晴らしい機能があります。

設定はめちゃくちゃ簡単で、画面上部メニューバー「ファイル」→「自動保存」を選択するだけです。
vscode-autosave

素晴らしきかなVSCode。。。

自動整形

VSCodeは自動保存だけでなく、自動整形の機能もあります。
インデントや、文中のスペースもよしなに空けてくれるのでめちゃくちゃ捗ります。

こちらも設定は簡単でして
画面上部「設定」→「基本設定」を開いて
vscode-setting

「ユーザ設定」→「テキストエディタ」→「フォーマット」→「Format On Save」にチェックを入れるだけです!
vscode-auto-format

VSCodeは初期設定でもかなり高水準なエディタですが
多くの拡張機能があり、使っていく間に見つかった不便な点もどんどんカスタマイズしていくことが出来ます。

ガンガン使い込んで、自分なりのVSCode環境を作り上げて行きましょう!!

最強のプログラミング学習コンテンツ

本記事では、VSCodeというエディタを紹介しました。

VSCodeを使うことで、快適にプログラミングをする環境が整います。
が、快適な環境を手に入れても、プログラミングの知識が無ければ元も子もありませんね。

  • 実務で使えるプログラミングを学びたい方
  • プログラミングに興味があるが何から学んでいいかわからない方
  • Webアプリケーション開発をやってみたい方
  • 以前プログラミングに挫折した方
  • 手軽な価格でメンターをつけたい初心者の方
  • エンジニアを目指す第一歩を踏み出したい方

はぜひこちら↓の記事を読んでみてください

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新卒で入社前にロシアに飛ばされかけたので、内定を辞退し、なんやかんやWeb系エンジニアとして就職先が決まりました。飽き性で、ずっと同じ場所に住んでいると嫌になるので、色々なところを転々して旅しながら生きるのが夢です。