VSCode 로 개발하기

VSCode 내부에서 .gitignore 파일을 생성하기 위한 확장 프로그램입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=rubbersheep.gi

사용법

Command Palette 에서 gi 입력

운영 체제, IDE 및 프로그래밍 언어를 선택

생성된 .gitignore 파일 확인

추가

확장 없이 사용할 수 있는 사이트 .gitignore.io

블록을 선택할 필요 없이 가능한 정렬을 자동 감지하여 코드의 블록을 정렬해 줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=SanderPilon.blockalign

단축키

[ { "key": "ctrl+\", "command": "extension.blockalign", "when": "editorTextFocus" }, ]

주석내 경고, 정보, 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

상태바에 git counters 를 표시해 줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=lamartire.git-indicators

Added

Removed

Modified (added and removed)

html 파일의 CSS id 및 class 가 정의된 각 CSS 를 보여줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:

• Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
• Go To: jump directly to the css file or open it in a new editor (F12)
• Hover: show the definition in a hover over the symbol (Ctrl+hover)