로그인

검색

Extra Form

Visual Studio Code


마이크로소프트에서 무료로 제공하는 Code 편집기

웹 코딩에 이만한 편집기는 없는듯 하다. 

 

확장도구(Extensions)만 잘 설치하면 최강의 편집기로 진화한다. 

 

 

 

Visual Studio Code Extension 

 

 

 

  • 20220212_173731.jpg Extensions

     

  • 20220212_174104.jpgAuto Rename Tag 태그를 변경할 때 여는 태그 또는 닫는 태그 중 하나만 변경해도 두 태그를 동시에 자동으로 변경해 줌.

  • 20220212_174519.jpgAuto Close Tag 여는 태그 <OOO> 를 입력하면 닫는 태그 </OOO> 를 자동으로 완성해 줌. vs code 1.6 버전 부터는 기본으로 포함되어 있으나 html 만 작동하므로 다른 언어에 적용하기 위해서는 설치해 주는 것이 좋음.  Auto Rename Tag와 함께 사용하면 Good!

  • 20220212_175259.jpgBracket Pair Colorizer 2 프로그래밍 언어는 대부분 괄호로 구분하여 명령이 입력되거나 구분이 변경됩니다. 다수의 괄호가 중첩으로 사용되는 경우 관련된 괄호 쌍을 구분하기가 어려운데, { 괄호 쌍에 맞춰 ( 색상 ) 을 구분해 줌 } 으로 구분이 편해 집니다. 

  • Korea Language Pack for Visual Studio Code 한국어 언어 팩2022-02-15060419.png

  • Color Highlight 색상값을 실제 색상과 함께 보여줌2022-02-15060820.png

  • CSS Peek2022-02-15061600.png html 태그 상에서 클릭스를 찾아 CSS 상의 클래스 정의 위치로 이동할 수 있음.
    Ctrl 키를 누른 채 id 또는 class 에 마우스를 클릭하면 CSS 정의 내용을 보여주고, 수정하면 CSS 에 반영됨. CSS 정의 내용을 보여주는 창의 상단 파일명을 클릭하면 해당 위치로 이동함.

  • indent-rainbow 2022-02-15061924.png들여쓰기 단계별로 색상 음영을 주어 구분하기 편하도록 함.

  • IntelliSense for CSS class names in HTML 2022-02-15062439.png태그 작성시 class 부분의 적용가능한 클래스 목록을 지능적으로 보여줌.

  • Path Intellisense 2022-02-15063059.png태그 작성시 이미지의 경로를 자동으로 보여줌

  • Live Server 2022-02-15063447.png코드 변경시 실시간으로 결과를 확인할 수 있음. 아직 어떻게 사용하는지는 모르겠음.

  • Error Lens 2022-02-15064125.png코드에 오류가 있는 경우 알려줌.

  • 20220319_084448.jpgPrettier 언어별 양식에 맞게 코드를 정렬해 줌. Code formatter 의 일종

    Prettier php 플러그인 - Prettier 를 이용하여 PHP도 정렬할 수 있는 플러그인
    -- 설치방법  Node.js 설치(이 때 npm이 같이 설치됨)   VCCode 재시작   VCCode 화면에서 Ctrl + ` 하여 터미널 열기   터미널에서 CD 명령으로 C:\Users\사용자명\.vscode\extensions\esbenp.prettier-vscode-버전번호 폴더(prettier 설치 경로)로 이동   npm 으로 Prettier php 플러그인 설치 → npm install @prettier/plugin-php    VCCode 설정에 가서 아래 내용을 setting.json 에 추가해 줌. 

    "[php]": {     
         //저장시 자동 정렬 설정 
        "editor.formatOnSave": true 
    },
    "prettier.printWidth": 120,  //한 행 당 최대 글자 수. 초과하면 다음 줄에 표시 
    "prettier.singleQuote": true,  //작은 따옴표('') 사용 여부. false 시 큰 따옴표("") 
    "prettier.useTabs": false,  //여백을 tab으로 쓸지 여부. false 시 space 사용 
    "prettier.tabWidth": 2,  //스페이스 n번만큼의 공백 크기


       

  • 20220319_094548.jpgFormat HTML in PHP HTML과 PHP가 섞여 쓰이고 있을 때는 Prettier가 작동하지 않음. 이 플러그인은 HTML과 PHP가 섞여 쓰이고 있는 경우에도 Prettier가 정상 작동하도록 해줌.

  • 20220319_094233.jpgHighlight Matching Tag 편집중인 태그 또는 태그 범위 내에 커서가 있을 때 해당 태그의 시작과 끝을 알려줌.

  • ESLint  코드의 오류를 바로 확인할 수 있도록 오류사항을 보여줌.20221208_213828.jpg

  • todo highlight // TODO : // FIXME : 등 주석을 눈에 잘 띄이도록 색상을 입혀줌. 20221208_214458.jpg

  • Peacock 프로젝트마다 VSC의 창 색상을 다르게 표현하여 프로젝트간 구분을 쉽게 할 수 있도록 만들어줌.2023-04-02 07 24 27.jpg

  • AICodeHelper  ChatGPT를 이용해서 코딩을 도와 주는 도구입니다. 유료이므로 OpenAI API키AiCodeHelper.jpg가 필요합니다. 

    사용량은 https://platform.openai.com/account/usage 에서 확인할 수 있습니다. 사용법은 오른쪽 배너를 클릭하면 유튜브에서 확인 할 수 있습니다. 


  1. 01
    Nov 2022
    10:01

    파일 불러올 때 한글이 깨지는 경우

    파일을 불러올 때 한글이 깨져보이는 경우 설정 방법 1. 파일> 기본설정> 설정> 텍스트편집기> 파일> Auto Guess Encoding : 체크 Encoding : UTF-8 (자신이 주로 사용하는 값으로 설정) 2. 화면 오른쪽 하단 상태표시줄에서 Encoding부분 클릭 후 적당한 언어...
    Read More
  2. 20
    Jan 2022
    16:39

    Visual Studio Code - 마이크로소프트에서 제공하는 코드 편집 도구

    Visual Studio Code 마이크로소프트에서 무료로 제공하는 Code 편집기 웹 코딩에 이만한 편집기는 없는듯 하다. 확장도구(Extensions)만 잘 설치하면 최강의 편집기로 진화한다. Visual Studio Code Extension
    Read More
Board Pagination Prev 1 Next
/ 1