.prettierrc

{
    "singleQuote":true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2
}

1. 이 파일에서는 들여쓰기를 할 때 탭 대신,

2. 공백을 두 칸 사용한다. 큰따옴표 대신 작은따옴표를 쓴다.

3. 세미콜론은 언제나 붙인다.

Prettier 익스텐션 설정하기

파일 > 기본설정 > 설정

1. Prettier-Codeformatter 를 선택합니다.

2. Prettier을 설정할 수 있는 설정창이 나옵니다. 예전에는 코드를 텍스트형태로 수정하는 설정창이 나왔으나 언제 부터인가 설정하기 쉬운 UI창을 보여줍니다.

1. setting.json문서가 열립니다. 예전의 세팅 문서입니다.

2. 설정 창에서 기본값을 변경하게 된다면 setting.json의 값이 자동으로 변경이 됩니다. 다시말하면 직접 이 setting.json파일에 옵션사항을 적어도 반영이 된다는 뜻입니다.

Prettier 설정

settings.json < .editorconfig < .prettierrc

1. 먼저 settings.json에 설정한 세팅값을 적용합니다.

2. 만약 프로젝트에 EditorConfig의 설정파일인 .editorconfig가 있으면 이 설정이 덮어씁니다.

3. 마지막으로 Prettier의 고유한 설정파일인 .prettierrc가 프로젝트에 있으면 이 값을 최종적으로 적용하게 됩니다.

VScode의 settings.json에는 기본설정과 달리 세팅값의 말머리에 prettier.~~처럼 prettier.를 붙혀줘야 합니다

prettier.printWidth (default: 80)

prettier.tabWidth (default: 2)

prettier.singleQuote (default: false)

prettier.trailingComma (default: 'none')

prettier.bracketSpacing (default: true)

prettier.jsxBracketSameLine (default: false)

prettier.parser (default: 'babylon') - JavaScript only

prettier.semi (default: true)

prettier.useTabs (default: false)

prettier.proseWrap (default: 'preserve')

prettier.arrowParens (default: 'avoid')

prettier.jsxSingleQuote (default: false)

prettier.htmlWhitespaceSensitivity (default: 'css')

prettier.endOfLine (default: 'auto')

prettier.quoteProps (default: 'as-needed')

prettier.requireConfig (default: false)

prettier.ignorePath (default: .prettierignore)

html에서는 <!-- prettier-ignore -->js에서는 // prettier-ignore

prettier.disableLanguages (default: ["vue"])