goozenlab
goozenlab ☰

| categories:computing

VSCode プラグイン

ちょっとした自分のメモとして残します。 導入したプラグインと ちょっとしたショートカットをまとめる。

General

  1. Icon表示が見た目が少し華やかになります。ちょっとうざったいかも。
    vscode-icons: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

  2. タブや空白が入っている箇所に対して赤く強調表示をするようにしてくれます。余計な空白が見て取れます。
    Trailing Spaces: https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
    ちなみに、以下の設定をすればファイル保存時に自動で末尾の空白を削除してくれる。

$ vi ~/.vscode/settings.jason

{
    "files.trimTrailingWhitespace": true
}

  1. ブックマークを付けて手軽に移動、ちょっとしたブレークポイントみたいな感じで使える？
    Bookmarks: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
    ショートカットキー動作

    • ［ Command ］+［ Option ］+［ k ］ブックマークを作成
    • ［ Command ］+［ Option ］+［ l ］ 次のブックマークに移動
    • ［ Command ］+［ Option ］+［ j ］ 前のブックマークに移動

  2. 入れ子にした括弧についても階層ごとに水色や黄色や紫に色付けしてくれます。分かりやすくなるとも言えるし、ちょっと目がチカチカする感じもある。
    Bracket Pair Colorizer: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

  3. FIXMEとかTODOをハイライトしてくれます。Xcodeで使っている記述なので入れておく。
    ToDo highlite: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

HTML

もうそんなに書かなくなったhtml関連の為にインストールしたプラグイン。 どれも定番かつマストかな。他にもいっぱいある。

  1. 自動的に終了タグを生成してくれるプラグイン
    Auto Close Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag　

  2. 開始タグを修正したときに、自動的に対になる終了タグを修正してくれるプラグイン
    Auto Rename Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

  3. CSSクラスを指定するときに、入力補完してくれるのがこのプラグイン
    IntelliSense for CSS class names in HTML: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

  4. カラーコードに色をつけてくれます。特にwebページの編集時に有効かな。
    Color highlight: https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

  5. HTML向けのスニペット。ぱぱっとコードを追加してくれます。
    HTMLSnippets: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

Command

直近閉じたタブを開き直す

⌘ + ⇧ + T

コードの自動フォーマット (Prettier以外)

⌃ + ⌥ + F

選択行の上下移動

⌥ + 上下の矢印キー

Zen：集中モード

⌘ + K （押した後）　Z

Tips

CPU使用の軽減

サイズの大きいファイルがあるとCPU使用率(CodeHelper)が高くなってしまうことがある。 以下のオプションで参照から除外するディレクトリを設定しておくと良い。

$ vi ~/.vscode/settings.jason

{
    "files.watcherExclude": {
            "**/images/**": true
    }
}

起動時に無題ファイルを開く

$ vi ~/.vscode/settings.jason

{
    "workbench.startupEditor": "newUntitledFile"
}

タイトルバーの色をプロジェクトごとに違うものにする

プロジェクト・ディレクトリーにある.vscode/settings.jasonに以下の4行を追加追加するこで可能です。

$ vi ~/PROJECT_DIRECTORY/.vscode/settings.jason

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#34595ae5",   // タイトルバーの背景色
        "titleBar.activeForeground": "#dedede",    // タイトルバーの文字色
        // "activityBar.background": "#FFD700",    // 左アクティブバーの背景色
        // "activityBar.foreground": "#000000"    // 左アクティブバーの文字色
    }
}

参照：https://qiita.com/kabosusoba/items/3afad300ef1ea9ddd50b

と色々とカスタマイズも可能、 .vscode/settings.jason を編集すればさらに細かく設定できます。 そして、作業に合わせたスニペットなどを作成すればさらに使いやすくなるでしょう。

とりあえずスタートとしては悪くないかな。

🏝 tipping

🌷 sat ⚡️ goozenlab@getalby.com
🌻 bitcoin : bc1qnjhnsxgqah050995dkdveav4y3t3d7uxyme4ud

・If you do send a tip, Please email me so that I can say thank you.
Owl
↑↑