VsCode 에서 Eslint,Prettier 설정

velog.io/@josworks27/ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%B1%EC%97%94%EB%93%9C

[Back-end] ESLint, Prettier 설정하기

VSCode를 통한 ESLint 와 Prettier 설정(빠르게)

 

1. VSCode, Node.js 설치

 

2. VSCode - 마켓플레이스

=> ESLint , Formatter 설치

 

3. 터미널 실행

ESLint 설치

npm install eslint --save-dev

Prettier 설치

npm install prettier --save-dev --save-exact

 

추가모듈설치

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

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

 

eslint-config-prettier는 Prettier와 ESLint를 함께 사용하기 위해 충돌하는 설정 맞춰준다.

eslint-plugin-prettier는 IDE에서 사용한 코드 포맷을 prettier로 하기 위한 모듈이다.

 

4. .eslintrc.js 생성

=> 터미널 실행

=> eslint --init

=> 설정 후 js파일로 생성

 

5..eslintrc.js 설정

module.exports = {
	env: {
		browser: true,
		es2020: true,
		node: true,
	},
	extends: ['eslint:recommended', 'plugin:prettier/recommended'],
	parserOptions: {
		ecmaVersion: 11,
		sourceType: 'module',
		parser: 'babel-eslint',
	},
	plugins: ['prettier'],
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-unused-vars': 'off',
		'vue/no-unused-components': 'off', // 미사용 변수 체크 해제,
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],

	},
};