Visual Studio에서 HTML 태그로 선택 항목을 래핑하려면 어떻게하나요?


110

이것은 세상에서 가장 기본적인 질문처럼 보이지만 답을 찾을 수 있다면 저주합니다.

Visual Studio의 기본 또는 Code Rush 또는 기타 타사 플러그인을 통해 현재 선택 항목을 HTML 태그로 래핑하는 바로 가기 키가 있습니까? 여는 태그를 입력하고, 잘못 배치 된 닫는 태그를 클립 보드로 자르고, 커서를 이동하고, 그것이 속한 끝에 붙여 넣는 것에 지쳤습니다.

업데이트 : 이것은 TextMate가 태그로 선택 영역을 처리하는 방법 입니다. 솔직히 Visual Studio에 비슷한 기능이없는 것 같아 놀랍습니다. 내가 사용하고 싶은 생각할 수있는 모든 태그에 대해 매크로 또는 스 니펫을 만드는 것은 터무니없는 것 같습니다.


선택 항목을 래핑 할 태그를 입력하라는 메시지를 표시하는 방식으로 매크로를 작성할 수 있습니다. 원한다면 내 매크로를 찾아 낼 수 있습니까?
Ian Jacobs

아무도 이것을 할 방법을 아직 찾았습니까?
SamWM

답변:


132

Visual Studio 2015에는 현재 선택 항목을 div로 래핑하는 새로운 바로 가기 Shift + Alt + W가 제공됩니다. 이 단축키는 텍스트 "div"를 선택된 상태로 두어 원하는 태그로 원활하게 변경할 수 있습니다. 이것은 자동 종료 태그 교체와 결합되어 빠른 솔루션을 제공합니다.

최신 정보

이 바로 가기는 Visual Studio 2017에서도 사용할 수 있지만 "ASP.NET 및 웹 개발"워크로드가 설치되어 있어야합니다.

Shift+Alt+W > p > Enter

VS2017에서도 여전히 적용 가능합니다.
Zze

VS 2017에서는 작동하지 않습니다. 웹 필수 요소가있는 경우에만 작동한다고 생각합니다.
RayLoveless

1
@RayLoveless ctrl-k ctrl-s는 스 니펫으로 둘러싸 기 위해 작동합니다. 그러나 스 니펫 목록 (div 없음)에서 선택해야하며 스 니펫은 위에서 설명한 워크 플로를 중단하는 편집 할 추가 필드를 제공합니다. 하나는 사용자 정의 스 니펫을 주장 할 수 있지만 나는 즉시 사용 가능한 솔루션을 선호합니다!
D-Jones

1
@WildJoe 어떤 종류의 파일을 열었습니까? 우연히 xml 또는 xaml 파일 인 경우 HTML 편집기에서만 작동한다고 믿기 때문에 이것이 작동하는지 확실하지 않습니다.
D-Jones

1
@WildJoe는 여기에서 참조 stackoverflow.com/a/34799783/1647159 및 여기 stackoverflow.com/a/22274313/1647159 경고, 당신은 성능 저하로 끝날 수 있습니다
D-Jones

65

나는 이것이 오래되었다는 것을 알고 있으며 아마도 지금까지 답을 찾았지만 VS 2010에서 이것이 가능하다는 것을 모르는 사람들을 위해 추가하고 싶습니다.

  1. 둘러싸고 싶은 코드를 선택하십시오.
  2. 수행 ctrl-k ctrl-s(또는 마우스 오른쪽 버튼으로 클릭하고 Surround with....
  3. 선택할 수있는 다양한 HTML 스 니펫이 있습니다.

원하는 것을 찾지 못한 경우 자신 만의 SurroundsWith 스 니펫을 만들 수 있습니다.

  1. 를 클릭 File한 다음을 클릭 New하고 파일 형식을 선택합니다 XML.
  2. File메뉴를 클릭합니다 Save.
  3. 에서 Save as상자를 선택합니다 All Files (*.*).
  4. 에서 File name상자와 파일 이름을 입력 .snippet파일 이름 확장명을.
  5. 를 클릭하십시오 Save.

XML 파일에 다음 샘플과 같은 내용을 입력하십시오.

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>ul-div</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>ul>li</Shortcut>
    <Description>Wrap in a ul and then an li</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<ul><li>$selected$</li></ul>$end$]]></Code>
  </Snippet>
