Ciao！みなさんこんにちは！このブログでは主に
(1)pythonデータ解析,
(2)DTM音楽作成,
(3)お料理,
(4)博士転職
の4つのトピックについて発信しています。
今日は定番エディタ「Visual Studio Code (VSCode)」をMacにインストールする方法を紹介します！私はこれまでAtomというソースコードエディタを使っていましたが、Atomの開発終了に伴ってVSCodeに乗り換えることにしました。VSCodeはソースコードの編集だけでなく、実行やデバックができる便利なエディタなのでインストールして使いこなしていきたいと思います。
この記事を読めば、 MacにVSCodeをインストールする方法がわかります！一つ一つ説明しますので、一緒にやってみましょう！
この記事はこんな人におすすめ
- MacでVSCodeを使いたい！
- プログラミングを快適に行いたい
- Pythonのコードを快適に書きたい
Abstract | Visual Studio Code (VSCode)で快適なコーディングを！
Visual Studio Code (VSCode)はMicrosoftが開発しているフリーかつオープンソースのソースコードエディタです。VSCodeは高度な補完・ハイライト機能を用いた快適なソースコードの編集だけにとどまらず、部分実行や全体実行といったデバッグに便利な機能も備えた統合開発環境です。外見の変更やextensionと呼ばれる拡張機能を追加することで、使い手それぞれの好みに合わせてカスタマイズすることができます。
私自身はAtomからの乗り換えで、VSCodeを使い始めたばかりです。これを機にインストールして一緒に使いこなしていきましょう！
Background | Atomから乗り換え！VSCodeでできること
私はこれまでPython等のコードを書く際にAtomというエディタを使っていました。しかしAtomが2022年末に開発終了となることに伴い、Visual Studio Code (VSCode)に移行したいと思います。そこで今回はVSCodeのインストール方法とPythonを動かすための最小限のセットアップをご紹介します。便利なカスタマイズは次回以降にご紹介します。
Atomエディタの開発終了
ところが、Atomエディタは2022年12月15日で開発終了となりました。開発終了に伴ってセキュリティ関連のアップデートなどもなくなるので、別のエディタに乗り換える必要があります。Atomからの乗り換え先として、利便性が高くフリーで使えて利用者が多いVSCodeに移行しようと考えています。
ちなみにAtomエディタのインストール方法とカスタマイズ方法は以下の過去記事で紹介しています。
- python入門講座 | pythonを使ってみよう3-1(Atomエディタのインストール方法)
- python入門講座 | pythonを使ってみよう3-2(Atomエディタのおすすめカスタマイズ方法)
VSCodeでできること
VSCodeはMicrosoftが開発しているWindows、Linux、macOS、web用のソースコードエディタで、フリーかつオープンソースとしてリリースされています。VSCodeには、補完やハイライト機能などを備えた高機能エディタとしての側面に加え、コードの全体実行やデバックのための部分実行などが行える統合開発環境としての機能があります。すなわち
- ソースコードを作成・編集する
- 書いたソースコード全体を実行する
- 書いたソースコードをデバックする
といったことができます。また、extensionと呼ばれる拡張機能を追加することで、他にもさまざまなタスクを実行できるようになります。もちろん、外見も好みに合わせて変更することができます。
Method | VSCodeをMacにインストールする方法
ここからはVisual Studio Code (VSCode)をMacにインストールする方法をご説明します。
VSCodeのインストール
VSCodeのインストール方法です。それぞれのOS用にAppファイルがzipされたものが用意されています。
- zipファイルをダウンロード
- zipファイルを解凍
- Appファイルをアプリケーションフォルダに移動
- Appファイルを実行
という手順となります。
VSCodeのzipファイルをダウンロード
VSCodeのダウンロードページに行きます(図1)。以下のリンクもしくはご自身で検索してください。
ダウンロードページで、ご自分の環境に沿ったファイルをダウンロードします。Macの場合、Intelチップ用とMチップ用が用意されているので、適したほうを選びます(図1)。
VSCodeのzipファイルを解凍
ダウンロードされたzipファイルを解凍します(図2)。
Appファイルをアプリケーションフォルダに移動
zipファイルを解答すると「Visual Studio Code.app」というファイルが出現します(図3)。このファイルを「アプリケーションフォルダ」に移動します。
Finderで移動しても構いませんが、ターミナルを使って行うこともできます。ターミナルを開いて以下のようにコマンドを実行します。
cd ~/Download
mv Visual\ Studio\ Code.app /ApplicationsAppファイルを実行
Visual Studio Code.appを実行してVSCodeを開きます。アイコンをクリックするか、ターミナルなら以下を実行します。
open /Applications Visual\ Studio\ Code.app実行するかどうかの確認画面がポップしますので、開くをクリックして開きます(図4)。
VSCodeの基本設定
VSCodeを開いたらまずは基本的な設定を行っていきましょう。
外見(テーマ)の設定
外見の設定を行います。VSCodeを初めて開くと「Get Started」のページが立ち上がり、そこで外見の設定を行うことができます(図5)。「Browse Color Themes」もしくは「See More Themes…」をクリックすると用意されている様々なテーマから選択することができます。
Pythonのための最小限の設定 | Python Extensionのインストール
VSCodeでPythonを動かすための最小限の設定を行います（その他便利なextensionは次回以降に扱います）。VSCodeでPythonを動かすためにPythonというExtensionをインストールします。
図6のように操作します。まず、VSCodeウィンドウ左側のバーの一番下の四角形が並んだアイコンをクリックします(図6①)。次に、左側上部の検索まどで「python」を検索します(図6②)。Microsoft公式の「Python」extensionがあるのでクリックして選択します(図6③)。右の画面にPython extensionの説明画面が出てくるので、「install」をクリックしてインストールします(図6④)。
これで最低限、VSCodeでPythonを実行できるようになります。
ターミナルからVSCodeを開けるようにする
ターミナルからVSCodeが開けると便利なので、その設定をしていきます。VSCodeは、ターミナルに「code」と入力するだけで立ち上げられるように設定することができます。具体的には「code」というコマンドがPATH(/usr/local/bin)に追加されます。
まず、VSCodeの画面上で「command + shift + P」のキーを押します。すると、図7のような検索ウィンドウがVSCode画面上部に出現します。ここに「shell」と入力します。すると
Shell Command: Install 'code' command in PATHが表示されるので、それをクリックします(図7)。
成功すると図8のようなウィンドウがポップします。
ターミナルからVSCodeを立ち上げる方法
これでターミナル上で
codeを実行するだけでVSCodeが起動するようになります。
また、Pythonソースコードのファイルを開きたい場合は、
code hogehoge.pyを実行するとVSCodeでファイルを開くことができます。「hogehoge.py」が既に存在する場合はファイルが開かれ、存在しない場合は新規作成されます。
codeコマンドが使えることの確認方法
ターミナルで「code」コマンドが使えるようになっていることを確認することができます。
which codeを実行すると「/usr/local/bin/code」が返ってきます。また、
ls /usr/local/binを実行すると「code」が見つかります。もちろん
codeを実行してみてVSCodeのウィンドウが立ち上がることを確認しても構いません。
codeコマンド登録エラーの対処法(EACCES: permission denied unlink ‘usr/local/bin’)
「Shell Command: Install ‘code’ command in PATH」をクリックした結果、図9のように
EACCES: permission denied unlink 'usr/local/bin'というメッセージがポップする場合があります。これは「usr/local/bin」を操作する権限がユーザーに与えられていないために発生するので、権限を与えてからリトライします。
ターミナルでユーザーに/usr/local/binの所有権を付与
まずはターミナルで、
sudo chown -R YOURNAME /usr/local/binを実行します。YOURNAMEのところはご自身のユーザー名に変更してください(図10)。パスワードが要求されるので入力してください。実行すると/usr/local/binの所有権がユーザーに付与されます。
codeコマンド登録を再度実行
/usr/local/binの所有権がユーザーに付与できたら、VSCodeで図7の操作を再度実行します。
- VSCodeの画面上で「command + shift + P」を同時押し
- 画面上部の検索窓に「shell」と入力
- 「Shell Command: Install ‘code’ command in PATH」をクリック
今度は図8の画面がポップしてcodeコマンドの登録ができます。
codeコマンドが「command not found」エラーとなる場合
上記のようにVSCodeのコマンドパレットからcodeコマンドを登録しても、しばらくするとcodeコマンドが通らなくなる場合があります。具体的にはcodeコマンドを実行しても
zsh: command not found: code
というエラーが出てVSCodeが立ち上がりません。
このようなエラーへの対処法を別記事
にまとめました。もし上記のようなエラーに直面した場合はこちらをご参照ください。
ウィンドウのtrust設定
初めてVSCodeでファイルを開くと、図11のように画面上部に
Restricted Mode is intended for safe code browsing ....
というメッセージが出現することがあります。後述のResultの章で「code hello_world.py」を実行すると図11のような画面になるはずです。図11の画面上部のメッセージは「現在閲覧しているソースコードはtrustされていないので、Ristricted Modeで開いている」という意味です。
Ristricted Mode
Ristricted Modeでは、以下のような制限が施行されています。
- コードの実行ができない
- デバッグが実行できない
- Extensionが使えないもしくは制限される
このように制限することで、例えばどこかからダウンロードした不審なコードを実行してしまうことを防ぐことができます。
ウィンドウのtrust
自分でコードを書いて実行する操作をしたいので、ウィンドウをtrustしておく必要があります。TrustするとRistricted Modeの制限はなくなります。特定のフォルダのみtrustすることができるので、例えば
- 自分でPythonを書くフォルダ→trustする
- ダウンロードフォルダ→trustしない
といった設定ができます。PC上のすべての領域をtrustしてしまうことも可能です。以下で設定方法を見ていきます。
現在の画面をtrust
図11の上部のメッセージで「Manage」をクリックすると図12の画面が開きます。この画面では画面上部に「You are in Restricted Mode」と書いてあるのでRestricted Modeになっていることがわかります。この画面で「Trust」をクリックすると、このウィンドウがtrustされます(図12)。
フォルダをtrust設定
VSCodeでファイルを開くたびにtrustするのは面倒なので、フォルダごとtrust設定をしておいて、そのフォルダの中のファイルを開いた場合は最初からtrustにすることができます。まずは図12の画面で左下の「Add Folder」をクリックします。
するとVSCode上でFinderウィンドウが出現します(図13)。ここでtrustしたいフォルダを選択することができます。例えば、特定のフォルダのみをtrustする場合はそのフォルダを選択(図13①)することができます。ホーム(「~」すなわち「/Usrs/YOURNAME」)以下すべてをtrustする場合はユーザーフォルダを選択することもできます(図13②)。また、PC内のすべて（すなわち「/」以下）をtrustする場合は一番上の階層を選択することもできます(図13①)。フォルダを選択したら右下の「Trust Folder」をクリックします。
Trust設定されたフォルダの確認・編集・削除
Trust設定されたフォルダは図14のように表示されます。登録されたフォルダを編集したいとき、trust設定を解除したいときは右の方のアイコンから編集できます。
Workspace Trust画面（Trust設定画面）の開き方
一度trust設定を行うと、図11の上部のメッセージは現れなくなります。メッセージが現れなくなってからもTrust設定を変更することは可能です。図15のように左下の歯車アイコンをクリックすると、「Manage Workspace Trust」の行があるのでそれをクリックすると「Workspace Trust」の画面を開くことができます。
Result | 実際にPythonを書いてみる
では実際にVSCode上でPythonを書いて実行してみましょう。
ターミナルからソースコードの新規ファイルを開く
ターミナルで適当なディレクトリに移動して
code hello_world.pyを実行します。後で「hello_world.py」を保存するとこのディレクトリに保存されます。
VSCodeが開き、hello_world.pyのまっさらな画面が出てきます(図11)。もし図11のように画面上部に「Restricted Mode is intended for safe code browsing …. 」というメッセージが現れたら前述の「ウィンドウのtrust設定」をしておきましょう。
ソースコードの編集
hello_world.pyを編集して、実行すると「Hello, world!」と出力されるコードを書きます。図16のように
print("Hello, World!")が書いてあればOKです。
VSCodeでソースコードを実行する
VSCodeはコードの編集ができるだけではなく実行ができます。VSCode上で実行してみましょう。右上の再生ボタンを押すとコードが実行されます。図17のように画面下部に実行結果が表示されます。
実行に使うPython環境を変更する
Python環境が複数存在する場合、実行に使うPython環境を変更することができます。図18のように、画面下部のバーの右の方に現在使っているPython環境（この例では「3.9.13 (‘base’: conda)」）が表示されています。この部分をクリックすると、画面上部にPython環境を選択する画面が現れます(図18②)。実行に使いたいPython環境をクリックすれば変更できます。
なお、Anacondaを使ってPython環境を構築・管理する方法は過去記事にありますのでご参照ください。
- python入門講座 | Anacondaでpython3をMチップMacにインストールする方法
- python入門講座｜python環境構築(python3.9をIntel Macにインストールしよう！)
- python入門講座｜python環境構築(python3.9をM1 Macにインストールしよう！)
Conclusion | まとめ
最後までご覧頂きありがとうございます！
MacにVisual Studio Code (VSCode)をインストールし、Pythonコードを実行できるようにする方法をご紹介しました！
VSCodeはコードの編集だけでなく、コード全体を実行したり部分的に実行したりデバックしたりできる高機能なコードエディタです。私は長年使っていたAtomエディタの開発終了に伴って使い始めることになりましたが、これから使いこなせるようになっていきたいと思います。
以上「python入門講座 | 定番エディタ「Visual Studio Code」のインストール方法」でした！
またお会いしましょう！Ciao！
References | 参考
以下の外部サイトを参考にしました。
- Macでのセットアップ方法: https://code.visualstudio.com/docs/setup/mac