インストール - VSCode

提供：MochiuWiki : SUSE, EC, PCB
2022年1月23日 (日) 19:05時点におけるWiki (トーク | 投稿記録)による版
ナビゲーションに移動 検索に移動

VSCodeのインストール

リポジトリを登録してインストール

まず、VSCodeのリポジトリと鍵を追加するため、以下のコマンドを入力する。

# CentOS
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

# SUSE
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ntype=rpm-md\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/zypp/repos.d/vscode.repo'


アップデート可能なパッケージの一覧を表示する。

# CentOS
sudo yum check-update

# SUSE
sudo zypper list-updates


以下のコマンドを入力して、VSCodeをインストールする。

# CentOS
sudo yum install code

# SUSE
sudo zypper refresh
sudo zypper install code


codeコマンドがPATH環境変数に含まれているかどうか確認する。

which code


手動でインストール

Microsoftの公式Webサイトにアクセスして、VSCodeの64bitのTarballファイルをダウンロードする。
ダウンロードしたファイルを解凍する。

tar xf code-stable-x64-<バージョン>.tar.gz


解凍したディレクトリを任意のディレクトリに配置する。

mv code-stable-x64-<バージョン> VSCode
mv VSCode <VSCodeのインストールディレクトリ>


VSCodeのデスクトップエントリファイルを作成する。

vi ~/.local/share/applications/VSCode.desktop



# ~/.local/share/applications/VSCode.desktopファイル

[Desktop Entry]
Name=Visual Studio Code
Comment=Code Editing. Redefined.
GenericName=Text Editor
Exec=/<VSCodeのインストールディレクトリ>/bin/code --unity-launch %F
Icon=com.visualstudio.code
Type=Application
StartupNotify=false
StartupWMClass=Code
Categories=Utility;TextEditor;Development;IDE;
MimeType=text/plain;inode/directory;application/x-code-workspace;
Actions=new-empty-window;
Keywords=vscode;

[Desktop Action new-empty-window]
Name=New Empty Window
Exec=/<VSCodeのインストールディレクトリ>/bin/code --new-window %F
Icon=com.visualstudio.code



vi ~/.local/share/applications/VSCode-url-handler.desktop



# ~/.local/share/applications/VSCode-url-handler.desktopファイル

[Desktop Entry]
Type=Application
Name=Visual Studio Code - URL Handler
GenericName=Text Editor
Comment=Code Editing. Redefined.
Exec=/<VSCodeのインストールディレクトリ>/bin/code --open-url %U
Icon=com.visualstudio.code
Categories=Utility;TextEditor;Development;IDE;
MimeType=x-scheme-handler/vscode;
Keywords=vscode;
NoDisplay=true
StartupNotify=true



スーパーユーザ権限での実行

root権限でVSCodeを実行する場合は、以下のコマンドで実行する。
なお、以下のVSCode-Rootディレクトリは既存のディレクトリなら何でもよい。

code --user-data-dir='VSCode-Root'



C/C++拡張機能

C/C++拡張機能のインストール

  1. VS Codeメイン画面左の拡張機能のボタンを押下する。
  2. 検索欄に"C/C++"と入力して、C/C++拡張機能をインストールする。
  3. [再読み込み]ボタンを押下する。


インテリセンスの設定

コードナビゲーションや自動補完の機能を有効にする。(この設定が無くても、ビルドおよびデバッグ可能である)

  1. まず、事前にC/C++プロジェクトのディレクトリを開く。
  2. 次に、[Ctrl] + [Shift] + [P]キーを同時押下して、コマンドパレットを開く。
  3. "C/Cpp: Edit configurations..."を選択する。
    この時、C/C++プロジェクトの.vscodeディレクトリに、c_cpp_properties.jsonファイルが自動的に作成される。
    ただし、.vscodeディレクトリが存在しない場合は、プロジェクトディレクトリに自動で作成される。
  4. c_cpp_properties.jsonファイルを、以下の内容のように編集する。
 "ファイル名": "c_cpp_properties.jsonファイル",
 
 {
    "version": 4,
    "configurations": [
       {
          "name": "Linux64",       // その他: "Win32", "Mac"も指定可能
          "includePath": [
             "${workspaceFolder}",
             "/home/hoge/include"  // インクルードするファイルがあるディレクトリを追加
          ],
          "defines": [  // 使用するプリプロセッサの定義
             "_DEBUG",
             "UNICODE",
             "_UNICODE",
             "PI=3.14159"
          ],
          // "windowsSdkVersion": "8.1",       // Windowsの場合、Windows SDKインクルードパスのバージョン
          "compilerPath": "/usr/bin/gcc",      // 使用するコンパイラのパス
          "cStandard": "c17",                  // その他: "c99", "c17", "c23"等も指定可能
          "cppStandard": "c++17",              // その他: "C++11", "C++14", "C++20"等も指定可能
          "compilerArgs": [                    // コンパイラに渡す引数
             "-w",
             "-std=gnu++17",
             "-Wno-error=narrowing"
          ],
          "intelliSenseMode": "linux-gcc-x64"  // その他: "windows-msvc-x64", "msvc-x64", "macos-clang-x64", "clang-x64"等も指定可能
       }
    ]
 }


