xTop page

Visual Studio Code (VSC)

　VSCはWindows, macOS, Linuxで動くマルチプラットフォームのエディタです。

重要な共通操作

• コマンドパレット: Ctrl + Shift + P または Command + Shift + P
• 拡大表示: Ctrl + ;
  縮小表示: Ctrl + -
  

拡張機能の例

• VSCカスタマイズ
  Japanese Language Pack (Microsoft): 日本語化
  zenkaku: 半角と全角スペースを区別できるように表示 
  Theme: VSC theme
  Material Icon Theme: カスタムアイコン
  vscode-icons:
  Vim: vim emulator
   
• プログラミング言語開発支援: 
  python (Microsoft): コードの色分け、自動インデント、Jupyterプログラム開発
    Jupyter機能を使う場合、pipで ipykernel をインストールする必要がある
  HTML CSS Support: 
  HTML Preview:
  ESLint: Javascript lint
  C/C++ (Microsoft)
  Modern Fortran
  PowerShell (Mchicrosoft):
  LaTeX
  Tex Preview
  VASP Support:
  VASP Syntax Suport:
   
• リモート編集
  Remote - SSH: リモートサーバがSSHに対応している場合にリモート編集が可能
  SFTP （Satiro Marra): リモートサーバがSFTP/FTPに対応している場合にリモート編集が可能
  　
• 入力支援
  Path Intellisense: パス入力の補完
    
• ファイル可視化・編集
  Edit CSV: CSVファイルの編集・テーブル可視化
  Excel Viewer:
  vscode-pdf: PDFファイルを表示
  json:
  YAML:
  Markdown PDF: MarkdownをPDFに変換
  　
• Git支援
  Git Graph: コミット履歴を視覚化
  　
• Webアプリ開発支援
  Live Server: 独自サーバを起動し、作成中のコードをブラウザで表示
  　
• 視認性改善
  indent: インデントを色分け
  indent-rainbow:
    
• 生成AI
  ChatGPT
  GitHub Copilot
  　
• Database
  SQLite:
  SQLite3 Editor:

SFTP （Satiro Marra)によるリモート編集

サーバでsftpが動いていることが前提

設定ファイルの作成

1. プロジェクトディレクトリを作成し、「フォルダで開く」で移動
2. コマンドパレットを開き、「SFTP: Config」を選択
   プロジェクトのルートディレクトリに「.vscode/sftp.json」が生成される
3. sftp.jsonの設定例:
   {
   "host": "example.com", // サーバーのホスト名またはIPアドレス
   "username": "your-username", // サーバーのユーザー名
   "password": "your-password", // サーバーのパスワード
   "protocol": "sftp", // プロトコル（通常は"sftp"）
   "port": 22, // ポート番号（通常は22）
   "remotePath": "/path/to/remote/directory", // リモートディレクトリのパス
   "uploadOnSave": true // ファイル保存時に自動アップロードするかどうか
   }

操作

1. ファイルの自動アップロード:
   uploadOnSaveがtrueの場合、ファイルを保存すると、自動的にリモートサーバーにアップロードされます
   　
2. 手動アップロード: 
   エクスプローラでファイルを右クリックし、「Upload」を選択します
   　
3. リモートサーバのディレクトリを表示:
   左サイドバーの"SFTP"アイコンをクリック
   　
4. ファイルのダウンロード: リモートサーバー上のファイルを右クリックして「Download」を選択

注意

sftp.jsonにはパスワードなどの機密情報が含まれるため、.gitignoreに追加してGitにプッシュしないようにすること

外部エディタの起動

    {
      "version": "2.0.0",
      "tasks": [
          {
              "label": "WZ editor",
              "type": "shell",
              "command": "D:/App/App/Editor/WZEditor64/WZEditor.exe",
              "args": [
                  "${file}",
                  "/j${line}"
              ],
              "group": {
                  "kind": "build",
                  "isDefault": true
              },
              "problemMatcher": []
          },
          {
              "label": "VSCode",
              "type": "shell",
              "command": "code",
              "args": [
                "-n",
                "${file}",
                "--goto", 
                "${file}:${line}:${column}"
              ],
             "problemMatcher": []
          }
      ]
    }
  

1. CtrL+Shift+Pでコマンドパレットを起動
2. "タスクの実行"を選択
3. tasks.jsonで定義した外部エディタを選択