【VSCode】コーディング時に使用している拡張機能とsetting.jsonの編集

node.jsなTypeScriptなコーディングをする環境の設定の備忘

 

vscode-icons -- アイコンを見やすく変更する
Visual Studio IntelliCode -- VSCodeの予測変換が賢くなる
・Auto Import -- 利用可能な全てのインポートに対して、自動的に検索、解析し、コードアクションを提供
・Auto Rename Tag -- 開始タグと閉じるタグが連動して名称を変更できる
・indent-rainbow -- インデントに色付けをしてくれる
・IntelliSense for CSS class names in HTML -- HTMLにクラスを記入するとき、CSSにあるクラス名を表示してくれる
・Edit csv -- csvファイルをエクセルのグリッドのように表示する
・Prettier -Code formatter -- フォーマッター
 
【setting.jsonへの追加(ctrl+Pで起動)】
// Prettier -Code formatterをデフォルトフォーマッターにしてセーブ時に整形する
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
 
// 別のファイルをクリックするとさっき見ていたファイルが閉じられるのを阻止
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false
 
// 開始と終了のブラケットをセットで同じカラーにする
"editor.bracketPairColorization.enabled": true
 
// ファイルツリーにインデントのガイド線を表示する / インデントのサイズを変更する
"workbench.tree.renderIndentGuides": "always",
"workbench.tree.indent": 16
 
// ターミナルで選択するとコピー、右クリックで貼り付け出来るようにする
"terminal.integrated.copyOnSelection": true,
"terminal.integrated.rightClickBehavior": "paste"
 
※setting.jsonが存在せず、ctrl+Pで開くところまで行けない場合、
 VSCode>>左下の歯車アイコン>>設定>>右上のアイコンの左から1番目をクリックすれば、
 setting.jsonが表示される。