💻esLint
ESLint는 자바스크립트 코드를 정적으로 분석하여 코드 스타일, 잠재적인 오류 및 일관성을 검사하는 도구이다.
ESLint의필요성
일관된 코드 스타일 유지
잠재적인 버그와 오류 식별
품질 향상
(ESLint는 미리 정의된 규칙을 통해 코드의 품질을 향상시킬 수 있습니다. 예를 들어, 불필요한 코드 중복, 복잡한 중첩 구조, 긴 함수 등을 식별하여 코드를 개선할 수 있습니다.)
보안 강화
일부 ESLint 규칙은 보안 문제와 관련된 취약점을 검사할 수 있습니다. 예를 들어, 잠재적인 XSS(Cross-Site Scripting) 취약점을 검출하는 규칙을 설정할 수 있습니다.
커스터마이징 가능
프로젝트의 특정 요구 사항과 팀의 코딩 스타일에 맞게 ESLint 규칙을 설정하고 커스터마이즈할 수 있습니다.
CI/CD 통합
CI/CD 파이프라인에서 ESLint를 실행하여 코드 변경 사항이 머지되기 전에 코드 품질을 검증할 수 있습니다. 이를 통해 코드베이스의 안정성을 유지할 수 있습니다.
새로운 개발자에게 도움
프로젝트에 새로 합류하는 개발자가 코드베이스에 익숙해지고 쉽게 협업할 수 있도록 도와줍니다.
ESLint는 코드의 일관성, 품질, 보안 및 협업을 향상시키기 위해 필수적인 도구입니다. 코드베이스의 관리와 유지보수를 용이하게 만들어줄 수 있습니다.
여기저기서 따와서 추가하다보니 충돌되는 부분 도 많고 어렵다.
가장 기본이 되는 코드는 아래와 같습니다.
기본코드
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"standard-with-typescript",
"plugin:react/recommended",
"eslint-config-prettier"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": ["./tsconfig.json"]
},
"plugins": ["react"],
"rules": {
"quotes": [2, "double", { "avoidEscape": false }],
"@typescript-eslint/explicit-function-return-type": "off"
}
}📋 참고한 레퍼런스
eslint 셋업 방법
https://velog.io/@he0_077/React-Typescript-eslint-prettier-%EC%84%A4%EC%A0%95
