[share] eslint 및 prettier setting 공유

[positiveko]

글 하나로 다 공유될지 모르겠는데... 한번 정리해볼게요!
저 프리티어는 진짜 엄청 간단한것만 세팅했어요.
아래 보시면... 탭3개씩 켜두는 분 있으면 프린트위쓰만 80 으로 하면 될듯요.
그리고 react-native는.... StatusBar에 라이트모드 다크모드 설정하는것 처럼... 무조건 얘네가 지정해준 속성을 string으로 넣어야하는게 있을텐데 엊그제 보니 싱클쿼트 안먹히면 골치아프더라고요... true로 하면 좋을듯요.
엊그제 은정님 마지막줄 엔터 반드시 안치면 에러나던 것도..... 아래 엔드오브라인 저 세팅인건데...
오토로 해두면 에러 안나고 저장할때 알아서 한칸 엔터 쳐주니 좋을듯요.( vscode세팅은 저랑 같으셔서 formatOnSave 설정이 동일해서 저장할때 auto 로 처리해 주는 것 )
.prettierrc.json
{
"singleQuote": true,
"printWidth": 100,
"trailingComma": "all",
"arrowParens": "avoid",
"endOfLine": "auto"
}
eslint는 아래처럼 관리중이고... 설정하려면 패키지 몇개 깔긴 해야해요.(설치한 디펜던시들은 맨아래 이미지 첨부할게요)
(https://flamingotiger.github.io/javascript/eslint-setup/) 여기 1번만 참고하면 좋을듯요(에어비앤비네 규칙은 안써도 될듯)
typescript-eslint/eslint-plugin 로 세팅할 것들 extents에 플러그인 넣어주고..
변경할 규칙들만 룰 아래쪽에 입력하면 되어요.
저는 9개정도 수정해서 쓰고 있어요.
아직까지는 이것만으로도 api요청시나 재렌더시 생기는 에러... 코드짤때 얘네가 미리 다 캐치해주고 있어요.
0이 아마 제일 엄격한거? 였던거 같아요.
.eslintrc.json
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "react-hooks"],
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier",
"prettier/@typescript-eslint",
"prettier/react"
],
"rules": {
"@typescript-eslint/explicit-module-boundary-types": 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"@typescript-eslint/no-unsafe-member-access": 0,
"@typescript-eslint/no-non-null-assertion": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-unsafe-assignment": 0,
"@typescript-eslint/restrict-template-expressions": 0,
"@typescript-eslint/no-empty-function": 0
}
}
tsconfig 는 안맞춰도 될것 같긴 한데...
저도 옵션이 너무 많아서 봐도 봐도 헷갈려서 걍 퍼온거 멋대로 조합해서 대충 쓰고 있어요.
지난번에 프로젝트 할때 이거 세팅하려고 같이 공부하려다 포기했던거..... 언제 다시 해보면 좋을듯요.
일단 공유는 할게요.
이건 넥스트용이라 includes도 다르고 하니... 참고만 해주시고 저희만을 위한 설정 값을 만들면 좋을듯요.
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": false,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"paths": {
"@components/": ["components/"],
"@lib/": ["lib/"],
"@language/": ["language/"]
}
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "/*.ts", "/*.tsx", "client/polyfills.js"]

}