VSCode 작은 따옴표에서 큰 따옴표로 자동 바꾸기

Format DocumentVue Component.vue 파일 VSCode 에서 명령을 실행할 때 작은 따옴표로 묶인 모든 문자열을 큰 따옴표로 묶은 문자열로 바꿉니다.

내 특정 경우에이 규칙은 작은 따옴표가 필요한 electron-vue lint 구성과 충돌합니다.

더 예쁜 확장 프로그램이 설치되어 있지 않습니다 ( prettier.singleQuote내 설정에 없음).

이것을 피하기 위해 VSCode를 사용자 정의하는 방법은 무엇입니까?

내가 해달라고 prettier확장이 설치되어 있지만, 읽은 후 가능한 중복 내 사용자 설정에서 처음부터 추가 한 대답을 ( UserSetting.jsonCtrl 키 + 바로 가기)

"prettier.singleQuote": true

녹색 경고 ( Unknown configuration setting) 부분 은 작은 따옴표가 더 이상 대체되지 않습니다.

더 예쁜 확장이 보이지는 않지만 Vetur 확장에 포함되어 있다고 생각 합니다.

음, 사람처럼 (@ user2982122)는 언급하지만, 대신 파일 로 이동 코드 -> 환경 설정 -> 설정은 다음을 찾아 견적 을 선택 명 Prettier을 모두 체크 박스를 선택

.editorconfig기본적으로 파일 을 사용하는 프로젝트의 경우 . 포맷터는 설정의 규칙을 무시하고의 규칙을 사용합니다 .editorconfig. 그러면 다음 중 하나를 수행 할 수 있습니다.

• .editorconfig파일을 제거 하고 VSCode 설정을 사용하십시오.
• 추가 quote_type = single받는 .editorconfig파일 유형에 대한 파일. quote_type값을 double또는로 설정할 수도 있습니다 auto.

이 문제에 대해 열린 버그 인 것 같습니다 : Prettier Bug

위의 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 작동했던 유일한 것은 package.json에 다음 코드 줄을 추가하는 것입니다.

"prettier": {
    "singleQuote": true
  },

vuejs / vetur 문제 페이지 https://github.com/vuejs/vetur/issues/986# 에서이 솔루션은 저에게 효과적 이었습니다.

VSCodes settings.json파일에서이 항목을 추가하십시오.

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "singleQuote": true
    }
},

.editorconfig모든 것을 덮어 쓰고 다음을 사용하십시오.

[*]
quote_type = single

올바른 솔루션 :

기본 루트 프로젝트에 .prettierrc.js 파일을 추가하고

module.exports = {
    singleQuote: true
  };

나 같은 초보자를 위해 :

상단의 메뉴 탐색 모음에서 : 파일-> 환경 설정-> 설정을 선택합니다. 검색 텍스트 상자에 견적을 입력하십시오. 아래에 나타나는 필터링 된 목록에서 톱니 바퀴 아이콘과 그 옆에있는 "Prettier"를 찾으십시오. 확인란을 클릭하여 "예쁜 : 작은 따옴표"를 활성화합니다.

더 예쁜 확장 프로그램을 설치하고 VSCode settings.json파일의 코드 아래에 붙여 넣습니다.

 "prettier.useEditorConfig": false,
 "prettier.singleQuote": true

.editorconfig파일 설정 을 무시합니다 .

@attdona가 언급했듯이 Vetur 확장에는 더 예쁘다.

수락 된 답변에 따라 더 예쁜 설정을 변경할 수 있지만 vue 구성 요소의 특정 영역에 대한 포맷터를 변경할 수도 있습니다.

예를 들어, Vetur는 기본적으로 작은 따옴표를 사용하므로 vscode-typescript 포맷터를 사용하도록 설정했습니다.

나는 typescript를 사용하고 있는데, 더 예쁜 설정에서 "Tslint integration"플래그를 확인하여 해결되었습니다 (vscode 기본 설정에서).

vscode에서 같은 문제가 발생했습니다. 루트 디렉터리에 .prettierrc 파일을 만들고 다음 json을 추가하기 만하면 됩니다. 작은 따옴표의 경우 다음을 추가하십시오.

{
  "singleQuote": true
}

큰 따옴표의 경우 다음을 추가하십시오.

  {
      "singleQuote": false
  }

다음 솔루션 중 하나를 시도하십시오.

1. vscode settings.json 파일에서이 항목을 추가하십시오. "prettier.singleQuote": true
2. .editorconfig파일 이있는 경우 vscode 에서 루트 [*] 기호 아래에이 줄을 추가합니다.quote_type = single
3. .prettierrc파일이 있으면 vscode에서 다음 줄을 추가하십시오.

{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}

나를 위해 일한 유일한 솔루션이 있으며 Angular Projects에만 해당됩니다.

프로젝트 ".editorconfig"파일로 이동하여 'quote_type = single'을 붙여 넣으십시오. 그것이 당신에게도 효과가 있기를 바랍니다.

.prettierrc내 프로젝트 폴더에 라는 파일을 추가했습니다 . 파일 내용 :

{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}

settings.json에서 이것을 사용할 수 있습니다.

"javascript.preferences.quoteStyle": "single"

이 확장을 사용하십시오.

https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes

cmd '(win / Linux에서 Ctrl')는 ' "'사이를 순환합니다.

Prettier뿐만 아니라 tslint.autoFixOnSave as true 에서 작은 따옴표 를 확인하는 것이 좋습니다.

JSX의 경우 :

{"jsxSingleQuote": false}