배경

본격적으로 웹의 일을 하게 되고 나서 계속 사용하고 있던 에디터 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를 다운로드하여 적용.
ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기 = 후에 y. b rac cts-gght-p
비슷한 개념의 몇 가지가 있지만, 이것이 좋아했습니다.

더욱 사용하기 쉽도록
설정에서 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", // 選択している行の強調色
        },
    }

참조
htps : // 여기.ゔぃすあ lsつぢお。 코 m / 아피 / 레후 렌세 s / 테메 메코 r # sc 로트

3부: 아이콘 테마 변경

Atom Icons
ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기 = 에 m 얕은 l. 나중에

확장자마다 다채로운 아이콘보다 간단한 편을 좋아하기 때문에.
심플한 가운데도, 이미지와 폴더와 그 밖의 정도의 차이가 있어 딱 좋았다.

4부: 스니펫 등록

①명령 팔레트에서 Snippet으로 검색

②언어를 선택한다(혹은 글로벌)

③json 파일에 쓰기
서식은 코멘트에 넣고 있는 대로입니다만, 이쪽을 참고로 했습니다.
h tps : //는 소문. 코 m / vs 코데 - s에 페트 /
어려울 것 같지만 익숙해지면 의외로 간단.

예로서 자신이 설정한 것은 이쪽
글로벌

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 디자인의 좋은 공부가 되었습니다.
앞으로 소프트 화면을 보는 눈이 바뀔 것 같아요~