Visual Studio Code 추천 플러그인 / 탭 환경설정 / guide dot 표시하기 /사스 환경 만들기

 

Visual Studio Code 플러그인 가이드 환경설정, 사스 환경 만들기

Visual Studio Code 작업환경 세팅하기

 

업무 특성상 파견이 잦기 때문에 컴퓨터를 리셋하고 다시 환경을 세팅해야 할 때가 많습니다. 때문에 저는 제가 사용하는 플러그인들과 꼭 해야 하는 환경설정은 네이버 개인 카페에 비공개로 작성해두고 매번 참고하기 때문에 이번 기회에 포스팅에 한번 더 정리해 두려고 합니다. 세팅을 할 때면 git과 node.js도 항상 함께 설치해주지만 오늘은 VS Code 설치 및 환경설정을 중점적으로 정리해보겠습니다.

 

1. Visual Studio Code 설치하기 

줄여서 VS code라고 많이 말합니다. VS code는 구글 검색창에 Visual Studio Code라고 검색하시면 무료로 손쉽게 다운받으실 수 있습니다. window와 mac 버전이 나뉘어 있으니 본인의 운영체제에 맞는 VS code를 다운로드하시면 됩니다. 

 

2. Visual Studio Code 플러그인 추천

코드를 작성할 때 하드코딩이 물론 좋지만, 업무를 더 효율적으로 만들어주는 플러그인들이 있습니다. 제가 항상 설치해두는 플러그인을 적어보겠습니다. 

Visual Studio Code 추천 플러그인

• Live Server: 수정하는 즉시 서버에 반영되어 보면서 작업하기 좋습니다.
• Beautify: [ctrl + b] 단축키를 누르시면 자동정렬 됩니다
• HTML snippets: <div> 이런 식으로 꺽쇠까지 쓰지 않아도 div 만 치시고 enter 누르시면 자동으로 닫는 태그까지 완성됩니다.
• html tag wrapper: 감싸고자 하는 태그를 마우스로 블록을 만드시고 [ctrl + i]를 누르시면 기본적으로 div태그가 감싸 집니다.
• HTML Hint: 닫는 태그가 없는 등의 태그 오류들을 잡아줍니다.
• IntelliSense for CSS class name in HTML: 작업환경에서 이미 정의해놓은 class명을 바탕으로 초반에 몇 자만 적어두면 비슷한 class명들을 그룹 지어 보여줍니다. 그중 사용하고자 하는 class를 선택해서 enter를 치면 자동 완성됩니다.
• Prettier - Code formatter: 포맷에 맞지 않는 코드가 있을 시 [ctrl + shift + p]을 누르면 자동으로 설정해놓은 포맷으로 바꿔줍니다.
• GitLense: git으로 형상관리를 할 시에 수정된 파일과 그렇지 않은 파일을 한눈에 확인할 수 있습니다.
• ESLint: 자바스크립트 오류를 잡아줍니다.
• Reactjs code snippets: react 코드를 자동완성시켜줍니다. 
• Korean Language Pack for Visual Studio Code: 가끔 한글로 보고 싶을 때 설치해주는 플러그인입니다.
• TSLint: 타입스크립트 오류를 잡아줍니다.
• Project Manager: 프로젝트의 전환을 쉽게 도와줍니다.
• Auto Close Tag: 시작 태그를 쓰면 닫기 태그가 자동으로 삽입됩니다. ex) <div> 입력시 </div> 자동으로 삽입
• vscode-styled-components: script인 styled-component를 css highlighting으로 바꿔줌

사스

 

• Sass: 사스 파일을 css파일에 mapping 해주고 글자 색을 sass환경에 맞게 보여주며 코드를 자동완성시켜줍니다.
• Sass Lint: Sass에서 오류를 잡아줍니다.
• Live Sass Compiler: 수정하는 시점에서 바로바로 reload를 해줍니다.

3. 탭 환경설정 하기 

보통 탭을 사용하실 때 탭을 눌러서 4칸을 사용하는 것으로 알지만, 저희 회사 회사 특성상 두 칸을 사용하고 있습니다. 

File - Preferences - Settings (환경설정)에서 'tab size'를 검색해서 원하는 탭 사이즈로 변경합니다. 하지만, tab을 2라고 설정해 두었더라도 에디터마다 탭 설정 칸수가 다르기 때문에 다른 에디터에서 보면 4칸으로 보일 수 있습니다. 이때 'detect indentation'을 검색해서 체크 해주면 2로 정해놓은 세팅이 다른 에디터에서도 그래도 유지되게 됩니다.

 

4. Guide dot 표시하기

Visual Studio Code html guide line / dot 표시하기

• view - render Whitespace 
• 위 메뉴가 가끔 없을 때도 있습니다. 이 때 File - Preferences - Settings 환경설정에서 render Whitespace를 검색하시면 셀렉트 박스가 보입니다. 여기서 'boundary'를 선택합니다.

5. 불편한 가로 스크롤 없애기

코드가 조금만 길어져도 가로 스크롤이 생기게 되는데 코드 보기가 상당히 불편해서 알아보게 된 기능입니다.  setting - preferences  검색창에서 'wordwrap' 기능을 'on'으로 맞춰주면 가로 스크롤이 없어집니다. 단축키는 'alt + z'입니다.

6. Sass 사스 가능한 환경 만들기 

위에서 언급한 Sass,  Sass Lint, Live Sass Compiler를 설치하셨다면 사스를 사용할 준비를 완료하신 것입니다. 참 쉽지요? 

 

Sass 사스 파일 컴파일하는 법

1. 본인의 index.html에 스타일 파일 ex) common.css를 링크로 연결시킵니다.
   <link rel="stylesheet" href="./css/common.css">
2. 연결시킨 css파일명과 동일한 사스 파일을 만듭니다. ex) common.scss
3. 하단의 Watch Sass를 클릭합니다. 클릭하면 자동으로 ex) common.css.map 이 생성됩니다.

Sass 사스 파일 환경설정

File - Preferences - Settings 환경설정에서 'live sass compile'를 검색해서 'Edit in settings.json'을 클릭해서 아래와 같은 설정을 해줍니다.

json으로 sass 환경설정하기

 

"liveSassCompile.settings.generateMape": fasle, (선택)

위와 같이 설정하면 map 파일이 생기지 않는다. default 값이 true 이기 때문에 true는 따로 입력하지 않아도 됩니다.

 

"liveSassCompile.settings.includeItems":["파일 경로와 파일명"], (선택)

특정 파일만 컴파일하고 싶을 때 사용하는 옵션입니다.

 

"savePath" 를 다음과 같이 넣으면 depth가 아무리 깊어져도 그 자리에 .map 파일이 생깁니다

    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ]