윤호팀 Eslint & Prettier

Eslint

• 경로 alias 사용하는 것으로 결정 @

• simple-import-sort unused-imports : import 코드 정렬 및 사용하지 않는 코드 삭제

{
	// map과 같은 배열 내에서 key 값 사용하지 않을 시 에러
	"react/jsx-key": "error",  
	
	// 코드 블록의 return 문 이후로 작성되는 코드는 경고를 띄우게끔
  "no-unreachable": "warn",
}

• css 정렬 설정에 대해서는 emotion 및 스타일드 컴포넌트 사용 여부에 따라 추후 결정

rules: {
	// React export 규칙 - airbnb
  "react-refresh/only-export-components": [
    "warn",
    { allowConstantExport: true }, // 상수 컴포넌트 허용
  ],
	"no-unused-vars": "warn", // 사용하지 않은 변수 경고, 프로덕션 코드
	"no-console": "warn",     // 디버깅용 콘솔 문 경고, 프로덕션 코드
},

• .eslintrc.js 에 수기로 바로 설정 작성 , 따로 패키지 설치 X (feat. 수현님)

Prettier

// 취향에 따라서 선택해서 사용하면 좋을거 같아요!
{
  "printWidth": 80, // 전체 너비
  "tabWidth": 2, // 탭 너비
	"useTabs": false,       // tab 사용 여부 (기본값: false)
  "semi": true, // 세미콜론
  "singleAttributePerLine": true, // 속성 한줄로 가독성 측면에는 좋음
  "singleQuote": true, // '' true
	"jsxSingleQuote": true, // JSX 내 html ''
  "trailingComma": "es5", // 객체 내 필요한 경우 콤마 추가
  "endOfLine": "auto", // 윈도우 맥 둘다 호환
	"bracketSameLine": false,  // 오른쪽 꺽쇠괄호(>)를 다음 줄에 혼자 놓지 않고 마지막 줄 끝에 놓음
	"jsxBracketSameLine": false,
	// import 구문 정렬 부분은 추후 결정

  "bracketSpacing": true, // 객체 리터럴({}) 사이에 공백 설정 (기본값: true)
  "arrowParens": "avoid",  // 화살표 함수의 인자에 괄호 여부 (기본값: always)
}

• eslint, prettier 충돌 방지 eslint-config-prettier, eslint-plugin-prettier