vscode에서 반각 또는 전각 공간이 아닌 공간을 시각화

공간에도 여러 가지 있는 것 같다

전각 스페이스에 조심하는 분은 많다고 생각합니다만, 스페이스라고 해도 반각 전각 이외에 여러가지 있는 것 같습니다.
htps //w w. 안텐아. 이. jp/XSL-Fu/Sop rt/Ku/Ku/2002032505. HTML

아래는 ruby로 puts하고 있는 것만의 코드입니다만 전부 다른 종류의 스페이스입니다. 1행째 이외는 전부 에러를 토해 줍니다.



vscode에서는 1행째의 점이나 2행째의 하이라이트와 같이 반각/전각 스페이스를 판별하는 설정은 여러가지 소개되고 있습니다만, 3-5행째의 수수께끼 스페이스들이 눈치채기 어렵습니다.

whitespace+로 수수께끼 공간 시각화

"whitespace+"라는 확장 기능을 사용하여 수수께끼 공간에 색을 칠합니다. 그런 다음 전각 공간에도 색상을 지정합니다.

・whitespace+ 도입

"whitespace+"로 검색하여 나온 것을 설치합니다.

· 설정 파일 열기

Shift+Command+P(Mac)
Ctrl+Shift+P(Windows)
에서 명령 팔레트를 엽니다.



"Whitespace+Toggle"은 기능 ON/OFF 전환
Whitespace+Config에서 설정 파일을 열 수 있습니다. Config를 엽니다.

· 설정 파일 편집

config.json이라는 파일이 열리므로 편집합니다.
우선은 3행째를 변경합니다. 초기 상태라면 VScode를 기동할 때마다 매번 「Whitespace+Toggle」을 할 필요가 있어 번거롭기 때문에, autoStart를 false로부터 true로 합니다.

# before
"autoStart": false,

# after
"autoStart": true,

다음이 본 기사의 주제입니다.


위에서 23행째의 쉼표(,) 다음에 다음을 추가합니다.

    {
      "name": "full-space",
      "enabled": true,
      "pattern": "\u3000",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(200, 200, 0, 0.5)",
          "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(200, 200, 0, 0.5)",
          "borderColor": "rgba(117, 141, 203, 0.4)"
        }
      }
    },
    {
      "name": "other-space",
      "enabled": true,
      "pattern": "[\u2000-\u2009]|\u200A|\u202F|\u205F",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(0, 0, 200, 0.5)",
          "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(200, 0, 0, 0.5)",
          "borderColor": "rgba(117, 141, 203, 0.4)"
        }
      }
    },

궁극적으로 다음과 같은 느낌이 있으면 OK입니다.
※길기 때문에 「・열기」를 누르면 열 수 있도록 하고 있습니다.

· 열기

{
  "mode": "all",
  "autoStart": true,
  "refreshRate": 100,
  "elements": [{
      "name": "space",
      "enabled": true,
      "pattern": "\\s",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(58, 70, 101, 0.3)",
          "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(117, 141, 203, 0.3)",
          "borderColor": "rgba(117, 141, 203, 0.4)"
        }
      }
    },
    {
      "name": "full-space",
      "enabled": true,
      "pattern": "\u3000",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(200, 200, 0, 0.5)",
          "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(200, 200, 0, 0.5)",
          "borderColor": "rgba(117, 141, 203, 0.4)"
        }
      }
    },
    {
      "name": "other-space",
      "enabled": true,
      "pattern": "[\u2000-\u2009]|\u200A|\u202F|\u205F",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(0, 0, 200, 0.5)",
          "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(200, 0, 0, 0.5)",
          "borderColor": "rgba(117, 141, 203, 0.4)"
        }
      }
    },
    {
      "name": "tab",
      "enabled": true,
      "pattern": "\\t",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(170, 53, 53, 0.3)",
          "borderColor": "rgba(170, 53, 53, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(223, 97, 97, 0.3)",
          "borderColor": "rgba(223, 97, 97, 0.4)"
        }
      }
    },
    {
      "name": "newline",
      "enabled": true,
      "pattern": "\\n",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "borderColor": "rgba(38, 150, 38, 0.3)"
        },
        "dark": {
          "borderColor": "rgba(85, 215, 85, 0.4)"
        }
      }
    },
    {
      "name": "trailing",
      "enabled": "unlessCursorAtEndOfPattern",
      "pattern": "[^\\S\\r\\n]+$",
      "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
          "backgroundColor": "rgba(58, 70, 101, 0.3)",
          "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
          "backgroundColor": "rgba(117, 141, 203, 0.3)",
          "borderColor": "rgba(117, 141, 203, 0.4)"
        }
      }
    }
  ]
}

작성한 후 명령 팔레트를 다시 열고 "Whitespace + Toggle"을 실행하십시오. 이제 다음과 같이 전각 공간이 노란색, 수수께끼 공간이 빨간색이 될 것입니다.
이러한 공간은 오류의 원래이므로 의도적으로 추가한 경우 이외에는 삭제하도록 유의합시다.



※확인하고 싶을 때는↓를 vscode에 카피＆페이스트 해 보세요

puts   "hankaku"  ## 半角スペース
puts　　"zenkaku"  ## 全角スペース
puts   "ensp"     ## 謎スペース1
puts   "emsp"     ## 謎スペース2
puts   "thinsp"   ## 謎スペース3

whitespace+ 자동 시작을 켜기(Mac)

autoStart를 true로 해도 어쨌든 설정이 꺼지는 일이 있는 것 같기 때문에 좀 더 망할 것입니다.

· vim으로 편집하기

※vim이 잘 모르는 경우는 다음의 「다른 에디터로 편집한다」를 참고해 주세요.

터미널에서 다음을 수행합니다.

vim ~/.vscode/extensions/davidhouchin.whitespace-plus-0.0.5/extension.js

vim이라는 편집기가 열립니다. "i"를 입력하면 편집 모드, "esc"를 입력하면 종료, 저장 등의 명령을 실행할 수 있습니다.
먼저 "i"를 입력하여 위에서 네 번째 줄의 var enabled = false;를 var enabled = true;로 만듭니다.
변경이 끝나면 "esc"를 입력하고 ":wq"를 입력하고 "Return"키를 입력하여 완료합니다.

· 다른 편집기로 편집

Finder에서 구성 파일을 엽니다. Finder를 시작하고 홈 디렉토리(집 표시)로 이동합니다.
그런 다음 Shift+Command+.를 입력하여 숨겨진 파일을 볼 수 있습니다.
숨겨진 파일이 보이면 다음 이미지와 같이 .vscode/extensions/davidhouchin.whitespace-plus-○○○ 안에 있는 extension.js를 엽니다.



extension.js를 열면 위에서 네 번째 줄 var enabled = false;을 var enabled = true;로 저장하면 완료됩니다.