Visual Studio Codeエディタ
Visual Studio Code（以下、VS Code）は、マイクロソフト社がオープンソースで開発しているエディターです。公式Webサイト から無料でダウンロードして利用できます。
エディタは他にも、メモ帳、Notepad++、Sublime Text、サクラエディタなどがありますが、Pythonの開発用であればVSCodeが最適だと思います。
インストール
まず初めに下記の公式ダウンロードページにアクセスします。
https://code.visualstudio.com/download
ダウンロードが完了したらファイルを実行します。
使用許諾の画面が表示されたら［同意する］をチェックして［次へ］をクリックします。
インストール先を指定する画面が表示されたらそのまま［次へ］をクリックします。
インストール内容の確認画面が表示されるので、［インストール］をクリックするとインストールが開始します。（ここで日本語化拡張機能もインストールします
Webブラウザ版
Visual Studio Code(VS Code)のWebブラウザ版は、ブラウザから「https://vscode.dev/」にアクセスするだけで利用でき、インストールは不要です。
Google ChromeやMicrosoft Edgeでは「File System Access API」を介すことでローカルファイルの読み書きができるため、ローカルのファイルを編集することもできます。これによりChromebookといったマシンでもVS Codeが利用可能です。なお、ローカルファイルシステムへのアクセスができないWebブラウザを利用する際にも、ファイルをアップロードすることで利用でます。
Visual Studio Codeの使い方
ファイル作成
Visual Studio Code を起動し、エディタ画面が開いたら、左上の「ファイル」メニューから「新規ファイル」を選択するとコードを記述することができるファイルを作成できます。
コード（テキスト）の記述
プログラミング言語を選択するために、右下の「言語モードの選択」をクリックすると一覧が表示され、選択した言語でコードを自由に記述できます。
保存と実行
コードの記述が終わったら、ファイルを保存します。保存する際は、ファイル名と拡張子を入力して保存する必要があります。その後、ターミナルを開いて、適切なコマンドでコードを実行します。
便利な拡張機能
Auto Rename Tag
開始タグ、終了タグのどちらかを変更した際に、タグの名前を自動で変換してくれます。
それにより、タグの閉じ忘れやタグの変更ミスがなくなりマークアップ言語を使った作業が効率化されスムーズに作業できます。
Prettier
WEB制作だけでなく、WEB開発でも大人気の、コード整形フォーマッター「Prettier」です！
あらゆるプログラミング言語をサポートし、あらかじめ定義された一定のルールに従ってコードを自動整形することで、可読性を高め、スタイルに関連する問題を軽減できます。
細かい設定が可能で、自分が使いやすいように設定できます。
Live server
コーダーの方は、ほとんど使用していると言われるほど人気の拡張機能「Live Server」です。
ローカルでサーバーを瞬時に立ち上げ、ブラウザーに表示してくれる拡張機能です。
HTMLやCSSといったファイルのコードを更新すると、更新を検知して自動でブラウザーを更新してくれます！
windowsユーザーなら、保存するショートカットキー（ctrl+S）を押すだけで、ブラウザーの表示がリアルタイムで表示されます。
Python
今度はPython拡張機能をインストールします。
次にVS Codeを起動し、エクスプローラーで「PythonHello」フォルダーを新規作成します。
メニューから［ファイル］-［フォルダーを開く］を選択します。
「PythonHello」と表示されているフォルダーの部分に、マウスのカーソルを重ねると以下のようなツールバーが現れるので、以下のアイコン部分をクリックします。
テキストボックスが表示されるので、ファイル名「hello.py」を入力します。
コードを入力するエディター部分が表示されるので、以下のコードを入力し、Ctrl + S キーを押して保存します。
s='hello!'
print(s * 10)
input("Enterキーを押して終了します...")コードを実行するには、以下のようにエディター部分の右側にあるアイコン ▷ をクリックします。
結果は下のパネル部分に表示されます。
画面の中のエリアを確認
まずはVSCodeの画面の中のエリアを確認しましょう。
アクティビティバー、サイドバー、エディター、パネル、ステータスバーの5つの部分で構成されています。
画面左側のアクティビティバーにはアイコンが並んでいることを確認してください。
①アクティビティバー
画面の最も左側にあるアイコンの列で、上から次の順でアイコンが並んでいます。
①エクスプローラー 通常はこれを選択
②検索
③ソース管理
④実行とデバッグ
⑤拡張機能 インストール済の日本語やPythonなどの一覧が見れます。
⑥テスト
②サイドバー
アクティビティバーで選択した機能が表示される領域です。エクスプローラーではファイルやフォルダの一覧が表示されます。
アクティビティバーのアイコンを2回押すと非表示になります。
③エディター
ファイルを編集する主要なエリアです。現在開いているワークスペースやファイルの名前が表示されています。複数のファイルを同時に開いて編集することも可能です。
④パネル
エディターの下部に表示され、「ターミナル」「出力」「デバッグコンソール」「問題」などの情報が表示されます。ターミナルなどを表示するパネルエリアで、タブで切り替えることが可能です。
Pythonではターミナルで結果やエラーの確認などができます。
⑤ステータスバー
1番下の青い部分はステータスバーといいます。ここは現在開いているワークスペースの通知を表示したり、エンコードなどを表示してくれるエリアです。ファイルのステータス情報（文字コード、行数、ファイルのステータスなど）が表示されます。
メニューバー
画面上部にあり、
ファイル、編集、選択、表示、実行、ターミナル、ヘルプ
のメニューが配置されています。
コメント