VS 코드: 너는 그 확장이 필요 없어.

번역Japanese (日本語).
최근에 나는 VS 코드에서 더욱 깊이 있게 발굴하여 재미있는 발견을 얻었다.상당히 많은 기능과 설정이 많은 유행하는 확장 작업을 감당할 수 있다.

1. Auto renaming HTML tags

2. Auto closing HTML tags

3. Synchronizing Settings

4. Auto import modules

5. Snippets for HTML and CSS

6. Fake text (Dummy text)

7. Autotrimming

1. HTML 태그 자동 이름 바꾸기
HTML 태그 쌍의 이름을 바꾸려면 편집을 한 번만 하면 됩니다.


1.1. 내선

Auto Rename Tag(3.3M 다운로드): "자동으로 이름이 바뀐 HTML/XML 태그는 Visual Studio IDE와 동일합니다."

1.2. 배경.

Editor: Linked Editing: "편집기에서 링크 편집을 활성화했는지 여부를 제어합니다. 언어에 따라 관련 기호(예: HTML 태그)는 편집 시 업데이트됩니다."기본값은 false입니다.

Update 09/01/21 - editor.renameOnType is deprecated and is replaced by editor.linkedEditing.

HTML 파일은 현재 자동 이름 바꾸기만 지원합니다.JSX 파일에 이것을 추가하려면 open issue가 있습니다.
비투르 분할기는 이 기능을 추가할 수 있는 long-standing issue가 하나 있다.

1.2.1. 설정json

  "editor.linkedEditing": true

2. HTML 태그 자동 닫기
새 HTML 태그를 추가할 때 태그를 닫으면 자동으로 추가됩니다.

2.3. 내선

Auto Close Tag(3.1M 다운로드): "자동으로 HTML/XML 닫기 표시를 추가합니다. Visual Studio IDE 또는 승화 텍스트와 같습니다."

Close HTML/XML tag: 마지막으로 연 HTML/XML 태그를 빠르게 닫습니다.

2.4. 설정

HTML: Auto Closing Tags: 기본값은 true입니다.

JavaScript: Auto Closing Tags: "JSX 태그의 자동 닫기를 사용/사용 안 함으로 설정합니다. 작업공간에서 TypeScript 3.0을 사용하거나 버전을 업데이트해야 합니다."기본값은 true입니다.

TypeScript: Auto Closing Tags: "JSX 태그의 자동 닫기를 사용/사용 안 함으로 설정합니다. 작업공간에서 TypeScript 3.0을 사용하거나 버전을 업데이트해야 합니다."기본값은 true입니다.

2.4.2. 설정json

  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true

3. 동기화 설정
VS 코드는 현재 서로 다른 기기에서 VS 코드 설정을 동기화할 수 있으며 이 기능은 v1.48(2020년 7월 발표)부터 미리 볼 수 있다.
나는 지금 시도하고 있는데, 보기에 괜찮다.

3.5. 확장성

Settings Sync(180만 회 다운로드): 설정, 키 바인딩, 코드 세그먼트, 확장자 및 시작 파일을 GitHub Gist에 동기화합니다.

3.6. 기능 및 설정
User Guide에서 이 기능에 대한 모든 정보를 읽을 수 있습니다.다음은 설정된 모습입니다.

Microsoft 또는 GitHub 계정을 사용하여 동기화할 컨텐츠를 선택할 수 있습니다.


4. 자동 가져오기 모듈
JavaScript와 TypeScript 모듈의 가져오기를 관리하는 것은 프로젝트를 재구성하거나 코드를 재구성할 때 특히 고통스러운 일이 될 수 있습니다.가능하다면 자동화하는 것이 좋습니다!

4.7. 확장성

Auto import(110만 회 다운로드): 가져올 수 있는 모든 코드 조작과 코드를 자동으로 검색, 해석하고 제공합니다.Typescript 및 TSX를 사용합니다.

Move TS - Move TypeScript files and update relative imports(308K 다운로드): 작업 영역에서 typescript 파일을 이동하고 업데이트를 상대적으로 가져올 수 있습니다.

Auto Import - ES6, TS, JSX, TSX(157K 다운로드)

4.8. 설정

JavaScript > Suggest: Auto Imports: "자동 가져오기 제안을 사용하거나 사용하지 않습니다. 작업 영역에서 Typescript 2.6.1을 사용하거나 버전을 업데이트해야 합니다."기본값은 true입니다.

TypeScript > Suggest: Auto Imports: "자동 가져오기 제안을 사용하거나 사용하지 않습니다. 작업 영역에서 Typescript 2.6.1을 사용하거나 버전을 업데이트해야 합니다."기본값은 true입니다.

JavaScript > Update Imports on File Move: Enabled: "VS 코드에서 파일 이름을 바꾸거나 이동할 때 가져오기 경로의 자동 업데이트를 사용/사용 안 함으로 설정합니다. 작업공간에서 TypeScript 2.9 또는 업데이트 버전을 사용해야 합니다."기본값은 "prompt"입니다.

TypeScript > Update Imports on File Move: Enabled: "VS 코드에서 파일 이름을 바꾸거나 이동할 때 가져오기 경로의 자동 업데이트를 사용/사용 안 함으로 설정합니다. 작업공간에서 TypeScript 2.9 또는 업데이트 버전을 사용해야 합니다."기본값은 "prompt"입니다.

4.8.3. 설정json

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

