メインコンテンツまでスキップ

VSCode

どんなエディターでもEditorConfigを使ってコードの統一性を高める​

参考URL

  • ソフトタグ ソフトタブはタブが半角スペース

  • ハードタブ ハードタブはタブがタブ

私の周りで何が起きたかというと。 PhpStorm派 Vim信者 Atom使いたい派 なぜかときどきSublimeText使う派

そこでEditorConfigがあれば統一できる

vscode リモート接続をCLIから実行する​

参考URL 参考URL2

モノレポの運用​

複数のルートディレクトリがある場合のvscodeディレクトリの優先度

参考URL

.vscode
└── settings.json # これがデフォルトできく
└── root ディレクトリ
      .VS Code # 対象ディレクトリにこれがあればこれが上書きされてきく
      └── settings.json

tasks.json​

参考URL

VS Codeのビルドタスク設定（tasks.json）をしておくと、Cmd + Shift + Bで任意のビルドタスクを実行できるようになる。

メリット VS Codeで作成したコードを実行するときに毎回ターミナルから node main や npm start とか入力するのは面倒 VS Codeのビルドタスクを設定すると、こういったコマンドをCmd + Shift + Bというショートカット一発で実行できる ※デバッグ起動などをtasks.jsonに記載しておくと便利

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm: start",  // コマンドパレットに表示される名前
      "detail": "node main",  // その下に表示される説明文
      "type": "npm",          // npm によるタスク実行
      "script": "start",      // 実行する npm スクリプト名
      "group": {
        "kind": "build",      // ビルドタスクとして認識させる
        "isDefault": true     // Cmd + Shift + B で即実行
      },
      "problemMatcher": []
    }
  ]
}

launch.json​

VS Codeでデバッグ実行するための設定ファイル どの言語でどのファイルを実行するかなどを設定する。

事前定義された変数を利用できる

${file} # 現在開いているファイルのパス
${fileBasename} # 現在開いているファイル名
${workspaceFolder} # VSCodeで開いているフォルダのパス
${workspaceFolderBasename} # VSCodeで開いているフォルダ名
${cwd} # 現在の作業ディレクトリ

ショートカットキーの設定画面を開く​

  1. Cmd + K
  2. Cmd + S

Vscodeが持つデバッグ機能​

VS Codeが組み込みでサポートしているのはJSアプリ（Node.jsランタイム）のデバッグ機能 →JS/TS/Node

VS Code自体がElectronを用いて作られているのを考えると当然 ※他の言語で記述したアプリのデバッグを行うにはそのための拡張機能が必用

マルチルートワークスペース​

参考URL

Language Server Protocol : 言語サーバプロトコル LSP​

プログラミング言語の開発環境は目まぐるしく進化しています。近年登場したlanguage server protocol (LSP) という枠組みは中でもとくに強力であり、VimやEmacs、 Visual Studio Code (VS Code) といった著名なテキストエディターで広く使われるようになった。

language server protocolについて (前編)

language ServerとはID#が必要とするプログラムのプロジェクトソースを解析して情報を提供する機能をサービスとして実現するもの プログラミング言語のサポートを、特定のエディターやIDEとは無関係に実装および配布できるようにすること

特徴 LSPの特徴は、テキスト補完などの開発支援機能をサーバとクライアント（エディター）の2つに分け、特定のプロトコルで互いにやり取りするという方式にある。 従来は各々のテキストエディターが言語ごとにそれぞれプラグインや拡張機能を開発する必要があったが、 LSPの登場により言語固有の機能はサーバ側で、テキストエディター側の機能はクライアント側で各々開発すれば良くなった。 その結果、開発にかかる手間が大幅に減少しただけでなく、マイナーな言語や新興テキストエディターでもリッチな開発体験を気軽に提供できるようになった。

tips​

まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ

VS Codeで画像から背景を1クリックで切り抜けるようになった。

recommend​

そのプロジェクトで必要になり得る、拡張機能を渡せる recommendationsの書き方は少々癖があって、著者名.拡張機能名

vscodeワークスペース​

参考URL

vscode拡張機能無効(ワークスペース)​

ワークスペース単位で拡張機能を無効にできるが、管理されているファイルなどがないため大変という話 参考URL

vscode リモートエクスプローラーをCLIから開く​

参考URL

パスがこれへ変更になっていた。

$ pwd
/Users/naohito.tanaka/Library/Application Support/Code/User/globalStorage
に最終更新