개인 프로젝트를 하는 과정에서 불필요하게 코드가 줄바꿈이 되는 것을 확인했다.
print default는 80이지만 나는 가독성을 위해서 120으로 수정하면서 겪었던 기록이다.

기본적으로 eslintrc.json의 extends에서 설정하는 plugin들은 위에서부터 차례대로 적용된다.
만약 첫번째에 작성한 plugin에서 동작하는 기능이 있고 마지막에 작성한 plugin이 동작을 끄는 기능이 있다면 이것이 덮어쓰인다..😥
내가 설정한eslintrc.json에선 prettier plugin을 맨마지막 작성했다.
그리고prettier.config.js에서 option으로 print width값을 설정해도 eslintrc.json의 prettier plugin이 덮어쓰이면서 충돌이 났다. (eslintrc.json의 prettier plugin에는 다른 print width값이 존재!)

error

Replace `` with ``eslintprettier/prettier

해결방법

eslintrc.json

{
 "extends": [
    "react-app",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    ///max-len을 설정해준다.
    "max-len": [
      "warn",
      {
        "code": 120
      }
    ]
  },

}

prettier.config.js

module.exports = {
 plugins: [require("prettier-plugin-tailwindcss")],
 ///printWidth를 설정, json형식에서도 동일하다
 printWidth: 120,
};

이렇게 작성하면 print width값이 늘어나는 것을 확인할 수 있다!😀

나와 같이 print width값을 설정하고 싶다면 prettier.config.js와 eslintrc.json 파일을 확인해보자

Reference

https://prettier.io/docs/en/options.html
https://eslint.org/docs/latest/rules/max-len