VS Code가 긴 HTML 행을 여러 줄로 분할하지 않도록 하려면 어떻게 해야 합니까?

VS Code가 긴 HTML 행을 여러 줄로 분할하지 않도록 하려면 어떻게 해야 합니까?

속성을 가진 요소가 길어지면 VS 코드가 행을 여러 줄로 분할하는 것처럼 보입니다.

(요소에 한 줄씩 7줄 대신 3줄로 해 주세요)

더 것을 , ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★printWidth자바스크립트 HTML VS 코드

는 그 물건을 wrapAttributes 및html.format.wrapLineLength세팅은 했지만 효과가 없는 것 같아요

이 문제에 어떻게 대처해야 할까요?

갱신:

당신의 답변에 매우 감사합니다.저는 그들에게서 통보를 받지 못했기 때문에 조치를 취하지 못해서 죄송합니다.

당신의 제안을 모두 시도해 봤지만 문제는 여전해요.이것이 당신의 제안에 따른 저의 현재 설정입니다.

settings.json:

"html.format.wrapLineLength": 0,
"html.format.enable": false,
"html.format.wrapAttributes": "auto",  
"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
        "printWidth": 300,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
    }
}

.pretierrc.json:

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 300,
    "tabWidth": 2,
    "useTabs": true,
    "jsxBracketSameLine": true
}

해서 더하면 요."html.format.wrapLineLength": 0json.json으로 설정합니다.

이건 나한테 효과가 있었어...

Settings.json 파일에서 행을 추가합니다.

"prettier.printWidth": 300

내장된 HTML 포맷 설정 때문인지는 모르겠지만 한번 시도해 보세요.

HTML의 래핑을 유효하게 하지 않는 경우는, 다음의 순서에 따릅니다.

"html.format.wrapAttributes": "auto",  # wrap only when line length is exceeded
"html.format.wrapLineLength": 0,       # disable max chars per line

다른 HTML 포메터 확장을 사용하고 있는 경우는, 빌트인을 무효로 하는 것만으로 끝납니다.

"html.format.enable": false,

HTML과 되어 있는 *.wrap '''가 있는 경우html.format.enable.false는 내장 VS 코드 설정이 아닙니다.

Settings -> Extensions -> HTML:
Format: Wrap Line Length
Maximum amount of characters per line (0 = disable).
0

나한테는 효과가 있었어.

을 사용하다가 창작했습니다..prettierrc.json을 사용법그리고 아래 설정을 추가했습니다.

{
  "html.format.wrapAttributes": "auto",
  "html.format.wrapLineLength": 0,
  "printWidth": 1000
}

printWidth여기서 설정이 중요합니다.설정을 완전하게 무효로 할 수 없기 때문에, 설정에 따라서 증감합니다.

VS 코드 에디터의 디폴트에는 자동 브레이크 기능이 없는 것 같기 때문에 당신의 확장자를 확인합니다.아마 당신은 자동 브레이크 라인이 있는 확장자를 설치할 것입니다.이것이 도움이 되기를 바란다

이 문제는 나를 미치게 했다. 왜냐하면 나는 내 코드가 감기는 것을 싫어하기 때문이다. 나는 내 코드를 읽는 것이 훨씬 더 어렵다고 느끼기 때문이다.나는 많은 것들을 읽었지만 내 코드를 포장하는 것을 멈출 수 없었다.따라서 이미 언급한 모든 것을 시도했는데도 코드가 랩된 경우 코드가 랩된 확장자가 있는 것입니다.[파일(File)]> [설정(Preferences ]설정

그런 다음 확장자를 클릭하여 검색한 후 래핑의 원인이 되는 확장자를 찾습니다.제 경우 Vetur(Vue 확장자)를 Pretter로 사용했기 때문에 코드가 랩되어 버렸습니다.

또한 Pretty를 설치하고 Print Width를 화면 폭에 맞춰 설정하면 더 이상 파손되지 않지만 대부분의 경우 동일한 선상에 있는 데이터를 유지할 수 있습니다.

비주얼 스튜디오 코드의 확장자를 확인하고 "JS-CSS-HTML 포메터" 또는 기타 문제가 되는 포메터를 비활성화해야 합니다.

나의 상황은 새로운 선으로 분할되는 것에 대해 약간 달랐다.HTML의 큰 청크로 문서를 포맷할 때 텍스트의 긴 단락을 여러 줄에 줄 바꿈으로써 공백/탭 들여쓰기를 자동으로 추가합니다.

설정에 다음 항목을 추가했습니다.json :

"html.format.unformattedContentDelimiter": "p, li",

이렇게 하면 모든 텍스트가 다음 범위 내에 유지됩니다.<p>그리고.<li>한 줄에 공백 문자를 넣지 않고 태그를 붙입니다.그런 다음 VSCode 기본 텍스트 줄바꿈을 +로 사용하여 공백 문자를 사용하지 않고 텍스트를 시각적으로 줄바꿈할 수 있습니다.

제 상황에서는 html에서 SVG를 사용하고 있었습니다.그리고 내가 사용할 때마다Ctrl + Shift + IHTML 문서를 포맷하려면 SVG를 다음과 같이 여러 줄로 나눕니다.

<svg id="logo-1" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53"></path>
    <path d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 "></path>
    <path d="M82.16 12.19C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 "></path>
</svg>

한 줄로 서고 문서 형식을 유지하길 바랐습니다.

솔루션:

1. 단일 행으로 변환할 SVG를 선택합니다.그 후 를 누릅니다.F1및 입력Join LinesEnter 키를 누릅니다.

2. 모든 SVG를 한 줄로 변환한 후 를 누릅니다.F1.유형Open Settings (JSON)설정 파일을 열고 마지막에 다음 항목을 추가합니다.

   "html.format.contentUnformatted": "svg"

이제 문서 형식을 지정할 때 SVG를 여러 줄로 분할하지 마십시오.

추신: 물론 다른 HTML 태그도 가능합니다.

VSCode를 사용하는 경우 .code-workspace 파일에 다음과 같이 입력합니다.

"settings": {
    "editor.defaultFormatter":"octref.vetur",
    "vetur.format.defaultFormatter.html":"prettyhtml",
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            "printWidth": 500,
        }
    },
}

이 한 줄에 따라 달라질 수 있어 나한테는 효과가 있어 "vetur.format.defaultFormatter.html": "none",

언급URL : https://stackoverflow.com/questions/56112054/how-to-prevent-vs-code-from-breaking-up-long-html-lines-into-multiple-lines