Open14日前にコメント追加7

VSCodeのおすすめ設定・おすすめ拡張機能について

VS Code 拡張機能

VS Code Extension

ピン留めされたアイテム

まさぴょん

気に入っているやつなどを発見したら、その都度まとめる。

Todo Tree

TODO や FIXME などのコメントタグをすばやく検索し、アクティビティバーのツリービューに表示できまう。

Indent-Rainbow

インデントを入れると、色付けしてわかりやすくしてくれる。for文とかif文とかのインデント問題を発見しやすい。

Rainbow CSV
Live Server

参考・引用

まさぴょん

Python の VSCode拡張機能

Python Indent
Formatter「autopep8」

Python の保存時に自動フォーマットする設定

setting.json

   "[Python]": {
     "editor.defaultFormatter": "ms-python.autopep8",
     "editor.formatOnSave": true
   }

Linter「Pylint」

setting.json

invalid-name（C0103）を無視する。

line-too-long（C0301）を無視する。

  "pylint.args": [
    "--disable=C0103",  // invalid-name
    "--disable=C0301",  // line-too-long
  ],

まさぴょん

JS の Debug に役立つ『Console Ninja』

Console Ninjaは、console.log の出力をエディタ内で直接確認できる様になる、VSCodeの拡張機能です。
console.log の出力をコードの横に表示
すべてのログを時系列で確認できる専用のビューア
ログの詳細を確認できるマウスオーバー機能
ViteやWebpack、Next.jsなどの最新フレームワークに対応

まさぴょん

`-`(ハイフン)をダブルクリックでの範囲選択の対象にする設定方法

VSCodeで、ハイフンもダブルクリックで範囲指定できるようにする設定

VSCodeでハイフン区切りの単語もダブルクリックで一括選択するには、
以下の手順で設定を変更します。

VSCodeを開きます。
コマンドパレットを開くためにCtrl + Shift + P（Windows/Linux）またはCmd + Shift + P（Mac）を押します。
「設定を開く」（Preferences: Open Settings）と入力して検索し、選択します。

「Editor: Word Separators」と検索します。
「Editor: Word Separators」の設定に表示されるデフォルトの区切り文字から、ハイフン（-）を削除します。

上記手順により、ハイフンを含む文字列（ケバブケースなど）をダブルクリックした際に、ハイフンも含めて全体が選択されるようになります。

まさぴょん

typoミスを防ぐ Code Spell Checker

まさぴょん

VSCodeでファイル保存時にインテンドを自動整形する設定 Ver. JS/TS

VSCodeにフォーマッター(Code formatter)の拡張機能を追加する
setting.json を Update

setting.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.formatOnSave": true
}

まさぴょん

Code Runner

特定行のCodeをVSCode上で実行できる💪🥺🔥