VSCode ESLint, Prettier 자동 수정 적용안될 때

vscode에 eslint와 prettier을 설정하는 방법에 대해서는 많은 글들이 있기에 세팅에 대해 아주 간략하게 설명한다.

vscode의 확장을 눌러 eslint와 prettier을 설치한다.

그 뒤로 프로젝트마다 설정할 경우. eslintrc,. prettierrc 등을 이용해 수정해 사용하면 된다.

 

하지만 여기서 내가 안 된 상황은 2가지였다.

 

1. prettier가 아예 작동을 하지 않는 경우
   1. windows의 경우 ctrl + , / mac의 경우 cmd + , 버튼을 눌러 설정을 연다
   2. 검색창에 editor default formatter를 검색해 나온 항목을 Prettier로 변경해 주는 것으로 간단하게 해결되었다.
2. Prettier의 동작은 잘되는데 eslint의 auto fix를 안 해주는 경우
   1. 먼저 위와 같이 단축키를 눌러 설정 창을 열어준다.
   2. format on save를 검색해 체크되어 있는지 확인한다.
   3. code Actions on save를 검색해 settings.json으로 진입한다.
   4. codeActionsOnSave의 값을 아래와 같이 수정한다.

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }