yarn add -D eslint eslint-config-next
npx eslint --init
❗ 참고
// commonjs (esm 이전) 방식 const {useState} require('react') // esm (ECMAScript Module) 방식 import {useState} from 'react'
commonjs방식은 안에있는 내용들을 일단 다 가져오기 때문에
최적화엔 esm 방식으로 가져오는게 좋다.
Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
-> @typescript-eslint/parser 파싱을 위한 "parserOptions.project" 값을 제공해 달라.
-> parserOptions에 project : './tsconfig.json' 추가
- 즉, 우리가 설정한 타입스크립트 설정 파일(tsconfig.json)을 파서에게 알려줌
module.exports = { env: { browser: true, es2021: true }, extends: ['plugin:react/recommended', 'standard-with-typescript'], overrides: [], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: './tsconfig.json' // 추가 }, plugins: ['react'], rules: {} };
yarn add --dev --exact prettier echo {}> .prettierrc.json
{
"singleQuote": true,
"semi": true,
"useTabs": true,
"tabWidth": 2,
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "none",
"endOfLine": "auto"
}
📢 의미
singleQuote: true, // "" -> '' semi: true, // alert('1') -> alert('1'); useTabs: true, //공백 대신 탭을 사용해서 들여 씀 tabWidth: 2, //탭 간격( 공백 수2 ) printWidth: 80, //80칸이 넘어가면 개행 bracketSpacing: true, //{foo: bar} -> { foo: bar } arrowParens: 'avoid', // always : (x) => x, avoid : x => x trailingComma: 'all', //객체에서 후행 쉼표 사용 endOfLine: 'auto', // 줄끝 라인 맞추기
yarn add -D eslint-plugin-prettier eslint-config-prettier
패키지 설명 eslint-config-prettier ESLint 규칙에서 Pretter 규칙과 충돌하는 규칙들을 OFF 시키는 역할 eslint-plugin-prettier Prettier 규칙들을 ESLint 규칙에 추가하는 패키지.
eslint --fix 만 실행해줘도 prettier --write를 사용할 필요 없이 prettier까지 적용시켜준다
module.exports = {
env: {
browser: true,
es2021: true
},
extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'], // 추가 ('prettier' 충돌방지 eslint, prettier)
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json' //추가
//project: '**/tsconfig.json' // vscode내 여러 프로젝트 한번에 열었을 때
},
plugins: ['react'],
rules: {}
};
현재 열려있는 vscode 프로젝트 폴더 기준으로 최상단에 .vscode
폴더를 생성하고
settings.json
파일을 생성한다.
{
"editor.formatOnSave": true, // 파일 저장 시 자동 포맷팅
"editor.defaultFormatter": "esbenp.prettier-vscode" // 기본 포맷터
}
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.tabSize": 2
}
이런 ESlint 에러에 대한 모든 규칙을 지킬 필요는 없다.
팀 프로젝트 특성에 맞지 않는 룰들을 제외 시킬 수도 있다.
module.exports = {
env: {
browser: true,
es2021: true
},
extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: ['react'],
rules: {
'react/self-closing-comp': [ //셀프클로징 추가
'error',
{
component: true,
html: true
}
],
'react/react-in-jsx-scope': 'off', // 추가 jsx파일 내 React 선언 제외
'@typescript-eslint/explicit-function-return-type': 'off', // 추가 리턴타입 jsx 제외
'@typescript-eslint/strict-boolean-expressions': 'off', // truthy, falsy한 값을 엄격하게 체크 제외
'@typescript-eslint/no-misused-promises': 'off', // 추가 Promise return 타입에 void가 예상되는 에러 규칙 제외
// 내가 프로미스를 사용하는 함수타입이 리턴이 없어서 () => void로 정의해 놓았는데
// onMyClickHandler : () => Promise<void>로 바꿔줘야 한다는 경고
// 바꿔주게 되면 onMyClickHandler를 onClick={onMyClickHandler}로 사용하는 jsx에서
// 바로 promise<void>를 리턴할 수 없다는 문제가 나옴
// 그럼 다시 onClick={() => onMyClickHandler}로 함수로 감싸줘야 하는 번거로움이 있음 ,, 그래서 제외
'@typescript-eslint/triple-slash-reference': 'off' // 추가 declare typescript 파일 ///<reference /> 삼중 슬래시 지시자에서 ///사용하지 말라는 경고가 나오기 때문에 규칙 제외
//기타
//@typescript-eslint/no-floating-promises
// router.push()할때 뒤에 .catch를 붙여 항상 에러를 캐치하게 적용 할지..
//@typescript-eslint/restrict-template-expressions
// 템플릿 리터럴 방식에서 undefined가 될만한 요소 체크
// `템${undefined ?? ""}터럴`과 같이 nullish를 사용하던지 옵션을 끄던지.. 고민
}
};
npx eslint .
이건 내가 작성한게 아니기 때문에 무시 하겠다는 옵션을 추가해줬다