Zenn
🍞

OS別 vscode のインストールから簡単な設定まで

2023/09/10に公開
tech

mac でのインストール

  • インストール方法はアプリケーションファイルをダウンロードして手動でインストールするか、パッケージマネージャーでインストールする方法などがあります。
  • 個人的にはパッケージマネージャーでインストールする方が何かと便利だと思っていますが、別にどちらでやっても構いません。

手動でインストール

  1. mac の cpu アーキテクチャが Intel か Apple silicon か確認する。
    ・確認方法は左上の🍎マークをクリックし、この Mac についてをクリック。
    ・画像のようにチップのところにアークテクチャが記載されている。

  2. vscode をインストールする
    ・公式サイトにアクセスし、下画像の赤枠内の "Other downloads" をクリック。

    ・下画像の場所に遷移するので、調べた CPU アーキテクチャに合わせた zip をクリックしダウンロードする。

    ・ダウンロードが完了したら、ダウンロードフォルダを開き、zip ファイル(下画像赤枠)をダブルクリックするとアプリケーションファイル(下画像緑枠)ができるのでこれをダブルクリックして完了。

  3. 最低限の拡張機能
    ・vscode を立ち上げたら左のサイドバーの拡張機能のアイコン(下図赤枠部分)をクリック、検索窓(下図緑枠部分)から拡張機能を検索してインストールする。

    ・あくまで個人的に思う最低限だが、以下3つは入れておいた方が便利だしモチベーションが上がる。

    1. Japanese Language Pack
      • 日本語化の拡張機能
    2. 外観テーマ
      • リンクから好みのテーマを探す。
    3. アイコン
      • リンクから好みのアイコンを探す。

  4. code コマンドの PATH を通す
    ・ターミナルに code コマンドを認識させることで、ターミナル上のカレントディレクトリをvscode で開くことができる。
    ・起動した vscode 上で command + shift + p を押してコマンド窓を開き、shell や path と入力すると shell Comman: Install 'code' command in PATH と出てくるのでクリックすると PATH が通る。

パッケージマネージャーでインストール

  1. homebrew が入っていなければインストールします。
    ・公式サイトからインストールコマンドをコピー

    ・インストールが終わるとターミナル上にbrewまでのPATHを通すコマンドが表示されるのでコピーして実行(2023/09/08時点だと以下２行)
(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/ユーザ名/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

※shellがbashの人は少し違うと思うので気をつけてください。
※ユーザー名のところは自分のユーザー名に変えてください。

  1. vscode をインストールする。
    ・公式サイトからインストールコマンドをコピー

    ・ターミナルを開いてコピーしたコマンドを貼り付け実行

    ・homebrew でインストールした場合は上図緑枠内にある通り、code コマンドは /opt/homebrew/bin/codeにリンクされるので個別にPATHを通す必要はありません。

windows でのインストール

  • windowos も mac 同様に、手動でインストールやパッケージマネージャーでのインストール方法があります。

手動でインストール

  1. windows の cpu アーキテクチャが x64 か x86 か Arm64 かを確認する。
    ・確認方法は winキー + xを押してシステムを押します。(下図赤線部)

    ・システムの種類というところにアーキテクチャの種類が出ているはずなので、自身のCPUにあった user installer をダウンロードしてください。(下図の場合はx64)

  2. vscode をインストールする。
    ・ダウンロードしたインストーラーをダブルクリックするとインストール画面が立ち上がります。以下の手順に沿ってインストールをしてください。
    ・同意するのチェックを入れ次へ。

    ・追加タスクの選択、必要だと思うものにチェックを入れれば良いですがPATHへの追加以外いらないと思います。

    ・インストールを押して再起動。

    ・拡張機能などは mac を同じですが、PATHは既に追加されているので追加する必要はありません。

パッケージマネージャーでインストールする

  1. winget のバージョンをアップデートする・
    ・windows のパッケージマネージャーは有名どころがいくつかありますが、windows 公式の winget を使います。
    ・winget は win10 以上であれば最初からインストールされています。
    ・Microsoft store を開き左サイドバーの下のほうにあるライブラリを押して、アプリインストーラーを探してください。
    ・アプリインストーラーの右側の下図の変更となっている箇所がアップデートできそうなアイコンなどになっていたらアップデートしてください。

    ・powershell を開き winget install -e --id Microsoft.VisualStudioCode --override '/SILENT /mergetasks="!runcode,addtopath"'のように入力します。
    ・--override 以降は手動インストールしていた際にチェックを入れていた追加タスクなどを記載します。追加タスクは以下のようになっています。
[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
Name: "quicklaunchicon"; Description: "{cm:CreateQuickLaunchIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked; OnlyBelowVersion: 0,6.1
Name: "addcontextmenufiles"; Description: "{cm:AddContextMenuFiles,{#NameShort}}"; GroupDescription: "{cm:Other}"; Flags: unchecked
Name: "addcontextmenufolders"; Description: "{cm:AddContextMenuFolders,{#NameShort}}"; GroupDescription: "{cm:Other}"; Flags: unchecked; Check: not (IsWindows11OrLater and QualityIsInsiders)
Name: "associatewithfiles"; Description: "{cm:AssociateWithFiles,{#NameShort}}"; GroupDescription: "{cm:Other}"
Name: "addtopath"; Description: "{cm:AddToPath}"; GroupDescription: "{cm:Other}"
Name: "runcode"; Description: "{cm:RunAfter,{#NameShort}}"; GroupDescription: "{cm:Other}"; Check: WizardSilent

・追加したいタスクの名前を /mergetasks= 以降に追記してください。
・以降の操作はこれまで同様です。

Discussion