atom으로 indent 시각화

2958 단어 editorATOMindent
편집자 중 하나 인 atom을 사용할 때,
『indent가 가시화할 수 있으면 깨끗한 코드를 쓰는데 도움이 되지 말아라! 』
라고 생각 그 기능을 구현했습니다.
그 과정을 비망록으로 남깁니다.
  • atom 설치
  • Atom > Preferences 를 클릭 (아래의 이미지는 Help에서 「preference」라고 조사해 위치를 확인하고 있다)

  • 설정 열기
  • 이미지에서 위에서 두 번째로 "Editor"를 클릭하십시오


  • 아래로 스크롤하면 나타나는 Show Invisibles에 체크를 넣는다(이미지는 넣은 후)
  • 그 위에 Show Indent Guide를 체크하면 세로로 선이 들어간다 (개인 저택에 방해이므로 넣지 않는다)
  • "·"의 색이 얇기 때문에 styles.less를 열고 다음 정보를 추가하십시오.

    styles.less
    @invisible-color: rgba(197, 200, 198, 0.4);
    
    atom-text-editor::shadow {
    
    .indent-guide {
    color: @invisible-color;
    }
    
    .invisible-character {
    color: @invisible-color;
    }
    
    }
    

    위의 설정은 github상?에서 설정하고 있다 @invisible-color을 덮어쓰고 있을까(개발하고 있는 코드에는 관계 없기 때문에 깊이는 조사하지 않습니다.
    취향에 따라 rgba의 네 번째 값을 변경하여 색상의 농도를 변경할 수 있습니다. (rgba를 조사하면 어떤 색으로도 바꿀 수 있어요)
    1이 상한에서 1에 가까워질수록 짙어지고 참고까지 0.6으로 설정하고 있습니다^^

    이하 참고로 한 qiita입니다.
    [ htps : // m / shib k / ms / 62931 A7A 3b6dc617623 ]
  • 좋은 웹페이지 즐겨찾기