vscode Prettier 설정

여러 개발자들과 같이 작업하면 conflict 이 일어나는 경우가 많다. 

같은 파일을 작업하는 경우에 자주 생기는데 그중에 하나가 vscode HTML Format 이 안맞기 때문이다.

따라서 Prettier 를 사용해서 맞춰줘야된다.

하단 링크를 통해서 작동하는 방식을 볼수 있다. 참고바람

https://prettier.io/playground

Prettier

 

설정하는 방법!

1. Prettier vscode Extension 설치

2. Default Formatter 로 Prettier 선택하기. 설정 들어가  Editor: Default Formatter 를 선택.Format On Save도 체크

3. . prettierrc라는 파일 생성, 원하는 옵션값을 파일에 작성한다.

//.prettierrc 
//디폴트값으로 가져옴
{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "semi": true,
  "experimentalTernaries": false,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}

 

4. settings.json 파일에 관련 작업 세팅

 "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",//저장할 때 자동으로 import 문을 정리
    "source.addMissingImports": "explicit",//저장할 때 자동으로 누락된 import 문을 추가
    "source.fixAll": "explicit"//저장할 때 자동으로 코드를 전반적으로 수정하여 오류를 수정
  },