프로그래밍 공부 노트

Prettier와 ESLint에 대해서 간단히 설명하자면 Prettier는 코드를 정리해주는 도구이며 코드 정리 방식을 세부적으로 설정할 수 있다. ESLint는 문법을 검사해주는 도구이며 다양한 옵션을 작성하여 원하는데로 문법을 검사하도록 설정할 수 있다.(코드 포맷팅 효과도 있긴하다) 이 두가지 도구를 사용하는 가장 큰 이유는 여러사람이 코드를 작성하더라도 한사람이 작성한것과같이 효과를 주어 협업시 효율을 극대화 하기 위해서이다. Prettier와 ESlint Airbnb 코드 스타일 적용, 설정 하는 방법 1. 두가지 도구는 간단하게 VSCode에서 Extensions로 ESLint와 Prettier를 다운받을 수 있다. 2. 이렇게 다운받은 두가지  Extensions 는 global로 설치되어있다.  그러므로  프로젝트별로  ESLint와  Prettier를 설정하기 위해서는 해당 프로젝트 root 디렉터리에 devDependencies에 eslint와 prettier를 다운받아야 한다. $ npm install -D eslint prettier 3. Airbnb 구성 설치하기 $ npx install-peerdeps --dev eslint-config-airbnb 위 명령어를 통해 관련 구성을 한번에 설치할 수 있고 하나씩 설치할 수도 있다. " devDependencies " : { " eslint " : " ^7.25.0 " , " eslint-config-airbnb " : " ^18.2.1 " , " eslint-plugin-import " : " ^2.22.1 " , " eslint-plugin-jsx-a11y " : " ^6.4.1 " , " eslint-plugin-react " : " ^7.23.2 &q

VSCode를 사용하면서 확장기능들중 잘 사용하고있는 Prettier가 갑자기 동작을 하지않았다. Prettier를 재설치해보고 VSCode를 껏다켜보고 컴퓨터도 재부팅 해봤지만 똑같이 동작하지 않았다. 1. VSCode settings 에서 Format on Save 를 검색하고 체크박스가 표시되어있는지 확인하고 안되어있다면 체크하기 체크가 되어있었고 해제했다가 다시해봤지만 그대로였다. 2. settings -> json 검색 -> Launch -> edit in settings.json -> editor.formatonsave:true 이미 true로 설정되어있었다. 마지막으로  3. settings -> Default Formatter 검색 버튼눌러서 "esbenp.prettier-vscode" 선택 해당부분이 나는 null로 되어있었다. esbenp.prettier-vscode 를 선택하고 해당 문제를 해결할 수 있었다.