2022.03.29
eslint + prettier
(eslint
+ prettier
) + husky
환경을 구축중이다.
간단히 정리하면,
eslint
: 코드 포맷 및 문법적 개선포인트까지 지적prettier
: 단순 코드 포맷만 지적husky
: git hook 을 잡아주는 패키지
가 된다.
(eslint
+ prettier
) 과정을 들여다보면,
eslint
와 prettier
는 별개로 동작한다.
따라서 이 둘이 같은 내용을 지적하다가 충돌이 발생할 수 있다.
이러한 충돌을 막기 위해eslint
의 규칙에 prettier에서 사용하는 포맷팅 규칙
을 추가하여 충돌을 회피할 수 있다.
자세한 내용은 여기를 참고하자
진행하면서 발생한 에러
'prettier/prettier': context.getPhysicalFilename is not a function
eslint
와 최신 eslint-plugin-prettier
패키지간의 버전 호환문제다.
eslint를 최신버전으로 올려주자 (참고문서)
> npm update eslint
src/.eslintrc.json » eslint-config-airbnb » /home/project/node_modules/eslint-config-airbnb/rules/react.js:
Configuration for rule "react/function-component-definition" is invalid:
Value ["function-declaration","function-expression"] should be equal to one of the allowed values.
eslint의 react
플러그인의 규칙과 airbnb
규칙간의 충돌이 발생한듯 하다.
충돌이 발생하지 않는 버전으로 수정해주자. (참고문서)
.eslintrc.json
"rules": {
"react/function-component-definition": [
2,
{
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}
]
}
packege.json
"devDependencies": {
"eslint-config-airbnb": "^18.2.1", // downgraded version from ^19.0.4
}
CRA가 아닌 React 프로젝트에서 환경변수 사용
dotenv
패키지는 node환경에서만 환경변수 파일을 읽어주는 패키지다.
react 코드는 node가 아닌 브라우저에서 동작하므로 웹팩에서 별도의 설정을 해주어야한다.
환경변수파일을 react에서 읽을 수 있도록 해주는 다양한 웹팩플러그인들이 있지만, 가장 간단한 방법을 기록한다. (참고문서)
> node install dotenv-webpack --save-dev
// webpack.config.js
const Dotenv = require('dotenv-webpack');
module.exports = {
// ...
plugins: [
// ...
new Dotenv(),
// ...
]
// ...
}
Author And Source
이 문제에 관하여(2022.03.29), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ginameee/2022.03.29저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)