VSCodeを限りなくBrackets風にしてみた（Mac）

14009 ワード
Brackets VSCode 乗り換え Brackets テキストリンク

背景

本格的にWebの仕事をするようになってからずっと使っていたエディタ Brackets。

SublimeやAtom、DreamWeaverも使ったけれど結局ここ4年くらいは落ち着いていたのに、
サポート終了の悲報...。

基本的には新しい環境に自分が合わせるスタンスでいこうと思っていたけれど...歳だなぁ。新しいソフトに自分が合わせられなくなってきた。
ソフトを自分に合わせる方向で行こう！（笑）

ということで2021年6月某日、エディタ引っ越し＆模様替え作業開始。
備忘録として書き残しておきます。

OSはMacで用途はHTML、CSS、PHPいじるのがメインのデザイナーです。

こうなりました

左のサイドバーもダークな感じにしようと思ったけど、アイコンテーマとの親和性が悪かったのであきらめました。
完全に同じ使い心地にするのは無理なので、できる限り近づける方向で、
VScodeのいいとこは取り入れて、アップデートしたつもり。

やったこと

その1：ショートカットカスタマイズ

設定ファイルをいろいろといじるのに、まずはショートカットを気持ちいい感じにする。

Shift＋Cmd＋Pで「コマンドパレットを表示」→キーボードショートカット　と入力すれば出てくる。

主によく使っていたEmmet関連の設定を追加。
ファイルを開く（Cmd+P → Shift+Cmd+O）など

VSCodeはキーボードショートカットの画面で検索ができたりして、とても変更がしやすく、ありがたい。

設定したい項目名でも検索できるし、
検索窓横のアイコンの「キーを記録」でキーからの検索もできる。

その2：カラーテーマ変更

Brackets Light Proをダウンロードして適用。
https://marketplace.visualstudio.com/items?itemName=fehey.brackets-light-pro
似たようなコンセプトのものがいくつかありますが、こちらが好みでした。

さらに使いやすくするために
「設定」からsettings.jsonを編集。

settings.json
    "workbench.colorCustomizations": {
        "[Brackets Light Pro]": {
            //customise 210606
            //ウィンドウ
            "titleBar.activeBackground": "#3d3d3d",
            "titleBar.activeForeground": "#e2e2e2",
            "titleBar.inactiveBackground": "#aaaaaa",
            "titleBar.inactiveForeground": "#e2e2e2",

            //括弧
            "editorBracketMatch.border":"#00000000",// 対応する括弧のボーダー

            // 選択領域
            "editor.selectionHighlightBackground": "#00000000",//選択中のワードの背景（ここは好みで）
            "editor.wordHighlightBackground": "#00000000",
            "editor.lineHighlightBackground": "#f0f0f0", // 選択している行の強調色
        },
    }

リファレンス
https://code.visualstudio.com/api/references/theme-color#scrollbar-control

その3：アイコンテーマ変更

Atom Icons
https://marketplace.visualstudio.com/items?itemName=emroussel.atom-icons

拡張子ごとにカラフルなアイコンより、シンプルなほうが好きなので。
シンプルな中にも、画像とフォルダとその他くらいの違いがあってちょうどよかった。

その4：スニペット登録

①コマンドパレットからSnippetで検索

②言語を選ぶ（もしくはグローバル）

③jsonファイルに書き込む
書式はコメントに入れてあるとおりですが、こちらを参考にしました。
https://haniwaman.com/vscode-snipet/
難しそうですが慣れたら意外とかんたん。

例として自分が設定したものはこちら
グローバル

global.code-snippets
    "jQuery基本コード": {
        "prefix": "jq",
        "body": [
            "$(function(){",
            "\t$1",
            "});//jQuery END",
        ]
    },
    "php基本コード": {
        "prefix": "?p",
        "body": [
            "<?php $1 ?>",
        ]
    },
    "コメントタイトル（大）": {
        "prefix": "tit",
        "body": [
            "/* ===============================================",
            "$1",
            "=============================================== */",
            "",
        ]
    },
    "コメントタイトル（中）": {
        "prefix": "tit",
        "body": [
            "/* $1",
            "============================ */",
            "",
        ]
    },
    "コメントタイトル（小）": {
        "prefix": "tit",
        "body": [
            "/* $1",
            "----------------------- */",
            "",
        ]
    },

※jQuery基本コードをJavascriptのjsonに最初書いてたのですが、scriptタグの中で効かなかったのでグローバルにしました。。
phpも同じ。

CSSメディアクエリ関連

css.json
    "メディアクエリ（min）": {
        "prefix": "@m",
        "body": [
            "@media screen and (min-width: 768px) {",
            "}/* tablet end */",
            "",
            "@media screen and (min-width: 992px) {",
            "}/* laptop end */",
            "",
            "@media screen and (min-width: 1200px) {",
            "}/* desktop end */",
            "",
        ]
    },
    "メディアクエリ（max）": {
        "prefix": "@m",
        "body": [
            "@media screen and (max-width: 1200px) {",
            "}/* laptop end */",
            "",
            "@media screen and (max-width: 991px) {",
            "}/* tablet end */",
            "",
            "@media screen and (max-width: 767px) {",
            "}/* sp end */",
            "",
        ]
    },

まとめ

いろいろ試行錯誤したので、UIデザインのよい勉強になりました。
これから、ソフトの画面を見る目が変わりそう〜