</CodeSnippet>
  1. 열기 Tools> Code Snippets Manager.
  2. Import방금 만든 스 니펫을 클릭 하여 찾습니다.
  3. 확인 My HTML Snippets하고 클릭 Finish한 다음 OK.

그런 다음 내용을 래핑 할 수있는 새 HTML 스 니펫을 사용할 수 있습니다!


2
"XML 파일을 클릭 한 다음 열기를 클릭하십시오."라고 말하면 무슨 말이야? 어떤 xml 파일을 클릭합니까?
User

그것은 훌륭한 팁입니다! 그 반대를 아십니까? 주변 태그를 어떻게 제거 할 수 있습니까?
Trio Cheung

@User ... 지금 수정 중입니다. "Click XML File ..."이 아니라 "Click File ..."만 표시하면 안됩니다.
Watki02

3
이 작품 그러나 더 longcut의 정확히 바로 가기 아니다
Pixelomo

@AlanSutherland 처음 설정했을 때, 그렇습니다. 일단 설정되면 ctrl-k ctrl-s 및 템플릿 선택의 간단한 문제입니다.
Bradley Mountford 2014


42

당신이있는 경우 웹 필수가 설치, 당신은 할 수 Alt + W + Shift 키를 사용하여 태그와 함께 선택을 포위.


6
이것에 대해 언급해야 할 가장 좋은 점은 태그를 강조 표시하거나 태그 안에 커서 만 있으면된다는 것입니다. 텍스트를 명시 적으로 선택할 필요가 없습니다.
Alex KeySmith

8

나는 이것이 고대의 스레드라는 것을 알고 있지만 마침내 내 자신의 것을 만들려고 한 문제에 맞서고 이것이 Google의 첫 번째 결과 중 하나이기 때문에 사람들이 유용하다고 생각할 것이라고 생각했습니다.

사실 꽤 쉬웠습니다. 기존 HTML 스 니펫에서 복사하여 리터럴을 이동했습니다. 다음 스 니펫은 일반 HTML 태그로 둘러싸고 태그를 입력하라는 메시지를 표시하고 열기 및 닫기 태그 모두에 넣습니다.

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- Generic HTML Snippet -->
  <Header>
    <Title>Html</Title>
    <Author>Liam Slater</Author>
    <Shortcut>h</Shortcut>
    <Description>Markup snippet for HTML</Description>
    <SnippetTypes>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>tag</ID>
        <ToolTip>tag</ToolTip>
        <Default></Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<$tag$>$selected$</$tag$>$end$]]></Code>
  </Snippet>
</CodeSnippet>

7

이런 상황에 직면했을 때 저는 종종 닫는 태그를 먼저 입력 한 다음 여는 태그를 입력합니다. 이렇게하면 내가 원하지 않는 곳에 닫기 태그를 삽입하여 IDE가 "도움"을받지 못합니다. 그래도 더 나은 솔루션에 관심이 있습니다.


3
+1. 이렇게 간단한 기능이 얼마나 복잡한 지 정말 놀랍습니다.
John Hargrove 2013-08-29

거의 8 년이 지난 지금도 같은 방식을 사용하고 있습니다
Jack

7

Visual Studio 2017을 사용하는 경우 : html/ cshtml영역을 마우스 오른쪽 버튼으로 클릭 하거나 래핑 할 일부 요소를 선택 Wrap With <div>하면 목록에 버튼이 있습니다. 여기에 이미지 설명 입력


1
이것은 현재 선택한 답변의 중복입니다 (사용 shift+alt+w).
Zze

그러면 어떻게해야합니까? 그건 그렇고, Visual Studio 2015에는 제가 글을 쓸 때 제 답변에서 보여준 것과 같은 UI 요소가 없었습니다. 저는 Visual Studio 2017에서 마우스 클릭을 통해 동일한 작업을 수행하는 UI 요소가 있다는 것을 보여 드리고 싶었습니다.
Burak Karakuş

2

내가 아는 것은 없지만 원하는 태그로 감싸는 매크로를 작성하는 것은 어렵지 않습니다. 영역 블록에 내 선택을 래핑하는 비슷한 것이 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.