完全初心者のプログラミング学習記録(1)VS Codeの設定

こんにちは。

プログラミング完全初心者で40代中年の僕が、無謀にもこの年齢からプログラミングを学習してみようと思いました。

そのプログラミング学習の復習を兼ねて備忘録的にブログで残していきたいと思います。

プログラミングを学習しようと思った理由は、いくつかあります。

  • WordPressのデザインを独自にカスタマイズできるようになりたい
  • ブログに連載できるメインテーマとして使いたい
  • お金に変えられるスキルを身につけておきたい・・・

このブログを通じて、完全初心者がプログラミングを学習していく過程をお届けできたらと思っています。

今日やった事を明日にはすっかり忘れてしまう悲しき40代、、、どこまでやれるかわかりませんが、まずは頑張ってみようと思っております。オッサンのチャレンジが誰かのお役に立てれば幸いです。

では早速やっていきたいと思いますが、その前に学習環境を記載しておきます。

学習環境
  • MacBook Pro (15-inch, 2016)
  • mac OS:10.15
  • ブラウザ:Google Chrome
この記事を読んで得られる効果

プログラミングに使用するエディターアプリケーション「Visual Studio Code」の基本的な設定方法が理解できる

プログラミング学習記録(1)VS Codeの設定

それでは、今回のテーマは「Visual Studio Code(略称:VS Code)の設定」です。

「Visual Studio Code」はMicrosoftが無料で提供しているコードエディターです。

「Visual Studio Code」のダウンロード〜インストール

Googleで「Visual Studio Code」を検索します

 

無料ダウンロードのボタンをクリック

 

Macを選択

 

ダウンロードされたファイルを実行

 

アプリケーションファイルを「アプリケーション」フォルダにドラッグします

 

アプリケーションフォルダに入った「Visual Studio Code app」をダブルクリック

 

この画面が出たら、とりあえず「OK」をクリック

「システム環境設定」>「セキュリティとプライバシー」>「一般」を開く

下段に出ている「このまま開く」をクリック

続けて「開く」をクリック

「Visual Studio Code」の基本的な環境設定

「Visual Studio Code app」が起動します。

最初にWelcomeタブが出てきたら、閉じてしまってOK。

 

メニューバー>Code>Preferences>Settings をクリック

 

Commonly Usedの項目からいくつか設定

Auto Save>afterDelay
ファイル編集後に自動保存してくれます

 

Font Size>14

 

Tab Size>2
Tabを押した時に何文字分の空白が入るかの設定

 

Word Wrap>on
行を折り返して表示してくれる設定

 

プログラミング用フォント設定

Ricty Diminished というプログラミング用のフォントをインストールします

Regularを選びます。

 

ダウンロードします。

ダウンロードされたファイルを実行

 

「フォントをインストール」をクリック

使用するフォントを変更します。
Font Family>「Ricty Diminished」と入力

 

フォントのインストール確認をします。
メニューバー>File>New Fileを選択して、新規ページを起動します。

 

全角スペースを入力した時に、丸いマークが出てくればOK
プログラムは基本的に半角英数で書いていきます。
スペースも半角になるので、全角でスペースを取ってしまうとエラーの原因になるため、このように全角スペースが視覚的にわかりやすいフォントが望ましいということです。

 

以上、VS Codeの基本設定でした。

補足:ファイルの拡張子を表示させる設定

プログラミングでは、様々なファイルの拡張子が重要になるので、予めファイルの拡張子がわかる状態にしておくと便利です。

メニューバー>Finder>環境設定

 

すべてのファイル名拡張子を表示にチェックを入れておく

 

今日の復習はここまでです。

最後までご覧いただきありがとうございました。