eslint 설정
create-next-app에서 eslint가 깔려 있지만, 너무 간소하게 깔려 있다.
그래서 설정들을 추가해 줬다.
기존 eslintrc.json 파일을 삭제하고 npx eslint —init으로 질문에 답하며 생성한다.
이때 함께 설치해주는게 eslint-plugin-react 정도 뿐이라서 나머지 플러그인 들은 추가로 설치해준다.
추가한 파일들
{
"@typescript-eslint/eslint-plugin": "^4.28.3",
"@typescript-eslint/parser": "^4.28.3",
"eslint": "7.30.0",
"eslint-config-next": "11.0.1",
"eslint-plugin-babel": "^5.3.1", // 더 많은, 실험중인 feature 까지 지원해주는 플러그인입니다. babel-eslint 를 보완해주는 플러그인입니다. - 일단 이번엔 설치 안해봄. 바벨 쪽이 이상한 게 많아서..
"eslint-plugin-import": "^2.23.4", // es6의 import/export syntax 체크, 파일 경로나 import 이름을 잘못 입력하는지 여부를 체크해주는 lint 플러그인
"eslint-plugin-jsx-a11y": "^6.4.1", // 리액트 element의 접근성 이슈를 짚어 lint 해주는 플러그인
"eslint-plugin-prettier": "^3.4.0", // 리액트 hooks 규칙들을 추가해 주는 플러그인
"eslint-plugin-react": "^7.24.0", // 리액트 규칙들을 추가해주는 플러그인
}기존 규칙에서 추가한 규칙
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true, // 추가함. node 환경 코드들도 있어서.
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
'next',
'next/core-web-vitals',
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [ // 내가 추가 설치한 플러그인들은 여기에 직접 적어주어야 함.
"react",
"@typescript-eslint",
"react-hooks",
"import",
"jsx-a11y",
"prettier"
],
"rules": {
'react/react-in-jsx-scope': 'off',
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
'react/display-name': 'off',
}
};마지막으로 .eslintignore 파일에 eslint 문법 적용 안받을 파일들 적어 줌(보통 설정 파일들)
Rules
"off"or0- 기능 끔"warn"or1- 경고"error"or2- 에러
error handling
'React' must be in scope when using JSX react/react-in-jsx-scop
1. Next.js는 전역에 React를 꼭 import하지 않아도 사용 가능하므로, 이 편의성을 그대로 이어 받기 위해 해당 옵션 체크를 끕니다.
eslint rules에서 'react/react-in-jsx-scope': 'off'
- 위 옵션을 끄면 React.component처럼 React.으로 시작하는 코드를 작성하려고 하면 에러가 납니다. 따라서 전역변수에 React를 선언해 줍니다.
globals: {
React: 'writable',
},prettier
프리티어는 자동으로 코드 포맷을 맞춰주는 아주 편리한 기능입니다.!
보통 프론트 개발에서는 eslint와 함께 사용하니, eslint와 연동하는 부분까지 함께 설치해줍니다.
설치
- eslint-config-prettier : 필요하지 않거나 Prettier와 충돌할 수 있는 모든 ESLint 규칙을 끕니다.
- eslint-plugin-prettier: Prettier를 ESLint 규칙으로 실행하고 차이점을 개별 ESLint 문제로 보고합니다.
yarn add --dev --exact prettier # exact는 버전이 달라지면서 생길 스타일 변화를 막기 위해서라고 한다.
yarn add --dev eslint-config-prettier eslint-plugin-prettierwith eslint 설정 적용
// eslintrc.js에서
{
extends: [
...
'prettier',
],
plugins: [
...
'prettier',
],
}prettierrc.js
자세한 내용은 문서 참고
module.exports = {
trailingComma: 'all',
tabWidth: 2,
semi: true,
singleQuote: true,
printWidth: 100,
bracketSpacing: false,
jsxBracketSameLine: false,
arrowParens: 'always',
useTabs: false
};editor setting
vscode
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}error
Replace ↹ with ··
운영체제 환경마다 tab의 간격 체크하는 기준이 달라서 탭 키가 잘 안먹거나 전부 빨간색 에러를 뿜어낼 수 있습니다. 이 때는 prettier 설정에서"useTabs": false로 설정해 주세요.
tsconfig
create-next-app의 typescript 버전을 설치하면 기본 세팅은 다 되어 있다.
그래도 공부차 설명하자면 react에서 사용하는 타입 정의와 함께 설치하면 된다.
yarn add --dev typescript @types/reacttsconfig.json을 만드는 명령어로 만들까 했지만, 이 버전은 곧잘 되어 있는 것 같아서 일단 냅두기로 했다. 만일 명령어로 tsconfig.json을 만들고 싶다면(모든 설정이 있는 채로 만들어지니까) 아래와 같이 하면 되다.
yarn run tsc --init
npx typescript --init규칙
{
"compilerOptions": {
"allowJs": true, // js 파일도 허용
"checkJs": true, // @ts-check 역할
"noImplicitAny": true, // any 타입으로 암시한 표현식과 선언에 오류를 발생시킵니다. any를 쓰더라도 명시를 하라!
"outDir": "./", // 컴파일 결과물을 어디에 놓을지 설정
"target": "ES5", // 컴파일할 때 javascript 버전 설정.
"moduleResolution": "node", // promise할 때 필요하다고 함.
"lib": ["ES2015", "DOM", "DOM.Iterable"] // lib를 정의하지 않으면 target의 버전을 기준으로 컴파일할 때 사용한다.
"baseUrl": ".", // 절대경로를 사용할 수 있습니다. 파일 경로의 default를 지정해 줍니다.
},
"include": ["./src/**/*"] // 어디서 읽어와서 컴파일 할 건지
"exclude": ["node_modules"] // 제외할 대상
}error
Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'
→ tsconfig파일과 같은 경로에 .ts파일이 하나도 없어서 생긴 문제.
