개발 의문 해결

VScode 전체 프로젝트에 ESLint 자동수정 적용하기

티시즌 2024. 2. 15. 01:05

다른 프로젝트를 시작했더니, 요새 주로 진행하던 프로젝트에서는 되던 ESLint 자동수정이 안 되기 시작했다.

해결하려고 이래저래 설정을 바꾸다가 그만 원래 프로젝트에서도 ESLint 자동수정이 안 되는 문제가 발생하고 말았다.
해결은 완료했고, 또 이런 일이 생길까 봐 정보를 백업해 둔다.

설정에서 확장 > ESLint를 들어가면 이런 창을 볼 수 있다.

Code Actions On Save를 설정해야 하는데, 이건 settings.json을 수정하는 수밖에 없다.

 

https://tesseractjh.tistory.com/306

 

[VSCode/ESLint] ESLint 자동 수정이 적용되지 않을 때

vscode에서 eslintrc 설정 후 저장을 하면 eslint fix가 가능한 부분은 자동으로 수정이 된다. 만약 되지 않는 다면 아래의 경우 중 하나일 수도 있기 때문에 하나씩 시도해보고 해결되는지 확인해보면

tesseractjh.tistory.com

 

위 블로그 글을 참고해 다음과 같이 설정했다.

  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "workbench.settings.applyToAllProfiles": [
    "editor.formatOnSave",
    "editor.formatOnSaveMode",
    "editor.codeActionsOnSave"
  ],

 

1. Format On Save를 켜고, (이건 설정 UI에서 체크할 수 있다)
2. editor.codeActionsOnSave에서 "source.fixAll.eslint"를 true로 설정한 다음,
3. 만일 eslint.codeActionsOnSave.rules가 있다면 지운다.

그리고 모든 작업 영역에 이 설정을 적용해 주기 위해 'workbench.settings.applyToAllProfiles' 에 위 설정들을 배열로 넣어 준다.

여기서 editor.formatOnSaveMode는 설정 UI에서 설정할 수 있는 옵션이다.

 

그러면 이제 저장할 때 자동으로 ESLint 고침이 적용되게 된다.

import 순서 오류는 이제 안녕!!!