Next Eslint / Prettier ( with Typescript ) 설정하기

 

1. Next 프로젝트 생성

npx create-next-app@latest

 * 기본적인 프로젝트 명 , lint 사용 여부 등을 고른 후에 프로젝트를 만들어주자.

 

2. Eslint 와 Prettier 를 함께 사용하기 위해 다음을 설치합니다.

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

 

3. 프로젝트 생성될 때 생긴 .eslintrc.json / js 를 작성합니다.

module.exports = {
	env: {
		// 전역 변수 사용을 정의합니다. 추가하지 않으면 ESLint 규칙에 걸리게 됩니다.
		browser: true,
		es6: true,
		node: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended', // 해당 플러그인의 권장 규칙을 사용합니다.
		'plugin:prettier/recommended',
	],
	parser: '@typescript-eslint/parser', // ESLint 파서를 지정합니다.
	parserOptions: {
		ecmaFeatures: {
			jsx: true, // JSX를 파싱할 수 있습니다.
		},
		ecmaVersion: 12, // Modern ECMAScript를 파싱할 수 있습니다.
		sourceType: 'module', // import, export를 사용할 수 있습니다.
	},
	plugins: ['react', '@typescript-eslint', 'prettier'],
	rules: {
		// ESLint 규칙을 지정합니다. extends에서 지정된 규칙을 덮어 쓸수도 있습니다.
		'react/react-in-jsx-scope': 'off',
		'react/prop-types': 'off',
		'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }], //should add ".ts" if typescript project
	},
	settings: {
		react: {
			version: 'detect', // 현재 사용하고 있는 react 버전을 eslint-plugin-react가 자동으로 감지합니다.
		},
	},
}

 

4. 프로젝트 루트에 .prettierrc.js 파일을 생성한 후 rule 을 작성합니다.

module.exports = {
	printWidth: 80, //코드 한줄 최대치
	semi: false, //코드 마지막에 세미콜론
	singleQuote: true, //문자열을 작은따옴표로 작성할것인지(false = 큰 따옴표)
	trailingComma: 'all', //객체나 배열 등에 맨 마지막에도 콤마
	tabWidth: 2, //들여쓰기 2칸(스페이스 2칸)
	bracketSpacing: true, //객체 리터럴에서 괄호에 공백 삽입 여부
	endOfLine: 'auto',
	useTabs: true, //탭 대신 스페이스
	arrowParens: 'avoid', // 화살표 함수에서 매개변수를 하나만 받을때 괄호 생략
}