【設定不要】最強のエディタVScodeをインストールする

VisalStudioCode(VSCode)とは

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

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

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

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

 

VSCodeをインストールする

ダウンロードページはこちら↓

https://code.visualstudio.com/

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

 

日本語設定にする

最初にインストールすると英語の画面が表示されると思います。

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

 

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環境を作り上げて行きましょう!!

コメントを残す

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

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