강아지 정보 제공 사이트 프로젝트

prettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 환경도구

이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드품질을 가질 수 있게 된다.

 

설치방법 :

yarn add --dev prettier 

npm install -D prettier

 

이용하고자 하는 프로젝트 폴더에 .prettierrc 파일을 생성 후 아래 코드 저장!

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleAttributePerLine": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

 

package.json의 scripts에 아래 부분 추가

"format": "prettier --check ./src",
"format:fix": "prettier --write ./src",

명령어를 이용하여 코드가 수정이 되었다.

---

ES(ESMA javascript) 합성어로 자바스크립트를 분석하여 오류나 버그를 찾는데 도움을 주는 정적분석도구

 

-eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 끔 

-eslint-plugin-prettier : prettier를 eslint의 rules로 동작(느려서 비추한다는 의견 존재)

 

설치방법 :

yarn add --dev eslint-config-prettier eslint-plugin-prettier

npm install -D eslint-config-prettier eslint-plugin-prettier

 

이용하고자 하는 프로젝트 폴더에 .eslint 파일을 생성 후 아래 코드 저장!