VSCode 로 개발하기

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=kevinkyang.auto-comment-blocks

Javadoc-style 주석 블록

/** 입력 으로 블록 주석을 시작시 Enter 키를 누르면 확장 블록을 닫습니다. 주석 블록 안에있는 동안, 확장은 모든 새로운 줄의 시작 부분에 별표를 삽입하고 들여 쓰기를 고려하여 주석을 정렬합니다.

언어 지원

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=philsinatra.nested-comments

원래 주석을 유지하고 코드 섹션에서 주석을 신속하게 토글 할 수 있게 해줍니다.

예제들

HTML 구문

<main>
  <div class="container">
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!-- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> -->
  </div>
</main>

Becomes:

<!-- <main>
  <div class="container">
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!~~ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> ~~>
  </div>
</main> -->

example {
  /* display: flex; */
  transition: all 0.5s;
  /* user-select: none; */
  background: linear-gradient(to bottom, white, black);
}

Becomes:

/*.example {
  /~ display: flex; ~/
  transition: all 0.5s;
  /~ user-select: none; ~/
  background: linear-gradient(to bottom, white, black);
}*/

Usage

확장 프로그램을 실행하려면 주석 처리 / 주석 해제할 텍스트를 강조 표시해야 합니다.

Default Keybindings

• Mac: cmd + alt + /
• Windows: ctrl + alt + /

Extension Settings

다음 언어가 지원됩니다.

• asp
• cfm
• css
• htm
• html
• jsx
• md
• njk
• php
• svg
• tsx
• twig
• vue
• xml
• xsl

* 버젼 2.2.6 으로 PHP 에서 사용시 주석처리에 문제가 발생 할수도 있습니다.

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

주석, 문자열, 문서 등에 앵커 태그를 배치하고 쉽게 찾을 수 있게 해줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=ExodiusStudios.comment-anchors

앵커 유형

작업공간 앵커

사용자 정의 태그

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

간단하고, 의존적인 PHP DocBlocking 확장 패키지입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker

Features

• /** 후에 클래스, 함수, 클래스 속성 위의 완성 Snippet
• DocBlock에서 Enter 키를 누를 때 DocBlock이 지속
• @param, @return, @throws 같은 DocBlock 태그의 완성 
• 서명으로부터 param 및 return 형의 추정

지원하는 DocBlock 태그

주석내 경고, 정보, TODO 등의 주석을 색을 이용하여 표현해줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

기본 설정

멀티 라인을 지원할지 설정합니다.

"better-comments.multilineComments": true

일반 텍스트 주석을 지원할지 설정합니다.

"better-comments.highlightPlainText": false

표현할 주석을 설정 하거나 추가할 수 있습니다.

"better-comments.tags": [
  {
    "tag": "!",
    "color": "#FF2D00",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "?",
    "color": "#3498DB",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "//",
    "color": "#474747",
    "strikethrough": true,
    "backgroundColor": "transparent"
  },
  {
    "tag": "todo",
    "color": "#FF8C00",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "*",
    "color": "#98C379",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]

지원언어

• Ada
• AL
• C
• C#
• C++
• Clojure
• COBOL
• CoffeeScript
• CSS
• Dart
• Dockerfile
• Elixir
• Erlang
• F#
• Go
• GraphQL
• Groovy
• Haskell
• Haxe
• HiveQL
• Java
• JavaScript
• JavaScript React
• JSON with comments
• Julia
• Kotlin
• LaTex
• Less
• Lisp
• Lua
• Makefile
• Nim
• MATLAB
• Objective-C
• Objective-C++
• Pascal
• Perl
• Perl 6
• PHP
• Pig
• PL/SQL
• PowerShell
• Python
• R
• Racket
• Ruby
• Rust
• Sass
• Scala
• SCSS
• ShaderLab
• ShellScript
• SQL
• Swift
• Terraform
• TypeScript
• TypeScript React
• Visual Basic
• Vue.js
• YAML