• 웹 퍼블리셔를 위한 VS CODE 확장 프로그램

    2020. 4. 5.

    by. 나나 (nykim)

     

    뒤도 안 돌아보고 백업없이 포맷하는 바람에 적어보는 익스텐션 리스트 🤓

    웹 퍼블리셔가 설치해 두면 좋은 확장 프로그램을 모아봤습니다.

     

    멋진 익스텐션을 발견할 때마다 수시로 수정할 예정입니다.

     

     


     

     

    범용 익스텐션

     

    Prettier - Code formatter

     

    [링크]

    추천 1순위!!! 꼭꼭 설치하세요! 주요 문법(HTML, SCSS, JSON 등)을 예쁜 형태로 정리해 줍니다.

     

    Beautify

     

    [링크]

    Prettier와 비슷한 익스텐션입니다. 에디터 내 코드를 예쁘게 정렬할 수 있어요.

     

     

    vscode-icons

     

     

    [링크]

    VS CODE 내에 이런저런 아이콘을 추가해 줍니다. 아이콘이 큼직하기 때문에 무슨 파일인지 한눈에 알 수 있습니다.

     

     

     

    indent-rainbow

     

    [링크]

    인덴트 단계를 색상으로 예쁘게 구분해 줍니다. HTML을 마크업할 때나 SCSS 내에서 depth가 생길 때 요긴합니다.



     

    WakaTime

     

    [링크]

    코딩에 소비한 내 인생이 얼마나 되는지 알고 싶다면? 그럴 때 쓰윽 설치해 보는 익스텐션.

    에디터 내에서 작업한 시간을 체크해 줍니다. wakatime.com에 접속하면 자신이 어떤 언어로 얼마나 작업했는지 더 정확한 리포트를 볼 수 있어요. 단, 별도 회원가입이 필요합니다.

     

     

     

    Live Server

     

    [링크]

     

    따로 웹서버 열기 귀찮을 때 요긴한 익스텐션입니다. 실시간으로 확인하면서 작업이 가능하기에 편리합니다.

    하단의 Go Live 버튼을 누르거나, Cmd+L & Cmd+O 를 누르면 기본값으로 5500포트를 사용하는 페이지가 열립니다.

    하단의 버튼을 다시 누르거나, Cmd+L & Cmd+C 를 눌러 웹 서버를 닫을 수 있습니다.

     


     

     

     

    마크업용 익스텐션

     

    Auto Close Tag

     

    [링크]

    HTML 작성 시 닫는 태그를 자동으로 완성시켜 줍니다.

     

     

     

    Auto Rename Tag

     

    [링크]
    HTML에서 여는 태그를 수정하는 경우 닫는 태그도 자동으로 바꿔 줍니다.

     

     

     

    Lorem ipsum

     

    [링크]

    Command + P 를 눌러 > Lorem Ipsum을 입력하면 로렘 입숨을 자동으로 생성해 입력해 줍니다.

     

     

     


     

    스타일링용 익스텐션

     

    Color Highlight

     

    [링크]

    색상 코드에 해당 색상에 맞는 색을 보여줍니다. 무슨 색인지 바로 알 수 있어서 직관적인 파악이 가능합니다.

     

     

    stylelint

     

    [링크]

    CSS 문법을 체크해 줍니다. 졸면서 적었을 때 유용합니다(?)

     

     


     

    덤으로 적어보는 VS CODE 단축키 (맥용)

    Opt + Shift + Up = 줄 또는 단락 복사

    Opt + Up/Down = 줄 또는 단락 이동

    Cmd + Ctrl/Opt + F = 검색 결과 교체하기

    Ctr + Tab = 열려있는 다른 탭 선택하여 이동

    Cmd + Shift + [/] = 열려있는 다른 탭 좌/우로 이동

     

    댓글 0