또한 저장할 때 조직 가져오기를 원한다면 다음과 같은 설정을 추가할 수 있습니다.사용되지 않은 가져오기 문을 삭제하고 절대 경로로 가져오기 문을 정렬합니다.나는 이런 일로 영원히 편안해지는 일을 매우 좋아한다.

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

5. HTML 및 CSS의 코드 세그먼트
빠른 시작을 위해 HTML 템플릿을 만들고 키 입력을 저장할 코드 블록을 추가하거나 입력한 내용을 완성하기 위해 확장할 수 있습니다.이런 비슷하지만 약간 다른 수요는 다음 글에서 토론할 것이다.

5.9. 내선

HTML Snippets(380만 회 다운로드): "HTML5 세션을 포함한 완전한 HTML 태그"

HTML Boilerplate(684K 다운로드): "기본적인 HTML5 템플릿 코드 세그먼트 생성기."

CSS Snippets(22K 다운로드): "css의 속기 세션."

5.10. 특징.
Emmet VS 코드에 내장되어 있습니다.Emmet은 HTML 및 CSS의 약어 및 코드 세그먼트 확장을 제공합니다.기본적으로 html,haml,pug,slim,jsx,xml,xsl,css,scss,sass,less와 펜 파일에 대해 Emmet이 활성화되어 있습니다.자세한 내용은 VS Code User Guide를 참조하십시오.
HTML 템플릿 파일을 만들려면 "!"를 입력합니다.그리고tab을 누르세요.

다음과 같은 CSS 스타일 선택기를 사용하는 약어가 있습니다.

ul>li*5

이렇게 하면 다음과 같은 결과가 발생합니다.

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

"a"를 입력하고tab 등 확장자를 누르면 <a href=""> 생성되며, 커서를 견적서에 놓아href를 작성할 수 있습니다.
이것은 CSS에 유사한 기능을 제공하는 HTML에 대한 빠른 개술일 뿐입니다. 제가 가장 좋아하는 것은 추가입니다. vendor-prefixes automatically보기Emmet Docs 자세한 내용은 보기cheatsheet를 참조하십시오.snippets.json 라는 json 파일에 추가할 수 있습니다. customise or create your own snippets
예를 들어, Vue 및 JavaScript에 대한 Emmet 지원을 포함하려면 다음을 settings.json에 추가할 수 있습니다.

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

질문 ((enable Emmet for more languages 은 표시된 Emmet 지원을 포함해야 합니다. 다음 코드 세그먼트와 같이 제외된 언어 목록이 비어 있는지 확인해야 합니다.bug에서 이런 해결 방법을 토론했다.

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

this stack overflow question
6. 가짜 텍스트(가짜 텍스트)
웹 페이지를 채우기 위해 가짜 텍스트를 삽입하고 싶을 수도 있습니다. UI가 어떤 모양인지 보십시오."lorem ipsum"텍스트 생성기에 익숙할 수 있습니다.

6.11. 내선

(168K 다운로드)

Lorem Ipsum
6.12. 특징.
위 4조에서 말한 바와 같이 Emmet은 VS 코드에 내장되어 있으며 가 있다.기본적으로 html,haml,pug,slim,jsx,xml,xsl,css,scss,sass,less와 펜 파일에 대해 Emmet이 활성화되어 있습니다.
"lorem"을 입력하고tab을 누르면 30자의 가상 단락을 생성합니다.
lorem abbreviation
이 옵션을 사용하여 여러 블록의 유형을 생성할 수 있습니다.예를 들어, p*2>lorem 약어는 다음과 같이 생성됩니다.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>

7. 자동 녹화
트레일링 공백을 자동으로 삭제합니다.
내가 제안한 설정은 완전히 같은 교체가 아니다. 편집하거나 명령을 통과할 때 확장은 공백을 잘라낸다.이 설정은 저장할 때 클립됩니다.

7.13. 내선

(447K 다운로드): "트레일링 공백을 강조 표시하고 즉시 삭제합니다!"

Trailing Spaces(15K 다운로드): "코드 행 편집, 트레일러 삭제 등 뒤에 일반적으로 트레일러 공백이 존재합니다. 이 확장자는 커서가 활성 상태인 줄 번호를 추적하고 활성 커서가 없을 때 이 줄의 트레일러 탭과 공백을 삭제합니다."

Autotrim
7.14. 설정

Files : Trim Trailing Whitespace: "활성화하면 파일을 저장할 때 트레일러가 공백으로 트림됩니다."기본값은 false입니다.

7.14.4. 설정json
Markdown을 제외합니다. 출력에 <br> 를 사용하려면 한 줄의 끝에 두 개 이상의 빈칸을 추가해야 하기 때문입니다.이것은 hard line-break의 일부분이기 때문에 나는 그것을 막고 싶지 않다.

"files.trimTrailingWhitespace": true,
"[markdown]": {
   "files.trimTrailingWhitespace": false
},

CommonMark
결론
확장을 시작하기 전에 VS 코드가 이미 실현될 수 있는지 확인해 보세요.이것은 명백한 행동처럼 들리지만, 우리는 언젠가 이렇게 해서 죄책감을 느낄 수도 있다.VS 코드는 주기적으로 기능을 추가하기 때문에 일정 시간마다 변경 로그를 검사하는 것이 가치가 있다.
읽어주셔서 감사합니다!my 를 구독하시고 소셜미디어에서 본문을 공유하신 것을 환영합니다.💌
너는 RSS feed에서 나에게 커피를 한 잔 사서 감사를 표할 수 있다.🙂