[Webpack] ESLint & Prettier 설정

참조: https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html

프론트엔드 개발환경의 이해: 린트

yarn add eslint prettier --dev

eslint & prettier 설치

 

yarn eslint --init

위 명령어로 eslint 기초 설정 진행

 

yarn add eslint-config-prettier eslint-plugin-prettier --dev

* eslint-config-prettier : eslint의 포맷팅을 사용하지않고 prettier의 포맷팅 기능을 사용할 수 있도록 해줌

해당 라이브러리 설치 및 설정 시 eslint의 포맷팅 기능은 동작하지않음

extends에 'eslint-config-prettier' 추가 시 적용

 

* eslint-plugin-prettier : prettier의 규칙을 eslint에 포함시킴, eslint만 실행하여도 prettier까지 같이 동작

extends에 'plugin:prettier/recommended' 추가 시 적용

 

예시 코드

---

.eslintrc.js 

module.exports = {
	env: {
		browser: true,
		es2021: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended',
        'eslint-config-prettier',
	],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaFeatures: {
			jsx: true,
		},
		ecmaVersion: 'latest',
	},
	plugins: [
		'react',
		'@typescript-eslint',
		// "prettier"
	],
	rules: {
		'prettier/prettier': [
			'error',
			{
				tabWidth: 4,
				printWidth: 120,
				singleQuote: true,
				trailingComma: 'es5',
				useTabs: true,
			},
		],
	},
};

 

.vscode settings

{
    "eslint.enable": true,
    // "editor.formatOnSave": true,
    // "editor.formatOnType": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

 

rules 에 prettier 옵션 추가 가능

prettier 옵션 아래 참조

 

참조: https://uxgjs.tistory.com/150

VScode Code Formater 인 Prettier 완벽 적용하기

 

추가로 사용하는 에디터에 ESLint 플러그인 설치 필요