원글 페이지 : 바로가기
문제 팀프로젝트를 하면서 프론트엔드 배포를 해야하는데 빌드에서 prettier오류가 계속 떴다. 지난번 팀프로젝트에서도 prettier를 잘못 설정했는지 계속 오류가 떠서 이틀동안 고생했던 적이 있다. 그 때는 잘 이해를 못한 상태에서 그냥 넘어갔던 거 같아서 제대로 짚고 넘어가려고 한다. 이런식으로 space 오류가 났었다. 이외에도 tab과 줄바꿈 등에서 오류가 날 수 있다. 찾아봐도 제대로 된 해결법이 나오지 않아 정리해보려고 한다. ESLint 란 ? 더보기 ESLint는 코드 퀄리티를 보장하도록 도와주는 도구이다. ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성 있는 방식으로 구현할 수 있도록 도와준다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다 VSC Extension에서 설치하고 프로젝트를 초기 설정할 때 .eslintrc를 생성하고 설정을 수정하였다. // .eslintrc
{
“extends”: [“react-app”,”plugin:prettier/recommended”
],
“rules”: {
“no-var”: “warn”,
“no-multiple-empty-lines”: “warn”,
“no-console”: [“warn”, { “allow”: [“warn”, “error”] }],
“eqeqeq”: “warn”,
“dot-notation”: “warn”,
“no-unused-vars”: “warn”,
“react/destructuring-assignment”: “warn”,
“react/jsx-pascal-case”: “warn”,
“react/no-direct-mutation-state”: “warn”,
“react/jsx-no-useless-fragment”: “warn”,
“react/no-unused-state”: “warn”,
“react/jsx-key”: “warn”,
“react/self-closing-comp”: “warn”,
“react/jsx-curly-brace-presence”: “warn”,
},
} 난 다음과 같이 설정했다. Prettier 란? prettier란 내가 작성한 코드를 보기 좋고 일관성 있게 포맷탱을 해주는 도구이다. 줄바꿈, 들여쓰기 간격, 세미콜론 등등을 설정해서 파일을 저장할 때마다 형식에 맞게 정렬를 해준다. 난 prettier을 VS code Extension에서 설치한다음 .prettierc 파일을 만들어 {
“singleQuote”: true,
“trailingComma”: “es5”,
“tabWidth”: 4,
“printWidth”: 120,
“arrowParens”: “always”,
“bracketSpacing”: true,
“embeddedLanguageFormatting”: “auto”,
“htmlWhitespaceSensitivity”: “css”,
“insertPragma”: false,
“proseWrap”: “preserve”,
“semi”: true,
“useTabs”: false
} 와 같이 설정하였다. 오류 발생 원인과 해결 과정 우선 prettie에서 봤던 오류들은 Delete ·· Insert ␍⏎ Replace ·· with ↹ ·· : space ␍⏎ : enter ↹ : tab 이런 문구들이었다. 해결 방법 1. 더보기 Replace ·· with ↹ 이 오류는 space 부분을 tab으로 바꾸라는 뜻인데 eslint에서는 space를 이용하고 prettier에서는 tab을 사용하기때문에 발생하는 오류라고 한다. 그래서 eslint 설정값을 바꿔주면 해결된다. – eslintrc.js파일에서 useTabs: false로 수정하기 2. 더보기 Delete ␍ window와 linux에서 사용하는 줄넘김값이 달라서 생기는 문제 – window(CRLF), linux(LF)✔ 파일 하단에 CRLF 라고 써있는 부분을 눌러 LF로 수정해주기(각 파일마다 설정해줘야함) ✔ eslintrc.js파일에서 endOfLine: ‘auto’ 추가하기 3. 내가 생겼던 오류 space와 관련된 오류라고 생각해서 {
“tabWidth”: 4, // -> 2
} 로도 바꿔보고 //setting.json {
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.insertSpaces”: true,
“editor.formatOnSave”: true,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“javascript.format.enable”: false,
“eslint.alwaysShowStatus”: true,
“files.autoSave”: “onFocusChange”
} 여기서 “editor.tabsize” : 4도 설정해봤지만 해결되지 않았다 !!!!!! 마지막으로 plugin: prettier/recommended로 되어있길래 기본적으로 제공하는 recommended 셋팅이 적용되었나 싶어서 그냥 prettier로 바꿨다 ! 그랬더니 기적처럼 실행되었다. // .eslintrc
{
“extends”: [“react-app”, “prettier”], //바꾼 코드 줄
“rules”: {
“no-var”: “warn”,
“no-multiple-empty-lines”: “warn”,
“no-console”: [“warn”, { “allow”: [“warn”, “error”] }],
“eqeqeq”: “warn”,
“dot-notation”: “warn”,
“no-unused-vars”: “warn”,
“react/destructuring-assignment”: “warn”,
“react/jsx-pascal-case”: “warn”,
“react/no-direct-mutation-state”: “warn”,
“react/jsx-no-useless-fragment”: “warn”,
“react/no-unused-state”: “warn”,
“react/jsx-key”: “warn”,
“react/self-closing-comp”: “warn”,
“react/jsx-curly-brace-presence”: “warn”,
},
} 실행이안되는 사람이 있다면 내 블로그가 참고가 되길.. 출처 : https://velog.io/@imkkuk/Prettier-ESLint-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Prettier, ESLint 이해하고 사용하기 Backend 뿐 아니라 Node 기반 개발을 진행하는 사람들이라면 다 도움이 될 것 같아서 썸네일을 좀 바꿔봤습니다. Prettier, ESLint에 대해 이해하기 쉽도록 정리했으니까 한번 봐주세요! velog.io https://velog.io/@suyeon-hong/eslint%EC%99%80-prettier-%EC%B6%A9%EB%8F%8C%EB%A1%9C-%EC%9D%B8%ED%95%9C-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95