Eslint + Prettier with Vue

HAYEON KANG·2022년 8월 4일
0

Vue

목록 보기
1/1
post-thumbnail

Eslint 와 Prettier 설정하기

  • 프로젝트 레벨로 Eslint & Prettier 규칙을 관리해야 하는 이유

    프로젝트가 src 레벨에서 설정이 되어있을 때, 해당 프로젝트 코드를 clone하거나 fork해 작업하는 모든 작업자가 동일한 설정을 가지고 코드를 정리할 수 있기 때문이다.

-> 개발 툴의 종류와 환경에 영향을 받지 않고 프로젝트 소스 레벨에서 설정을 관리하는게 팀 내 관리 차원에서 생산성이 높아짐

Vue + Eslint + Prettier 적용

✨ 패키지 설치 (package.json)

  • vue + eslint 적용
npm i eslint --save-dev
npm i eslint-plugin-vue --save-dev

-> i 대신 install 사용해도 무방

  • prettier 적용
npm i prettier --save-dev
  • eslint와 prettier을 통합으로 사용하기 위해 필요
npm i eslint-config-prettier eslint-plugin-prettier --save-dev // 이부분 추가

--save : package.json에서 dependencies에 추가되도록 조건 설정
--save-dev : package.json에서 devDependencies에 추가되도록 조건 설정

📌 이때, eslint의 버전이 v7이하일 경우 prettier가 동시에 적용이 안되는 오류가 생길 수 있음

  • eslint 버전 호환 문제 해결
npm i --save-dev eslint@7             // 버전 v7 이상으로 변경
npm i --save-dev eslint-plugin-vue@8  // 버전 v8 이상으로 변경

✨ Eslint 설정 (.eslintrc.js)

  • eslintrc 설정 파일에 prettier까지 설정
  • .eslintrc.js
module.exports = {
	root: true,
	env: {
		node: true,
	},
	extends: [
		'plugin:vue/essential',
		'eslint:recommended',
		'plugin:prettier/recommended', // 이 부분 꼭 추가해야함!
	],
	parserOptions: {
		parser: '@babel/eslint-parser',
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'prettier/prettier': [        // prettier 룰 추가
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],
	},
	...
};
  • prettierrc가 아닌 eslintrc 설정 파일에서 prettier를 설정해주는 이유

    eslint가 먼저 우선시 되어야하기 때문
    또한, prettier로 정리를 하면서 eslint로 룰까지 적용됨
    (prettier를 통한 코드 정리와 동시에 eslint 에러까지 잡을 수 있음)

  • prettier 룰 참고자료



📌 추가 - VSC에서 파일 저장 시 자동으로 eslint (& prettier) 적용

✨ setting 추가 (vsc의 경우 settings.json)

// settings.json

// 기본 포맷팅
"editor.defaultFormatter" : "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
    
// 자동 포맷팅 <- 이부분이 중요!
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"editor.formatOnSave": false,
  • 기본 포맷팅은 개인 설정에 따라 자유, 자동 포맷팅은 eslint 자동 적용시 필수! 😊

-> setting을 변경해주었지만 실시간 적용이 안된 경우, VSC를 종료 후 재시작을 해보세요!


Eslint와 Prettier를 이용해 좀 더 편리한 에러 처리와 코드 통합을 해보세요!

개발자의 편의성을 높여 프로젝트를 완성할 수 있습니다! 🥰

profile
Front Developer / Web Developer

0개의 댓글