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

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

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

foo で検索

これはa.txtb.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.jsonjson.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"
    }
  }
]

関連エラー

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

自身のものを使う時はどこか参照できる URL などに置くと思いますが、その URL が302リダイレクトなどしている場合上のメッセージのように読み込んでくれません。これはリダイレクト先の URL を記述することによって直ります。

僕の場合怒ったのは、npm に公開してunpkg.comから取得しようとした時です。https://unpkg.com/nju33/xxx/foo.jsonという URL はhttps://unpkg.com/nju33/xxx@0.0.0/foo.jsonのような URL へリダイレクトする設定となっていた為です。

ちょっと不便ですね,,,

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で設定するのはおすすめしません。

以下のようなパターンでホワイトリストのような形でパターンを設定するといいと思います。これはhuskylintstagedrenovate.*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+jctrl+shift+5でできますが、ctrl+jは上記のように別ショートカットが優先になってしまうのでctrl+shift+5を使います。

Pane 間の移動

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

開き括弧から閉じ括弧までの検索

例えば、以下のようなCSSで{から}までを検索したい場合です。

.class {
  color: var(--my-accent-color);
}

検索で「正規表現を使う(Use Regular Expression)」を有効にし以下のような文字列を入れると目的が果たせるハズです。

{[\n\s\S]*?}

HTMLタグの開きから閉じ

正規表現の{}を対象のHTMLタグに変更するだけです。例えば<div>であれば、

<div>[\n\s\S]*?</div>

\n\s\S とは

\s\Sは改行を含めたすべての文字の検索で、\nは開き括弧直後の改行対策です。\nは VScode での検索のみに必要で、 JavaScript では必要ないようです。

\n[\s\S]でもいけたりします。