[Prettier] Prettier 설치하기, 설정 방법

 

🎯 Prettier 설치하기, 설정 방법

• 개발자가 작성한 코드를 정해진 코딩 컨벤션을 따르도록 변환해주는 도구
• ESLint랑 함께 많이 쓰인다.

[ESLint] ESLint 설치하기, 설정 방법

 

📝 설치 및 설정

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

• --save-exact는 버전이 달라지면서 생기는 스타일의 변화를 막기 위해 사용

 

📕 추가 모듈

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

• eslint-config-prettier: Prettier와 충돌할 설정들을 비활성화한다.
• eslint-plugin-prettier : 코드 포맷할 때 Prettier를 사용하게 만드는 규칙을 추가한다.

 

🛠 .eslinrc.json 추가

{
  "plugins": [
      "prettier"
  ],
  "extends": [
      "eslint:recommended",
    "plugin:prettier/recommended"
   ],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

🛠 setting - format 검색

• setting - format 검색 후
  • Default Formatter을 esbenp.prettier-vscode으로 설정
  • Format On Save 체크!

 

📝 .prettierrc

• 커스텀 하고 싶다면 .prettierrc 파일을 만들고 옵션 추가해주면 된다.

 

🏷 나의 설정 요약

🛠 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
    node: true,
  },
  plugins: ["prettier"],
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 13,
  },
  rules: {
    semi: ["error", "always"],
    quotes: ["error", "double"],
    "no-unused-vars": ["off"],
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
  },
};

 

🛠 .eslintrc.js

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

 

📌 참고

• Prettier · Opinionated Code Formatter
• VS Code에서 ESlint와 Prettier 함께 사용하기
• [개발환경] vscode prettier 설치 및 사용법