VSCode 1 / 2

ある除外パターンを除外して検索

関連

ディレクトリは以下のようになっていて、どちらとも中身にfooと書いてあるとします。

.
├── a.txt
└── b.txt

foo で検索

これはa.txtとb.txtどちらも表示されます。

あるパターンのファイルを除外したい

b.txtを対象から外してみたいです。これは、files to excludeの入力欄に除外したいファイルのパターンをカンマ区切りで書いていくことで、そのパターンにマッチするファイルは表示対象から外されます。

b.txtを対象から外すようにできました。

常にあるパターンのファイルを除外したい

上記の方法だと検索のたびにb.txtを除外するという設定を書かないといけないので、常に除外したい場合はローカル設定ファイルを作ると楽です。これは.vscode/settings.jsonを作成し、search.excludeを設定します。ここで設定した Glob パターン(値trueのもの)が常にfiles to excludeの入力欄に入るイメージです。中身はこんな感じになります。

{
  "search.exclude": {
    "**/node_modules": true,
    "b.txt": true
  }
}

設定後は再起動が必要かもです。（>Developer: Reload window）

files to excludeの入力欄は空ですが、除外することができました。

JSON Schema 設定を追加する

関連

ローカルのsettings.jsonにjson.schemasという項目を置きます。

settings.json を作る

VSCode はプロジェクトルートに置かれているvscode/settings.jsonファイルを自動で読み込み、設定に適用してくれるので、とりあえずこれを以下のような内容で作ります。

{
  "json.schemas": []
}

この配列は、

type Schema =
  | {fileMatch: string[], url: string}
  | {fileMatch: string[], schema: object}

なオブジェクトで構成された配列になります。

fileMatch

fileMatchは文字列な配列で、その JSON スキーマを適用するファイルのパターンやパスを置きます。今回のようなローカルのsettings.jsonの場合は/はプロジェクトルートになります。

[
  {
    "fileMatch": [
      "/foo/**/xxx.json",
      "/absolute/aaa/xxx.json
    ],
  }
]

url

スキーマファイルへのパスまたは URL を置きます。このパスの場合も、ローカルのsettings.jsonの場合は/はプロジェクトルートになりますので、/.../.../xxx.jsonのように絶対パスで指定します。
URL の場合は、JSON スキーマを提供している URL を設定します。例えば、npm のpackage.jsonのスキーマであれば、http://json.schemastore.org/packageという URL を置くと良いです。

[
  {
    "fileMatch": ["**/*"],
    "url": "http://json.schemastore.org/package"
  }
]

schema

これはurlプロパティを設定しない時に必要です。単に JSON スキーマをこのオブジェクトの中に記述していきます。

[
  {
    "fileMatch": ["**/*"],
    "schema": {
      "type": "object"
    }
  }
]

JSON Schema を YAML にも効くようにする

関連

redhat.vscode-yamlという拡張が必要なので VSCode に入れます。

settings.jsonを開きyaml.schemasというプロパティを追加します。これのプロパティにはスキーマ定義 JSON へのパスや URL を設定し、値に対象となるファイルにマッチする文字列を書きます。

例えばこれはhttps://example.com/foo.jsonという所から取得できるスキーマをfoo.ymlに適用する例です。

{
  "yaml.schemas": {
    "https://example.com/foo.json": [
      "foo.yml"
    ]
  }
}

json.schemasの設定方法と違っているので注意。

あるファイルを開いた時の言語設定を指定する

関連

例えば.*rcファイルとかであまり有名じゃない設定ファイルなどは、そのままでは JSON 言語とは解釈されずにシンタックスハイライトが付かないものがあります。

JSON と解釈されなければ、 JSON Schema も適用できないので、どんな.*rcファイルを開いた時でも JSON 言語としてくれる設定を設定します。

files.associations

設定ファイルにfiles.associationsセクションを追加（追記）します。

コマンドパレットで>Preferences: Open Settings (Json)と入力して、同じコマンド名のものを確定するとグローバルなsettings.jsonが開くので、この中に以下のように書きます。

{
  "files.associations": {
    "ファイル名かパターン": "設定してほしい言語"
  }
}

.*rc ファイルすべてが JSON シンタックスとは限らない

.browserslistrcなど JSON ではない設定ファイルがあるので実際には.*rcで設定するのはおすすめしません。

以下のようなパターンでホワイトリストのような形でパターンを設定するといいと思います。これはhuskyや lintstaged、renovateの.*rcファイルを JSON 言語に設定します。

{
  "files.associations": {
    ".{husky,lintstaged,renovate}rc": "json"
  }
}

ワークスペースプロジェクト

関連

VSCode のワークスペース機能を使うと Explorer に複数のルートフォルダを追加できます。

ワークスペース

パレットコマンド

>Workspaces: Add Folder to Workspaces...と入力して実行します。実行するとディレクトリ選択画面が開くと思うので、適当なものを選択して追加します。

CLI

-aか--addオプションを使います。これにはワークスペースに追加したいディレクトリへの相対か絶対パスを指定します。

code --add src/api
code --add src/sites

ワークスペースの保存

パレットコマンドで>Workspaces: Save Workspace As...で出てくるコマンドを実行します。そして適当な名前で保存します。これはプロジェクトのルートでいいかなと思います。

.code-workspaceという拡張子で保存されます。

ワークスペースを開く

