VSCode CSS, SCSS 코드 한줄로 정렬하는 플러그인

비주얼 스튜디오 코드(Visual Studio Code)는 사용자의 취향에 따라 다양한 플러그인을 설치할 수 있다.

오늘은 그 중에 CSS와 SCSS에서 사용할 수 있는 Formatter를 추천하려고 한다.

Formatter란 코드를 더 깔끔하고 가시성과 가독성이 좋게 자동정렬해주는 기능으로 대표적으로 Beautify와 Prettier 등이 있다. 나도 두 플러그인을 모두 사용해봤지만 Prettier는 내 취향과는 다른 형태로 강제 적용되다 보니 Beautify를 선호한다.

Beautify를 한동안 쓰면서 큰 불편함은 없었지만 몇 달전부터 내 코드 정렬 방식에 변화가 생기면서 문제가 생겼다.

 

.main_news_section .main_news_container {
  max-width: 1280px;
  margin: 0 auto;
}

.main_news_section .main_news_container .news_contents {
  overflow: hidden;
}

.main_news_section .main_news_container .news_contents img {
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.main_news_section .main_news_container .news_contents img:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

 

CSS에서 Beautify를 사용하면 위 형태로 정렬이 되는데 이것은 이전 내 정렬 방식과도 같았다. 하지만 시간이 흐르면서 위 방식에서 단점을 느꼈는데, 내용이 많을수록 코드가 길어지면서 가독성이 떨어진다는 것이었다.

 

.main_news_section.main_news_container { max-width: 1280px; margin: 0 auto; }
.main_news_section.main_news_container.news_contents { overflow: hidden; }
.main_news_section.main_news_container.news_contentsimg { -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; }
.main_news_section.main_news_container.news_contentsimg:hover { -webkit-transform: scale(1.2); transform: scale(1.2); }

그래서 하나의 요소 혹은 선택자에 대해서 줄바꿈 없이 한줄로 정렬하는 방식을 선호하게 되었다.

이 방식으로 코드를 자동정렬해주는 플러그인을 찾아 봤지만 검색이 쉽게 되지 않았다.

다행히 최근에 와서야 해당 기능이 있는 플러그인을 찾을 수 있었다.

 

css-compact - Visual Studio Marketplace

css-compact 플러그인을 설치하여 alt + shift + f 를 누르면 코드가 한줄로 정렬된다.

 

 

 

 

하지만 문제는 여기서 말끔히 해결되지 않았다.

CSS만 사용한다면 이제 문제 없지만 나는 최근에 SCSS를 사용하고 있다. 이 플러그인은 오직 CSS에만 사용 가능했다.

그래서 결국 또 검색하고 검색... 정말 많은 방식으로 검색해봤다. 다행히 SCSS에서도 비슷한 플러그인을 찾을 수 있었다.

 

scss-format - Visual Studio Marketplace

 

/* SCSS */

header {
  display: flex;
  width: 100%;
  height: 80px;
  background: #000;
  z-index: 10;
  position: relative;
  bottom: 0;
  justify-content: center;
  flex-direction: row;
  padding: 5px;
  border-bottom: 1px solid #333;
  align-items: center;
}

.mobile_header_container {
  display: none;
}

#header_logo {
  flex: 1 0 auto;

  img {
    width: 150px;
    height: 100%;
  }
}

#header_main {
  flex: 2 0 auto; // align-self: flex-end;

  a {
    color: #fff;
  }

  >ul {
    display: flex;
    justify-content: left;
    position: relative;
    bottom: 0;
    transition: left .4s ease-in-out;
  }

  li {
    font-size: 20px;
    margin: 0 15px;
    padding: 10px 0;
  }

  .header_team_nav {
    cursor: pointer;
    position: relative;

    ul {
      position: absolute;
      top: 40px;
      left: 0;
      border-radius: 5px;
      background: $t1MainColor;
      height: 70px;
      padding: 15px;

      li {
        display: flex;
        align-items: center;
      }
    }

    &::after {
      content: '\f0d7';
      font-family: 'Font Awesome 5 Free';
      font-weight: 700;
    }
  }
}

/* SCSS */

header { display: flex; width: 100%; height: 80px; background: #000; z-index: 10; position: relative; bottom: 0; justify-content: center; flex-direction: row; padding: 5px; border-bottom: 1px solid #333; align-items: center; }
.mobile_header_container { display: none; }
#header_logo {
  flex: 1 0 auto;

  img { width: 150px; height: 100%; }
}
#header_main {
  flex: 2 0 auto; // align-self: flex-end;

  a { color: #fff; }
  >ul { display: flex; justify-content: left; position: relative; bottom: 0; transition: left .4s ease-in-out; }
  li { font-size: 20px; margin: 0 15px; padding: 10px 0; }
  .header_team_nav {
    cursor: pointer; position: relative;

    ul {
      position: absolute; top: 40px; left: 0; border-radius: 5px; background: $t1MainColor; height: 70px; padding: 15px;

      li { display: flex; align-items: center; }
    }
    &::after { content: '\f0d7'; font-family: 'Font Awesome 5 Free'; font-weight: 700; }
  }
}

scss-format 을 설치하고 Ctrl + i 혹은 Ctrl + j 를 누르면 코드가 아래처럼 변경된다.

물론 이 단축키는 설정에서 변경 가능하다. 기존 단축키는 양손을 사용해야 하기 때문에 나는 Ctrl + e 로 수정했다.

 

하지만 이 플러그인에는 딱 한가지 아쉬운 점이 있는데 코드 영역을 선택해야 한다. 파일 내 모든 코드를 바꾸고 싶다면 Ctrl + A, 특정 영역만 바꾸고 싶다면 드래그나 Shift + 방향키로 선택한 후 단축키를 입력해야 한다.

2% 아쉽지만 그래도 감사한 마음으로 써야 겠다.

 

코드 정렬방식은 취향이라지만 나는 정말 오랜 기간 이 기능을 지원하는 플러그인을 찾아 헤멨고 국내에서는 도저히 해답을 찾을 수 없었고 해외 쪽으로도 한참 찾아 다녔다. 나와 같은 취향을 가진 사람은 고생하지 말기를...