[Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기

 

 

 

 

 

VSCODE에 Prettier를 설치해서 코드 스타일을 통일하고 있는데, 이해가 되지 않는 일이 있었다.

세미콜론 사용여부를 false로 설정해두었는데도 특정코드 앞에 세미콜론(;)이 계속 붙는 것이었다.

 

 

문제발생

 

샘플코드 - Prettier 적용전

import loadFunction from './loadFunction.js';

loadFunction();

(async () => {
    const stuff = await doStuff()
    setThings(stuff)
})()

 

 

샘플코드 - Prettier 적용후

import loadFunction from './loadFunction.js'

loadFunction()

;(async () => {
    const stuff = await doStuff()
    setThings(stuff)
})()

 

 

분명 세미콜론(;)의 사용여부를 false로 설정해놓아서, 세미콜론이 없어지기를 기대했는데

 

세미콜론이 사라지지 않는 라인이 있던 것이었다.

 

;(async () => {
    const stuff = await doStuff()
    setThings(stuff)
})()

 

이 부분인데... 

 

왜 안지워지나 여기저기 검색해보니 IIFE 패턴 때문이라고 한다.

 

IIFE  패턴을 잘 설명 할 자신이 없어 설명은 따로 안함..

 

근데 IIFE 패턴은 이전 라인과 구분을 정확히 지어지지 않으면 에러가 감.. 나중에 기회 되면

공부해서 정리해야지..

 

문제원인

 

문제의 원인은 IIFE 패턴의 특성에 있는데 아래와 같은 샘플코드를 웹브라우저에서 읽으면 에러가 난다.

 

 

샘플코드

const temp = 'temp'

(async () => {
    const stuff = await doStuff()
    setThings(stuff)
})()

 

결과

 

 

그래서 Prettier에서 이 문제를 인식하고 세미콜론의 사용여부가 false라도

IIFE패턴 앞에는 무조건 세미콜론(;)을 붙여서 에러가 나는 것을 방지한다고 볼 수 있다.

어떻게 보면 똑똑한 녀석...

 

근데 문제는 IIFE패턴 앞에 아무것도 없어도 그냥 무조건 세미콜론(;)을 붙임..

아마도 앞에 뭐가 있는지 판별할 수 없으니 그럴지도?

 

결론

Prettier에서 IIFE패턴을 만나면 에러방지를 위해 무조건 앞에 세미콜론(;)을 붙인다.

그러니 Prettier가 잘못됬니 뭐니 안해도 된다. 끝

 

 

 

관련 링크

https://github.com/prettier/prettier/issues/2800

Semicolon before arrow IIFE · Issue #2800 · prettier/prettier