230107 항해99 62일차 Prettier

Prettier 설치

$ npm install prettier --save-dev --save-exact

---

Prettier, ESLint 관련 설정 모듈들 설치

$ npm install eslint-plugin-prettier eslint-config-prettier --save-dev

• eslint-plugin-prettier: ESLint와 Prettier이 충돌할 수 있는 설정들을 비활성화 시켜준다.
• eslint-config-prettier: ESLint의 포맷 기능이 아닌 Prettier의 포맷 기능을 사용하게 만들어준다.

---

Prettier 설정 파일 작성하기

• 프로젝트 최상단 Root 경로에 .prettierrc.js 파일을 생성 해준다.

module.exports = {
    endOfLine: "lf",
    tabWidth: 4,
    semi: true,
    singleQuote: false,
    trailingComma: "all",
    printWidth: 120,
};

---

VSCode 사용자 설정하기

• VSCode의 settings.json 파일을 수정해준다.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true
}

참조:
[React.js] ESLint와 Prettier를 이용한 React 환경 설정 (VSCode)