VisualStudioCode

【VSCode】引用符、括弧、HTMLタグの自動補完を無効にする

更新日:2022/10/18

VSCodeにはダブルクォーテーションなどの引用符を入力すると、自動で閉じてくれます。
さらに文字列を選択した状態で引用符を入力すると、前後を引用符で囲ってくれます。

同様に、( ) や [ ] などの括弧とHTMLタグも補完してくれます。

非常に便利な機能として実装されているようですね。

しかし僕のような、エディターに補助機能なんてついてない時代からプログラマーやっている人は、入力していないのに勝手に文字が入力されるのは少し気持ち悪く感じます。
それに選択状態で入力して、その文字で上書きされないのも、なんだかモヤモヤします。
使っているうちに慣れるかな、と思ったのですが…

ダメでした。
イラっとするので、これらの補完機能を無効にしてみます。

 

補完機能設定

補完機能の設定は、VSCodeの左下の歯車アイコンをクリックして表示されるメニューから「設定」を選択して、設定画面を開きます。
次に、下表の設定名を検索欄に入力します。
設定項目が表示されたら、設定を変更します。

補完機能に関する設定項目の表

設定名

/プロパティ名

内容
Editor: Auto Closing Quotes

/"editor.autoClosingQuotes"

開始引用符を入力後、
自動的に引用符を
閉じるかどうかを制御
Editor: Auto Closing Brackets

/"editor.autoClosingBrackets"

左括弧を入力後、
自動的に右括弧を
挿入するかどうかを制御
Editor: Auto Closing Overtype

/"editor.autoClosingOvertype"

引用符または終わり括弧の直前に、
同じ引用符または括弧を入力したとき、
上書きするかどうかを制御
Editor: Auto Closing Delete

/"editor.autoClosingDelete"

引用符または括弧のペアが隣接しているとき
、開始側を削除したら終了側も削除するかどうかを制御
Editor: Auto Surround

/"editor.autoSurround"

範囲選択時、
引用符または括弧入力で
範囲を囲むかどうかを制御
HTML: Auto Closing Tags

/"html.autoClosingTags"

HTML開始タグ入力後、
終了タグを挿入するかどうかを制御
JavaScript: Auto Closing Tags

/"javascript.autoClosingTags"

JSXタグ入力後、
終了タグを挿入するかどうかを制御
TypeScript: Auto Closing Tags

/"typescript.autoClosingTags"

JSXタグ入力後、
終了タグを挿入するかどうかを制御

Editor: Auto Closing Quotes

Editor: Auto Closing Quotesは、シングルクォーテーションまたはダブルクォーテーションが入力されたとき、自動的に引用符を閉じるかどうかを制御します。

次の4つの値から選択します。

内容
always常に有効
languageDefined言語毎の設定を有効
beforeWhitespace行頭または前方に空白があるとき有効
never常に無効

設定例:settings.json


"editor.autoClosingQuotes": "languageDefined",
"[typescript]": {
    "editor.autoClosingQuotes": "beforeWhitespace",
},
"[javascript]": {
    "editor.autoClosingQuotes": "never",
}

Editor: Auto Closing Brackets

Editor: Auto Closing Bracketsは、左括弧入力後に自動的に右括弧を挿入するかどうかを制御します。

次の4つの値から選択します。

内容
always常に有効
languageDefined言語毎の設定を有効
beforeWhitespace行頭または前方に空白があるとき有効
never常に無効

Editor: Auto Closing Overtype

Editor: Auto Closing Overtypeは、引用符または終わりの括弧の直前に、同じ引用符または括弧を入力したとき、上書きするかどうかを制御します。

内容
always常に有効
auto自動的に入力されたもののみ有効
never常に無効

上書き動作例

例えば、次のようなコードがあったとき、
[1]

]  の前に ] を入力する、
[1]]

すると、直後の ] ] で上書きされます。
[1]

Editor: Auto Closing Delete

Editor: Auto Closing Deleteは、引用符または括弧のペアが隣接しているとき、つまり間に文字が無いとき
、開始側を削除したら終了側も削除するかどうかを制御します。

内容
always常に有効
auto自動的に入力されたもののみ有効
never常に無効

VSCodeのバージョンによって動作が異なる可能性がありますが、Editor: Auto Closing QuotesまたはEditor: Auto Closing Bracketsが無効のとき、削除が有効でも動作しませんでした。

Editor: Auto Surround

Editor: Auto Surroundは、文字を範囲選択していてる状態で、引用符または括弧を入力したとき、入力した文字で上書きしないで、範囲を囲むかどうかを制御します。

内容
brackets括弧のみ有効
quotes引用符のみ有効
never常に無効
languageDefined言語毎の設定を有効

HTML: Auto Closing Tags

HTML: Auto Closing Tagsは、HTMLコード上でタグ入力時に、閉じタグを挿入するかどうかを制御します。

true または false で指定します。

JavaScript: Auto Closing Tags

JavaScript: Auto Closing Tagsは、JavaScriptコード上でタグ入力時に、閉じタグを挿入するかどうかを制御します。

true または false で指定します。

JSXは、HTMLタグをコード上に記述できるJavaScriptの拡張言語です。
React等で使用します。

TypeScript: Auto Closing Tags

JavaScript: Auto Closing Tagsは、TypeScriptコード上でタグ入力時に、閉じタグを挿入するかどうかを制御します。

true または false で指定します。

 

括弧の種類などの設定

括弧や範囲指定時のクロージング対象文字などは、言語ごとに設定されています。

次のフォルダに、言語ごとに設定が保存されています。

VSCodeインストールフォルダ\resources\app\extensions\言語名

このフォルダ内の language-configuration.json が、設定ファイルです。

このファイルを変更すると、クロージング対象を変更できるのですが…
アップデート時に上書きされてしまうことがあるようです。

更新日:2022/10/18

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。