vscode html prettier alt + shif +f 안될때, 원하는 포맷 세팅

• alt shift f 안 먹을 때

1. “.prettierrc” 파일 생성

프로젝트 루트 경로에 “.prettierrc” 파일을 생성해주고 원하는 세팅값을 입력해준다. 이 파일에 있는 세팅값은 vscode에 있는 settings.json의 값보다 우선시되어 prettier 익스텐션이 반영한다.

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "semi": false,
  "experimentalTernaries": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 160,
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}

위 세팅은 다음 블로그 포스팅을 참조했다. https://velog.io/@gangk_99/VS-Code-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[VS Code] Prettier 설정하기 VS Code 내에서 입맛대로 Prettier를 설정해보자 VS Code 내에서 입맛대로 Prettier를 설정해보자

1. settings.json에 디폴트 포맷터가 제대로 등록되었는지 확인한다.

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

이제 alt shift f를 누르면 다음과 같이 예쁘게 정렬된다.

원래는 저기서 '' 가 '' 으로 되어서 굉장히 거슬렸는데.. 위 설정으로 하고 나서 원하는 대로 잘 되어서 다행이다.