パレットコマンド

>Workspaces: Open Workspace...で出てくるコマンドを実行し、.code-workspaceファイルを選択します。

CLI

code xxx.code-workspaceと.code-workspaceフォルダをcodeコマンドの引数にすると勝手に設定を適用して VSCode を開いてくれます。

ワークスペースの設定

デフォルトではfoldersセクションに{path: ...}という形で置かれているだけですが、ここにnameセクションを置くとルート名をその名前に変更できます。

またコマンドから生成した.code-workspaceファイルにはsettingsセクションも空オブジェクトで置かれているかもしれませんが、これはこのワークスペースプロジェクト内で有効な設定を置けます。

同じプロジェクトの人にオススメ拡張を知らせる

関連

使うとプロジェクトの Wiki などにわざわざ拡張情報を記載して共有などしなくても良くなるかもしれません。

ワークスペース

.code-workspaceファイルのextensions.recomendationsセクションに配列で拡張名を記述すると、ワークスペースを指定して VSCode を開いた時にその拡張を「RECORECOMMENDED」に（星マークを付けて）出すことができます。

最初はこのような感じですが、

例えばこのような設定で、

{
  "folders": [
    {
      "name": "root",
      "path": "."
    }
  ],
  "extensions": {
    "recommendations": ["shinnn.stylelint"]
  }
}

（リロード後）拡張ペーンを開くと、「RECORECOMMENDED」にshinnn.stylelintが増えているはずです。

.vscode/extensions.json で

こちらの方法でも可能です。中身も一緒です。

{
  "recommendations": ["shinnn.stylelint"]
}

デフォルト整形ツールに Prettier を使う

関連

または、「Format Document」が効かないのを直す方法。とりあえず以下の拡張が入っている想定です。

defaultFormatter

shift+command+fキーで使う整形ツールを指定できます。以下のように Prettier 拡張を設定しておきます。

「Format Document」で整形されない

既にファイルタイプ毎に何かしら辺な値が設定されている可能性があります。直すには「Preferences: Open Settings (JSON)」で設定ファイルを開きます。

整形したいファイルが JavaScript ファイルであれば以下のような設定を追加します。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

優先度はファイルタイプのdefaultFormatter > 共通のdefaultFormatterみたいです。

VSCode が重い

関連

まだ重い。（適当なタイミングで追記）

VSCode 設定

以下のものに依存パッケージディレクトリやビルド後に生成されるディレクトリを設定して対象外にする。

files.exclude
files.watcherExclude
search.exclude

TypeScript 設定

tsconfig.json

excludeセクションを（ちゃんと！）置き依存パッケージディレクトリやビルド後に生成されるディレクトリを設定して対象外にする。

{
  "exclude": ["node_modules"]
}

JavaScript 設定

jsconfig.json

excludeセクションを置き依存パッケージディレクトリやビルド後に生成されるディレクトリを設定して対象外にする。

{
  "exclude": ["node_modules"]
}

ESLint 設定

.eslintignore

.gitignoreと同じような書き方で、対象外にしたいディレクトリ・ファイルを羅列する。

node_modules

Prettier 設定

.prettierignore

.gitignoreと同じような書き方で、対象外にしたいディレクトリ・ファイルを羅列する。

node_modules

シェル指定

関連

VSCode では/etc/passwdの内容よりsettings.jsonの方が優先されるよう（少なくとも僕の環境では）です。

それぞれ環境に合わせて以下を設定してあげましょう。

{
  "terminal.integrated.shell.linux": "/usr/bin/fish",
  "terminal.integrated.shell.osx": "/usr/local/bin/fish",
  "terminal.integrated.shell.windows": "..."
}

値は/etc/shellsで表示されるどれかを設定します。

ターミナル操作

関連

Mac でかつデフォルト設定での話です。

ターミナルにフォーカス

cmd+\で行えます。またエディタに戻りたい場合はcmd+1,cmd+2などでエディターグループを指定して戻れます。

ターミナルを閉じる

cmd+jで隠したり、再度表示できます。また、隠すのではなく終わらせたいならexitコマンドをそのターミナルで実行します。

ターミナル分割（新しい Pane 作成）

ターミナル分割はctrl+jかctrl+shift+5でできますが、ctrl+jは上記のように別ショートカットが優先になってしまうのでctrl+shift+5を使います。

Pane 間の移動

cmd+option+←またはcmd+option+→を使います。それぞれ、「前の Pane に移動」「後の Pane に移動」というショートカットが割り振られています。

foo で検索

あるパターンのファイルを除外したい

常にあるパターンのファイルを除外したい

settings.json を作る

fileMatch

url

schema

関連エラー

Request vscode/content failed unexpectedly without providing any details.(768)

files.associations

.*rc ファイルすべてが JSON シンタックスとは限らない

ワークスペース

パレットコマンド

CLI

ワークスペースの保存

ワークスペースを開く

パレットコマンド

CLI

ワークスペースの設定

ワークスペース

.vscode/extensions.json で

defaultFormatter

「Format Document」で整形されない

VSCode 設定

TypeScript 設定

tsconfig.json

JavaScript 設定

jsconfig.json

ESLint 設定

.eslintignore

Prettier 設定

.prettierignore

ターミナルにフォーカス

ターミナルを閉じる

ターミナル分割（新しい Pane 作成）

Pane 間の移動

純