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

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

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

foo で検索

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

Image from Gyazo

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

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

Image from Gyazo

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

Image from Gyazo

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 に複数のルートフォルダを追加できます。

ルートに3つのフォルダがある

ワークスペース

パレットコマンド

>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」に(星マークを付けて)出すことができます。

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

Image from Gyazo

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

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

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

Image from Gyazo

.vscode/extensions.json で

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

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

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

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

Image from Gyazo

defaultFormatter

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

Image from Gyazo

「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]でもいけたりします。

GitHub や Slack の User Status を更新する

VSCode 拡張の User Status を使うと VSCode から複数のサイトのユーザーステータスを更新できます。2020年2月28日現在だと GitHub と Slack がサポートされてます。

ユーザーステータスとはGitHub のプロフィール画像の下Slack メンバー名の右などに表示される絵文字(とテキスト)の事で、「今自分はこんなことしてますよ」と周りに知らせる事ができます。

インストール

Extensions View からnju33.vscode-user-statusと検索すると結果が1件出てきますので、そこからインストールできます。

使い方

うまくインストールが完了するとVSCode 下部に Set status という項目が追加されます。(無い場合は一度 window をリロードしてみてください)

この項目をクリックすると選択リストが表示され、ここで選んだ項目が各サービスで設定されます。現在のステータスは下部の Set status という項目が変わり、ここも現在有効なステータスになります。
ステータス設定中に再度選択リストを出すとClear statusという項目が追加されるので、ここからステータスをリセットできます。

機能は以上ですが、使う前に幾つかの設定を設定ファイルに追記する必要があります。

設定

ユーザーがカスタマイズ可能な設定は以下の5つです。

  1. userStatus.github
  2. userStatus.slack
  3. userStatus.status
  4. userStatus.language
  5. userStatus.priority

userStatus.github

GitHub のユーザーステータスを更新対象にするか設定します。以下のような感じです。

{
  "userStatus.github": {
    "enable": true,
    "username": "GITHUB_USER_NAME",
    "accessToken": "GITHUB_PERSONAL_ACCESS_TOKEN"
  }
}

accessTokenには user にだけチェックを入れて生成したトークンを使います。

userStatus.slack

Slack のユーザーステータスを更新対象にするか設定します。以下のような感じです。

{
  "userStatus.slack": {
    "enable": true,
    "workspaces": [
      {
        "user": "SLACK_MEMBER_ID",
        "accessToken": "SLACK_OAUTH_ACCESS_TOKEN"
      },
      {
        "user": "SLACK_MEMBER_ID(2)",
        "accessToken": "SLACK_OAUTH_ACCESS_TOKEN(2)"
      }
    ]
  }
}

Slack は複数のワークスペースに対応していて、設定した全てのワークスペースのユーザーステータスを更新します。

userはワークスペースのプロフィールから取得した ID を指定します。

accessTokenは Slack アプリを作成しusers.profile:readusers.profile:write権限を持った Oauth Access Token を生成して、それを使います。

userStatus.status

好きな項目を設定できます。例えば以下のように設定すると、

{
  "userStatus.status": {
    "🍿": {
      "github": {
        "emojiName": "popcorn"
      },
      "slack": {
        "emojiName": "popcorn"
      },
      "text": "Watching a movie",
      "priority": 900
    }
  }
}

🍿 Watching a movieという項目を増やすことができます。

userStatus.language

拡張には最初からいくつかのステータスリスト(上記で設定するような)が登録されてますが、この言語を設定できます。それらにはen(英語でデフォルト)とja(日本語)が用意されており、例えば英語では🗓 In a meetingが日本語では🗓 会議中となるような違いがあります。

userStatus.priority

新しく VSCode Window を立ち上げたりした時に、GitHub や Slack どこを一番に優先してステータスを復元するか設定します。デフォルトではgithubで GitHub が優先になってます。

例えば、GitHub 上のステータスが🗓 In a meetingとなっている場合、VSCode 下部のステータスも🗓 In a meetingに復元されます。

eslint 拡張がドットファイルやドットディレクトリ以下のファイルで動作しない

Vscode の Eslint 拡張はデフォルトで.*のような感じで無視設定されているのか.foo.js.direcotry/foo.jsのようなファイルをフォーマットしようとしてもExtension 'ESLint' cannot format '...'のような文章がでるだけとなってしまいます。

.eslintignore を置く

.*のような感じで設定されているという事から、自身の.eslintignoreでそれを打ち消す設定が必要でした。例えば.foo.js.directory/foo.jsを対象にフォーマットしたいなら以下のような.eslintignoreを作成します。

!.foo.js
!.directory