[Intellij]React Prettier, ESlint(airbnb) 설정

1. Prettier 설치

npm install prettier
yarn add prettier

2. Prettier 설정 파일

프로젝트 Root 위치에 .prettierrc 파일 생성 후 아래 코드 입력

{
    //줄 바꿈할 줄 길이 지정
    "printWidth": 100,
    //들여쓰기 공백 수
    "tabWidth": 2,
    //들여쓰기 탭 사용 / 공백 사용
    "useTabs": false,
    //문장의 마지막 세미콜론 작성 여부
    "semi": true,
    //인용 부호 사용 시 큰 / 작은 따옴표 사용
    "singleQuote": true,
    //후행 쉼표 사용 여부
    "trailingComma": "all",
    //대괄호 사이 공백 여부
    "bracketSpacing": true,
    //화살표 함수 괄호 포함 여부
    //always : 항상 괄호 / avoid : 가능하면 괄호 생략
    "arrowParens": "avoid",
    //줄 바꿈에 민감한 글 prettier 여부
    //always : 인쇄 너비 초과 시 산문을 감쌉니다.
    //never : 각 산문 블록을 한 줄로 풉니다.
    //preserve : 건들지 않는다.
    "proseWrap": "never",
    //줄 바꿈 문자 설정(lf, crlf, cr)
    "endOfLine": "auto"
}

3. Intellij Prettier 설정

1. Prettier package

설정할 프로젝트 node_modules의 prettier 폴더 설정 (Select 클릭 시 사용할 수 있는 prettier 나열됨.)

2. Run for files

glob pattern 혹은 파일 형식 작성으로 원하는 곳에서 실행하도록 설정

3. On save

파일 저장 시 prettier 실행

 

4. ESlint 설치

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-config-react-app eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react @babel/eslint-parser @babel/preset-env @babel/preset-react
yarn add eslint eslint-config-airbnb eslint-config-prettier eslint-config-react-app eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react @babel/eslint-parser @babel/preset-env @babel/preset-react --dev

Dependencies	Explanation
eslint	ESlint Dependecy
eslint-config-airbnb	ESlint airbnb 설정
eslint-config-prettier	Prettier 호환
eslint-config-react-app	CRA ESlint 구성
eslint-plugin-import	ES2015+(ES6+) import / export 구문 지원 및 file path, import name 오류 문제 방지
eslint-plugin-jsx-a11y	JSX 접근성에 대한 피드백
eslint-plugin-prettier	Prettier를 ESlint 규칙으로 실행 후 차이점 문제 보고
eslint-plugin-react	React와 관련된 Rule 정의
@babel/eslint-parser	Babel 코드를 ESlint로 parser하여 Babel 코드 lint
@babel/preset-env	환경에 필요한 구문 변환(및 선택적으로 브라우저 폴리필)을 관리할 필요 없이 최신 JS를 사용
@babel/preset-react	React 플러그인에 대한 Babel 사전 설정

5. ESlint 파일 설정

프로젝트 Root 위치에 .eslintrc 파일 생성 후 아래 코드 입력

 

{
	//parser 설정(현재 ESlint와 호환되도록 BabelPaser 이용)
	"parser": "@babel/eslint-parser",
	//env키 사용 활성화 환경 설정
	"env": {
		//브라우저 전역 변수
		"browser": true,
		//ECMAScript es2021 전역 추가, ecmaVersion 12(parser option)
		"es2021": true,
		//Node.js 전역 변수 및 Node.js 범위 지정
		"node": true
	},
	//ParserOptionConfig
	"parserOptions": {
		//babel-eslint가 연결되었으나 Babel 변환 안되는 파일(Config File...) 실행 설정
		"requireConfigFile": false,
		//Babel 구성 옵션
		"babelOptions": {
			//.babelrc 파일 조회 옵션 찾을 때 까지 계속 조회
			// false : 조회 중지
			"babelrc": false,
			//작업 폴더에 의존하기에 Monorepo Root가 아닌 경우 사용이 힘듦
			//프로젝트 전체 구성 사용하지 않도록 false 설정(프로젝트 전체 구성 활성화/비활성화)
			"configFile": false,
			//활성화할 사전 설정 배열(플러그인, 구성 옵션 작동)
			"presets": ["@babel/preset-env","@babel/preset-react"]
		}
	},
	//추가한 플러그인에서 사용할 규칙 설정
	"extends": ["react-app","airbnb", "plugin:prettier/recommended"],
	//프로젝트에서 사용하는 규칙
	"rules": {
		"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
		"import/no-extraneous-dependencies": 0,
		"import/prefer-default-export": 0,
		"import/no-cycle": 0,
		"react/prop-types": 0,
		"no-use-before-define": ["error", {"functions": false, "variables": false }],
		"no-plusplus": 0,
		"react/jsx-no-useless-fragment": 0,
		"react/destructuring-assignment": 0,
		"prefer-destructuring": 0

	}
}

6. Intellij ESlint설정

Automatic ESLint configuration 설정 후  Run eslint --fix on save(저장 시 eslint 실행) 체크한다.

 

7. 오류 해결

가끔 위 와 같이 진행 이후에도 파일 내 상단에 오류가 나온다. 

Intellij 재 실행 이후에도 동일한 현상이라면 설치 안 된 Dependency는 없는지 설정이 잘못되었는지 확인한다.