VSCode
どんなエディターでもEditorConfigを使ってコードの統一性を高める
-
ソフトタグ ソフトタブはタブが半角スペース
-
ハードタブ ハードタブはタブがタブ
私の周りで何が起きたかというと。 PhpStorm派 Vim信者 Atom使いたい派 なぜかときどきSublimeText使う派
そこでEditorConfigがあれば統一で きる
vscode リモート接続をCLIから実行する
モノレポの運用
複数のルートディレクトリがある場合のvscodeディレクトリの優先度
.vscode
└── settings.json # これがデフォルトできく
└── root ディレクトリ
.VS Code # 対象ディレクトリにこれがあればこれが上書きされてきく
└── settings.json
tasks.json
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} # 現在の作業ディレクトリ
ショートカットキーの設定画面を開く
- Cmd + K
- Cmd + S
Vscodeが持つデバッグ機能
VS Codeが組み込みでサポートしているのはJSアプリ(Node.jsランタイム)のデバッグ機能 →JS/TS/Node
VS Code自体がElectronを用いて作られているのを考えると当然 ※他の言語で記述したアプリのデバッグを行うにはそのための拡張機能が必用
マルチルートワークスペース
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ワークスペース
vscode拡張機能無効(ワークスペース)
ワークスペース単位で拡張機能を無効にできるが、管理されているファイルなどがないため大変という話 参考URL
vscode リモートエクスプローラーをCLIから開く
パスがこれへ変更になっていた。
$ pwd
/Users/naohito.tanaka/Library/Application Support/Code/User/globalStorage