[VSCode] 기본 세팅 & 확장 프로그램

☑️ 공통 설정 (파일>기본설정>설정)

• editor.tabSize : 2
• format:Wrap Line Length: 0
  
  
  

☑️ HTML 관련

• Auto Close Tag (닫기 태그 자동 생성)
• Auto Rename Tag (닫기 태그명 동시 변경)
• Korean Language Pack for Visual Studio Code (한글적용)
• Live Server (브라우저 확인시 코드 자동적용)
• open in browser (브라우저 열기)
• Bookmarks (북마크 기능)
• Material Icon Theme (비쥬얼스튜디오 코드 아이콘 변경)
• Beauty (저장시 html 자동정렬)
• Rainbow Brackets(태그별 컬러 변경)
• html tag wrapper (ctrl + i 부모태그 추가 )

☑️ 추가세팅

• ctrl K + ctrl S
• json 선택 및 아래 리스트 추가
  

☑️ CSS관련

• Beauty (자동 줄 맞춤)
• px to rem (px -> rem 으로 자동 변환 / alt+z 단축키)
• IntelliSense for CSS class names in HTML (css 클래스명 html 표시)
• Autoprefixer (자동 크로스브라우징 설정)
  1. 사용법 : f1키 > Autoprefixer :Run
  2.setting.json에 반영

"autoprefixer.options": {
        
        "grid": true,
        "browsers": [
            "last 4 versions",
            "ie >= 11",
            "> 5%"
        ]
    }

☑️ SCSS관련

• Ruby (ruby 플러그인)
• Sass
• Sass Lint
• Live Sass Compiler
  - 확장 설정 셋팅
  • ctrl+`
  • 사용자 > 확장 > Live Sass Compiler
  • Settings.json 에서 편집

"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css" //CSS 경로 설정 
        }
    ],
    "liveSassCompile.settings.generateMap": 
    false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ]

• 설치 완료 후 vscode 알림 영역에서 watch scss 클릭 시 scss 자동 컴파일