VSCode 로 개발하기

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

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

Javadoc-style 주석 블록

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

언어 지원

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

GitHub 을 위한 Pull Request Provider

링크 : https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

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

Node.js debugging 지원 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=ms-vscode.node-debug2

This extension is bundled with Visual Studio Code and together with Node Debug (legacy) forms the Node.js debugging experience.

Node Debug is the debugger for Node.js versions >= 8.0.

See a general overview of debugging in VS Code here.

Documentation for Node.js specific debugging can be found here.

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

원격 파일(Azure, Dropbox, S3, SFTP, FTP or Slack 와 같은)을 로컬 파일 같이 처리하기 위한 멀티 프로토콜을 지원합니다.

링크 : https://marketplace.visualstudio.com/items?itemName=mkloubert.vscode-remote-workspace

새로운 Visual Studio Code FileSystem API 의 다중 프로토콜 지원. 특히 로컬 파일 같은 원격 파일 처리에 적합합니다.

사용 방법

GUI에서 .code-workspace를 사용하여 파일을 작성 (또는 갱신) 하고여십시오 File >> Open Workspace....

{
    "folders": [{
        "uri": "sftp://my-user:my-password@example.com?debug=1",
        "name": "My SFTP folder"
    }]
}

.code-workspace 파일을 만든 적이 없다면 홈 디렉토리의 새 폴더 (예 : "VSCodeworkspace")로 시작할 수 있습니다. 제공된 json 파일을 새 파일로 복사하십시오. 그런 다음 VSCode GUI 를 사용하여 해당 파일을 엽니다 File >> Open Workspace....

매개 변수 정보

매개 변수는 key-value-pair 로 URI 의 설정이어야 하며 .code-workspace 파일의 settings 섹션에는 설정되지 않아야 합니다.

SFTP 연결의 debug 를 1로 설정하려면 다음과 같이하십시오 .

{
    "folders": [{
        "uri": "sftp://myUser:myPass@example.com?debug=1",
        "name": "My SFTP folder"
    }]
}

명령

F1을 누르고 다음 명령 중 하나를 입력하십시오 :

로그

로그 파일은 .vscode-remote-workspace/.logs 사용자 홈 디렉토리의 하위 폴더에 하루 단위로 저장됩니다.

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.