1. 문제 상황

저장을 했을 때, import 정렬이 되지 않는다.

prettier는 분명히 정상적으로 동작하고 있다.

다른 간격이라던가 tab같은 prettier 설정은 잘 동작하고 있다.

2. 해결 과정

팀원은 잘 되고 있을까?

• 팀원은 import정렬이 잘 되고 있다고 한다. 내 설정의 문제이다.

eslint 설정의 문제일까?

1. 에러를 출력하는 eslint 설정

   // .eslintrc.json
   {
     // ..
   	"import/order": [
       "error",
       {
         "groups": [
           ["builtin", "external"],
           ["internal", "parent", "sibling", "index"],
           ["object"],
           ["type"]
         ],
         "newlines-between": "always",
         "alphabetize": {
           "order": "asc",
           "caseInsensitive": true
         }
       }
     ]
   }

2. 정렬을 하는 eslint 설정

   "sort-imports": [
     "error",
     {
       "ignoreDeclarationSort": true,
       "ignoreMemberSort": false
     }
   ],

정상적으로 설정이 되어있다.

vscode 설정의 문제일까?

// settings.json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "always"
},

// settings.json
"eslint.codeActionsOnSave.rules": [
  "source.fixAll.eslint"
],

위 설 정을정거거하니해결이 되었다. 위 설정을 삭제하면, eslintrc 파일의 규칙대로 fix가 된다.

3. 원인 분석

eslint.codeActionsOnSave.rules설정이 뭔데?

eslint의 어떤 규칙을 적용하여 수정할 것인지를 명시하는 것이다.

source.fixAll.eslint이 뭔데?

source.fixAll.eslint는 자동으로 수정 가능한 코드를 일괄적으로 해결할 수 있도록 한다. 이 설정은 editor.codeActionsOnSave에서 사용한다.

// settings.json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
},

에디터를 저장할 때, eslintrc설정을 기반으로 적용하는 것이다.

4. 결론

settings.json에서 eslint.codeActionsOnSave.rules에 값이 비어있어야하는데, 설정해주어서 발생한 이슈였다. 무언가 다른 설정을 할 때 실수로 만졌나보다.

앞으로는, 설정을 주의하며 수정하도록 하자.

5. Reference

bookmark

bookmark