ビルドの設定

tasks.jsonファイルを作成して編集する。

  1. [Ctrl] + [Shift] + [P]キーを同時押下して、コマンドパレットを開く。
  2. [Tasks: Configure Task]を選択する。
  3. [テンプレートから tasks.json を生成]を選択する。
  4. [Others 任意の外部コマンドを実行する例]を選択する。
  5. プロジェクトディレクトリの.vscodeディレクトリに、tasks.jsonファイルが自動的に作成される。
  6. tasks.jsonファイルを、以下の内容のように編集する。
 "ファイル名": "task.jsonファイル",
 
 {
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
       {
          "label": "sample",           // プロジェクトのファイル名を指定
          "type": "shell",
          "command": "g++",
          "args": ["-g", "main.cpp"],  // プログラムのエントリポイントがあるcppファイル名を指定
          "group": {
             "kind": "build",
             "isDefault": true
          }
       }
    ]
 }


最後に、ビルドができるかどうか確認する。
なお、ビルドのショートカットは、[Ctrl] + [Shift] + [B]キーを同時押下することでも可能である。

デバッグの設定

launch.jsonファイルを作成して編集する。

  1. VS Codeメイン画面左のデバッグボタンを選択する。（[Ctrl] + [Shift] + [D]キーを同時押下しても可能である）
  2. デバッグ画面上部にある"構成がありません"と表示されているプルダウンの右側にある歯車を選択する。
  3. [環境の選択]プルダウンから、[C++ (GDB/LLDB)]を選択する。
  4. C/C++プロジェクトの.vscodeディレクトリに、launch.jsonファイルが自動的に作成される。
  5. launch.jsonファイルを、以下の内容のように編集する。
    launch.jsonファイルの詳細は、C/C++拡張機能のGithubを参照すること。
 "ファイル名": "launch.jsonファイル",
 
 {
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       {
          "name": "(gdb) Launch",
          "type": "cppdbg",
          "request": "launch",
          "program": "${workspaceRoot}/Sample",  // 出力される実行ファイル名またはライブラリファイル名
          "args": [],
          "environment": [],
          "cwd": "${workspaceFolder}",
          "stopAtEntry": false,
          "externalConsole": true,               // 外部ターミナルを使用する場合はtrue
          "MIMode": "gdb",                       // その他: "lldb"も指定可能
          "miDebuggerPath": "/usr/bin/gdb",      // 使用するデバッガのパス
          "setupCommands": [
             {
                "description": "Enable pretty-printing for gdb",
                "text": "-enable-pretty-printing",
                "ignoreFailures": true
             }
          ]
       }
    ]
 }


デバッグが実行できるかどうか確認する。
なお、デバッグの実行は、[F5]キーの押下、[デバック]メニューバー - [デバッグの開始]を選択、[デバッグ]画面上部にある[▶]でも可能である。


拡張機能 : Markdown

VSCodeのメイン画面左にある[拡張機能]から、"Markdown All in One"をインストールする。

Markdownファイルの編集中において、[Ctrl] + [Shift] + [P]キーを同時押下して、[Markdown: プレビューを横に表示]を選択することで、
MArkdownのプレビュー画面が開く。


Dolphinとの連携

Dolphinにコンテキストメニューを追加する場合、まず、以下のディレクトリに移動する。

cd Open_in_VSCode.desktop ~/.local/share/kservices5
または
cd Open_in_VSCode.desktop /usr/share/kservices5


例えば、ファイルを右クリックしてVSCodeで開く機能を追加するには、以下のファイルを作成する。

vi Open_in_VSCode.desktop



[Desktop Entry]
Type=Service
Name=Open in VS Code
ServiceTypes=KonqPopupMenu/Plugin
MimeType=inode/directory
X-KDE-Priority=TopLevel
Actions=OpenInVSCode;OpenInVSCode_Root

[Desktop Action OpenInVSCode]
Name=Open in VS Code
Icon=com.visualstudio.code
Exec=code %u 

[Desktop Action OpenInVSCode_Root]
Name=Open in VS Code as SuperUser
Icon=com.visualstudio.code
Exec=code --user-data-dir=/home/<ユーザ名>/Program/VScode_root_project %u



VS Codeの設定

タブをPreview modeで開かない

新しいファイルを開く時に現在のタブが上書きされて表示される場合がある。

上書きされるタブはファイルをPreview modeで開いているため、続けて他のファイルを開く場合、以前のタブを上書きして表示する。
タブがPreview modeで開かれている場合、タブのタイトルが斜体になる。

この挙動を回避するためには、以下のいずれかを行う。

  • ファイルをダブルクリックして開く
  • settings.jsonファイルに、"workbench.editor.enablePreview": falseを追記する。



「http://mochiuwiki.e2.valueserver.jp/index.php?title=インストール_-_VSCode&oldid=4982」から取得