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

prettier/prettier 를 사용한 코드 포맷터 ( JavaScript / TypeScript / Css / HTML 등 지원 )

링크 : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Format On Save

Respects editor.formatOnSave setting.

설정 범위를 지정하여 언어별 저장시 포맷을 사용하도록 설정할 수 있습니다.

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

Settings

Prettier's Settings

Settings will be read from (우선순위로 나열):

1. Prettier configuration file
2. .editorconfig

Or if no prettier configuration file exist

1. .editorconfig
2. VSCode prettier's settings (기본값은 아래 설명되어 있음)

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: 'none')

Controls the printing of trailing commas wherever possible. Valid options:

• "none" - No trailing commas
• "es5" - Trailing commas where valid in ES5 (objects, arrays, etc)
• "all" - Trailing commas wherever possible (function arguments)

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

prettier.parser (default: 'babylon') - JavaScript only

Which parser to use. Valid options are 'flow' and 'babylon'.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.proseWrap (default: 'preserve')

(Markdown) wrap prose over multiple lines.

prettier.arrowParens (default: 'avoid')

Include parentheses around a sole arrow function parameter

prettier.jsxSingleQuote (default: false)

Use single quotes instead of double quotes in JSX.

prettier.htmlWhitespaceSensitivity (default: 'css')

Specify the global whitespace sensitivity for HTML files. Learn more here

prettier.endOfLine (default: 'auto')

Specify the end of line used by prettier. Learn more here

VSCode specific settings

These settings are specific to VSCode and need to be set in the VSCode settings file. See the documentation for how to do that.

prettier.eslintIntegration (default: false) - JavaScript and TypeScript only

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from ESLint rules.

prettier.tslintIntegration (default: false) - JavaScript and TypeScript only

Use prettier-tslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from TSLint rules.

prettier.stylelintIntegration (default: false) - CSS, SCSS and LESS only

Use prettier-stylelint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.

prettier.requireConfig (default: false)

Require a 'prettierconfig' to format

prettier.ignorePath (default: .prettierignore)

Supply the path to an ignore file such as .gitignore or .prettierignore. Files which match will not be formatted. Set to null to not read ignore files. Restart required.

prettier.disableLanguages (default: ["vue"])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Prettier resolution

This extension will use prettier from your project's local dependencies. Should prettier not be installed locally with your project's dependencies, a copy will be bundled with the extension.

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) 입니다.

Kotlin 프로그래밍 언어에 대한 구문 지원을 하는 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=mathiasfrohlich.Kotlin

Features

• 구문 강조
• 코드 스니펫
• 지역 코드 접기

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

Kotlin 을 위한 스마트 코드 완성, 진단, 구문 강조 및 기타를 지원하는 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=fwcd.kotlin

Features

Autocomplete

Signature help

Hover

Go-to-definition, find all references

Document symbols

Global symbols

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

코드 작성자를 시각화하고 Git 저장소를 완벽하게 탐색하고 강력한 비교 명령을 지원하는 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

GitLens

GitLens is an open-source extension for Visual Studio Code created by Eric Amodio. While GitLens is generously offered to everyone free of charge, if you find it useful please consider supporting it.

GitLens simply helps you understand code better. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Explore the history and evolution of a codebase.

Here are just some of the features that GitLens provides,

• a GitLens explorer to navigate and explore repositories
• a GitLens File History explorer to navigate and explore file histories
• an on-demand GitLens Results explorer to navigate and explore commit searches, visualize comparisons between branches, tags, commits, and more
• authorship code lens showing the most recent commit and # of authors to the top of files and/or on code blocks
• an unobtrusive current line blame annotation at the end of the line
• on-demand gutter blame annotations, including a heatmap, for the whole file
• on-demand gutter heatmap annotations to show how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold)
• on-demand recent changes annotations to highlight lines changed by the most recent commit
• a status bar blame annotation showing author and date for the current line
• commit search — by message, author, filename, commit id, or code changes
• many powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc
• and so much more

GitLens is powerful, feature rich, and also highly customizable to meet your specific needs — find code lens intrusive or the current line blame annotation distracting — no problem, it is quick and easy to turn them off or change how they behave via the built-in GitLens Settings editor, an interactive editor covering many of GitLens' powerful settings. While for more advanced customizations, refer to the GitLens settings docs and edit your vscode user settings.