[VSCode] ESLint와 Prettier

ESLint와 Prettier

ESLint란?

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.

ESLint는 JavaScript 코드에서 발견된 문제를 식별하고 코드 스타일을 유지하도록 도와주는

오픈 소스 JavaScript 린트 도구이다.

코드를 분석하여 잠재적인 버그, 스타일 가이드 준수 여부, 코드 품질 등을 검사하여

개발자들이 더욱 효율적으로 코드를 작성하고 유지할 수 있도록 도와준다.

 

ESLint는 다양한 규칙을 제공하며,

이러한 규칙을 설정하고 사용자 정의할 수 있어 팀 또는 프로젝트에 맞게 코드 스타일을 조정할 수 있습니다.

또한, 플러그인 시스템을 통해 다양한 환경에서 사용할 수 있도록 확장성을 가지고 있습니다.

 

보통 개발환경에서 ESLint는 개발자들이

일관된 코드 스타일을 유지하고, 잠재적인 버그를 사전에 방지하며, 코드 품질을 향상시킬 수 있도록 도와줍니다.

 

이를 통해 코드 리뷰 과정이나 프로젝트 전반적인 품질을 향상시킬 수 있습니다.

$ npm install eslint --save-dev
// or
$ yarn add eslint --dev

 

.eslintrc.cjs 설정

// .eslintrc.js
module.exports = {
  // ...
  extends: "eslint:recommended",
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 개발일때는 콘솔을 사용할 수 있도록 설정
  },
};

 

 

Prettier와 통합하기

프리티어(Prettier)는 코드 포매터(code formatter) 이다. 
포맷팅을 맡더라도 코드 품질같은 검사는 ESLint 몫이기 때문에 주로 둘을 통합하여 사용한다.

 

eslint-config-prettier

프리티어를 사용할 때 ESLint가 코딩스타일에 관해서는 신경안쓰게하려면 eslint-config-prettier 를 설치한다. 

Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.

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

// .eslintrc.js
module.exports = {
  // ...
  extends: [
  	"eslint:recommended",
  	"eslint-config-prettier"
  ]
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 개발일때는 콘솔을 사용할 수 있도록 설정 
    'prettier/prettier': [
			'error',
			{
				singleQuote: true, // 작은 따옴표 사용
				semi: true, // 세미콜론 사용
				useTabs: true, // 탭 사용
				tabWidth: 2, // 탭 크기는 2
				tailComma: 'all', // 마지막에 콤마 붙이기
				printWidth: 80, // 줄바꿈 폭 길이
				bracketSpacing: true, // 객체 리터럴에서 괄호에 공백 삽입 여부
				arrowParens: 'avoid' // 화살표 함수 괄호 사용 방식
				// endOfLine: 'auto' // 윈도우에서도 린트가 통과하도록
			}
		]
  },
};

 

*tabWidth 추가 설정

VScode Ctrl+,(콤마) 
tab size 2로 설정

Vue3 프로젝트 최종

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
	root: true,
	extends: [
		'plugin:vue/vue3-essential',
		'eslint:recommended',
		'@vue/eslint-config-prettier/skip-formatting'
	],
	parserOptions: {
		ecmaVersion: 'latest'
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 개발일때는 콘솔을 사용할 수 있도록 설정

		'prettier/prettier': [
			'error',
			{
				singleQuote: true, // 작은 따옴표 사용
				semi: true, // 세미콜론 사용
				useTabs: true, // 탭 사용
				tabWidth: 2, // 탭 크기는 2
				tailComma: 'all', // 마지막에 콤마 붙이기
				printWidth: 80, // 줄바꿈 폭 길이
				bracketSpacing: true, // 객체 리터럴에서 괄호에 공백 삽입 여부
				arrowParens: 'avoid' // 화살표 함수 괄호 사용 방식
				// endOfLine: 'auto' // 윈도우에서도 린트가 통과하도록
			}
		]
	}
};