@jihyunlab/prettier-config

Prettier는 작성된 코드를 정해진 코딩 스타일로 변환해 주는 코드 포맷터입니다.
@jihyunlab/prettier-config는 타입스크립트를 위한 Prettier 설정을 제공합니다.

설치

프로젝트 폴더에서 @jihyunlab/prettier-config를 설치합니다.

npm i --save-dev @jihyunlab/prettier-config

---

설정

.prettierrc.* 파일이 존재하는 경우 .prettierrc.js로 변경하고 수정합니다.

├  .prettierrc.js
└  ...

module.exports = {
  ...require('@jihyunlab/prettier-config'),
  printWidth: 120, // your prettier configs
};

.prettierignore 파일을 생성하고 수정합니다.

├  .prettierignore
└  ...

/node_modules
/build
/dist

ESLint가 설치되어 있는 경우 .eslintrc.json 파일을 수정합니다.

├  .eslintrc.json
└  ...

{
  "extends": [
    "@jihyunlab/eslint-config", // your eslint extends
+   "prettier"
  ],
  "plugins": [
+   "prettier"
  ],
  "parserOptions": {
+   "project": "./tsconfig.json"
  },
  "rules": {
+   "prettier/prettier": "error"
  }
}

.vscode/extensions.json 파일을 수정합니다.

├  .vscode
│  └  extensions.json
└ ...

{
  "recommendations": [
    "dbaeumer.vscode-eslint"
+   "esbenp.prettier-vscode",
  ]
}

.vscode/settings.json 파일을 생성하고 수정합니다.

├  .vscode
│  └  settings.json
└ ...

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

---

EditorConfig 설정

EditorConfig는 다양한 편집기와 IDE에서 일관된 코딩 스타일을 유지하도록 해줍니다.

.editorconfig 파일을 생성하고 수정합니다.

├  .editorconfig
└  ...

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

.vscode/extensions.json 파일을 수정합니다.

├  .vscode
│  └  extensions.json
└ ...

{
  "recommendations": [
    "dbaeumer.vscode-eslint"
    "esbenp.prettier-vscode",
+   "editorconfig.editorconfig",
  ]
}

---

@jihyunlab/prettier-config 기본 설정

기본 설정을 참고하여 .prettierrc.js에 사용자 설정을 추가할 수 있습니다.

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

---

VSCode 플러그인 설치

VSCode 사용시 확장 탭에서 Prettier, EditorConfig 플러그인을 설치합니다.

---

문제 해결

Peer dependencies 패키지가 설치 되지 않음

yarn으로 설치 할 경우 발생하는 문제이며 모든 패키지를 별도로 설치하거나 npm으로 설치를 진행합니다.

npm i --save-dev prettier@^2.8.4 eslint-config-prettier@^8.6.0 eslint-plugin-prettier@^4.2.1

적용을 원하지 않는 파일이 존재

.prettierignore 파일을 수정합니다.

├  .prettierignore
└  ...

# markdown
*.md
*.mdx

---

라이센스

Open source licensed as MIT.