{
// env: 어떤 환경에서 스크립트를 실행할 것인지 설정
"env": {
"browser": true,
"es2021": true,
"node": true,
"commonjs": true,
"es6": true
},
"settings": {
"react": {
"version": "detect"
}
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
// ECMAScript 규격의 JSX 사용 여부: true
"ecmaFeatures": {
"jsx": true
},
// 사용할 ECMAScript 버전을 설정
"ecmaVersion": "latest",
// parser의 export 형태를 설정, react는 module 기반의 import, export 사용
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
// 들여쓰기 2칸만 허용
"indent": [
"error",
2
],
// var 키워드 사용 불가능
"no-var": "error",
// asynn 함수 내부에 await 키워드가 없으면 오류 발생
"require-await": "error",
// ==, != 대신에 ===, !== 사용
"eqeqeq": "error",
//프롭스 타입 무시
"react/prop-types": 0,
// 호출되지 않은 변수도 사용가능하게 설정
"no-unused-vars": "off"
}
}
{
"bracketSpacing": true,
"jsxBracketSameLine": false,
"jsxSingleQuote": true,
"printWidth": 80,
"proseWrap": "preserve",
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"vueIndentScriptAndStyle": false
}
| 폴더명 | • camelCase |
|---|---|
| 파일명 | • REACT 컴포넌트 : PascalCase |
| • 이미지파일 : kebab-case | |
| • JSX : PascalCase | |
| • JS : camelCase | |
• 스타일드 컴포넌트 파일 : ~~Style.jsx로 표현 |
|
| 변수명 | • 일반적인 변수, 함수 : **camelCase |
| -**변수: ‘명사형'으로 작성. 무엇을 담고있는지 정확히 표현(예: numberOfPeople) | |
-불린형 변수: **is**~~로 표현 |
|
| -함수 : ‘동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현(예: getInputValue) |
****• 상수 : UPPER_SNAKE_CASE
• 생성자 함수, 클래스 : PascalCase |
<aside> 💡 커밋은 논리적으로 구분이 되고, 일관성이 유지되는 단위로 최대한 작게 쪼개서 작성합니다
</aside>