ESLint / Prettier가 작동 안 됨 (ES Module)

  eslint, prettier를 적용한 뒤 작업을 하던 중 어느 순간부턴가 저장을 해도 자동으로 변경이 안된다. 이를 해결하기 위해 먼저 eslint output panel을 살펴보았다.

 

[Info  - 2:16:58 PM] Must use import to load ES Module: 
/Users/user/Documents/development/practice/.prettierrc.js 
require() of ES modules is not supported. 

require() of /Users/user/Documents/development/practice/.prettierrc.js 
from /Users/user/Documents/development/practice/node_modules/prettier/third-party.js is
an ES module file as it is a .js file whose nearest parent package.json 
contains "type": "module" which defines all .js files in that package scope as ES modules. 
Instead rename .prettierrc.js to end in .cjs, 
change the requiring code to use import(), or remove "type": "module" 
from /Users/user/Documents/development/practice/package.json.  

Occurred while linting /Users/user/Documents/development/practice/app.js:1

  나는 코드를 작성할 때 require, module.export 보다는 ES 6부터 도입된 import, export 모듈을 선호하는 편이다. 이 때문에 package.json에 type:module을 넣었고, bable-eslint를 설치하여 Eslint의 파서로 사용하고 있었다. 그런데 이 때문에 오히려 prettier 설정 파일인 .prettierrc.js 를 읽지 못하는 오류가 발생한 것으로 추측된다. 

 

module.exports = {
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid"
};

  .prettierrc.js는 기본적으로 module.exports 형식을 사용하고 있다. 따라서 ES6 모듈 형식을 사용하기 위한 설정들과는 맞지 않는 것이다. 이를 고치기 위해선 .prettierrc.js를 json 형식으로 변경하면 된다.

 

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid"
}

  위와 같이 .prettier.js 를 .prettier.json으로 변경하게되면 저장 후 포맷팅이 잘 동작한다!