{
"env": {
"browser": true,
"jasmine": true,
"jest": true,
"es2021": true,
"node": true
},
"extends": [
"airbnb",
"airbnb/hooks",
"prettier",
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/recommended",
"next"
],
"overrides": [],
// 특정 파일에 대해서 lint규칙을 재정의할 때 사용
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
// ecmascript 버전 지정
"sourceType": "module"
// 모듈 시슽템 사용 여부, es6의 모듈 사용
},
"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
// 린트가 특정 종류의 규칙을 제공하거나 확장하여 코드를 분석하고 검사할때 사용
"rules": { //린트가 코드를 분석하고 검사할 때 적용할 규칙을 지정
"react/prop-types": "off",
//react에서 prop의 타입을 검사하지 않도록 설정
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
//prittier를 사용하여 코드 끝줄을 자동으로 설정
"arrow-body-style": "off",
// 화살표 함수에서 중괄호를 사용하지 않도록 설정
"semi": ["warn", "never"],
// 세미콜론을 사용하지 않도록 하고 warn수준으로 설정해 빌드가 실패하지 않도록 설정
"react/function-component-definition": [
"warn",
{ "namedComponents": "function-declaration" }
],
//React 함수형 컴포넌트를 정의할 때 함수 선언식을 사용하도록 규칙을 설정
"react/jsx-one-expression-per-line": "off",
//JSX 요소 내에서 한 줄에 하나의 표현식만 허용하는 규칙을 해제
"react/jsx-filename-extension": [
"error",
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
//JSX를 사용하는 파일의 확장자를 지정하는 규칙을 설정합니다.
//이 설정은 .js, .jsx, .ts, .tsx 확장자를 가진 파일에서만 JSX를 사용할 것을 규칙으로 정의
"react/jsx-indent": "warn",
// JSX 요소를 들여쓰기하는 방식을 설정합니다. 이 규칙은 들여쓰기에 대한 경고를 발생
"react/jsx-props-no-spreading": "off",
// JSX 요소의 속성(props)을 펼치는 것을 허용
"react/no-array-index-key": "warn",
//JSX 요소에서 배열의 인덱스를 사용하여 요소에 고유한 키(key)를 제공하는 것을 경고
"react/require-default-props": "off",
//컴포넌트의 속성(props)에 대한 기본값을 필수로 요구하는 규칙을 해제합니다.
//이 설정을 사용하면 속성에 기본값을 제공하지 않아도 됩니다.
"react/jsx-wrap-multilines": "off",
//JSX 요소를 여러 줄에 걸쳐 작성할 때 각 줄을 괄호로 묶을지 여부를 설정
"react/jsx-uses-react": "off",
// React가 JSX 코드에서 사용되는지 여부를 체크하는 규칙을 해제합니다.
//최신 버전의 ESLint에서는 더 이상 필요하지 않은 규칙
"react/react-in-jsx-scope": "off",
//JSX 파일에서 React를 import하지 않아도 되는지 여부를 설정합니다.
//Next.js나 Create React App과 같은 환경에서는 자동으로 import되기 때문에 이 설정을 해제
"import/prefer-default-export": "off",
//모듈에서 기본(default) export를 사용하는 것을 권장하는 규칙을 해제합니다.
//모듈에서 명시적으로 export하는 것을 허용
"import/no-unresolved": "off",
import한 모듈이 해결되지 않으면 경고를 발생시키는 규칙을 해제합니다.
//TypeScript를 사용하는 경우 타입이나 인터페이스를 import할 때 해결되지 않는 경우가 있으므로
//이 설정을 해제할 수 있습니다.
"import/order": "off",
// import 문의 순서를 강제하는 규칙을 해제
"import/no-anonymous-default-export": "off",
//익명으로 default export하는 것을 허용
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [".storybook/**", "src/stories/**"]
}
],
//프로젝트의 의존성 관리를 검사. 프로덕션 코드에서 필요하지 않은 의존성을 사용하는지 체크
//설정에 따라서는 특정 디렉토리나 파일을 제외하여 검사하는 것도 가능
"no-param-reassign": ["error", { "props": false }],
//함수의 매개변수를 재할당하는 것을 허용하지 않는 규칙을 설정
"no-use-before-define": "off",
//변수가 선언되기 전에 사용하는 것을 허용하는 규칙을 해제
"@typescript-eslint/no-use-before-define": ["error"],
//TypeScript 코드에서 변수가 선언되기 전에 사용하는 것을 오류로 처리
"no-shadow": "off",
//변수에 동일한 이름의 다른 변수를 선언하는 것을 허용하는 규칙을 해제
"no-unused-expressions": ["warn"],
//사용되지 않는 표현식을 사용하는 것을 경고로 처리하는 규칙을 설정
//표현식이 평가되지만 결과가 사용되지 않는 경우 경고를 발생
"@typescript-eslint/no-shadow": ["error"],
//변수에 동일한 이름의 다른 변수를 선언하는 것을 오류로 처리하는 TypeScript ESLint 규칙을 설정
"@typescript-eslint/naming-convention": "off",
//변수, 함수 및 클래스의 네이밍 규칙을 적용하는 TypeScript ESLint 규칙을 해제
"@typescript-eslint/unbound-method": "off",
//클래스의 메서드를 호출할 때,
//메서드를 바인딩(bind)하지 않는 것을 허용하는 TypeScript ESLint 규칙을 해제
"@typescript-eslint/no-non-null-assertion": "off",
// !를 사용하여 null 또는 undefined가 아님을 단언하는 것을 허용하는 TypeScript ESLint 규칙을 해제
"@typescript-eslint/no-unsafe-member-access": "off",
//타입 안전성을 고려하지 않고 객체의 속성에 접근하는 것을 허용하는 TypeScript ESLint 규칙을 해제
"@typescript-eslint/no-unsafe-assignment": "off",
//타입 안전성을 고려하지 않고 변수에 값을 할당하는 것을 허용하는 TypeScript ESLint 규칙을 해제
"@typescript-eslint/no-unused-vars": [
"warn",
{ "argsIgnorePattern": "^_" }
],
// 사용하지 않는 변수를 사용할 때 경고를 발생시키는 TypeScript ESLint 규칙을 설정.
// argsIgnorePattern을 사용하여 이름이 언더스코어(_)로 시작하는 인수를 무시하도록 설정
"prefer-const": ["warn"],
//변수가 재할당되지 않는 경우 const를 사용할 것을 권장하는 규칙을 설정
"prefer-destructuring": ["error", { "object": true, "array": false }],
//구조 분해(destructuring)를 사용할 것을 권장하는 규칙을 설정합니다.
//이 설정은 객체 분해는 사용하되 배열 분해는 사용하지 않도록 설정
"lines-between-class-members": "off",
//클래스 멤버 간의 빈 줄을 요구하는 규칙을 해제
"jsx-a11y/click-events-have-key-events": "off",
//클릭 가능한 요소에 대한 키 이벤트 처리를 요구하는 규칙을 해제
"jsx-a11y/label-has-associated-control": [
"error",
{
"labelComponents": ["label"],
"labelAttributes": ["htmlFor"],
"controlComponents": ["input"]
}
],
//label 요소와 관련된 input 요소를 요구하는 규칙을 설정합니다.
//이 설정은 label이 htmlFor 속성을 가져야 하고, input 요소와 관련된 label 요소를 가져야 한다고 정의
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
//모듈을 import할 때 파일 확장자를 명시적으로 지정하는 것을 요구하는 규칙을 설정
},
"settings": {
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
// import 구문에서 파일 확장자를 생략할 수 있는 확장자를 설정
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
// "typescript": {}
},
//: import 구문에서 모듈을 해석(resolve)할 때 사용되는 확장자를 지정하는 설정
//Node.js 환경에서 모듈을 해석할 때 .js, .jsx, .ts, .tsx 파일을 해석 대상으로 포함하도록 지정
"react": {
"pragma": "React",
"version": "detect"
}
}
}
카테고리 없음