Vue + eslint + prettier

🛹 VSCode에서 Eslint  Prettier 설치

Eslint 설치

Prettier 설치

Eslint + Prettier 설치를 해준다.

 

 

🚐 eslint 관련된 라이브러리 설치

npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev

 

🚡 프로젝트 루트레벨에 린트 설정 파일 .eslintrc.js 추가

// eslint-disable-next-line no-undef
module.exports = {
	// 현재 eslintrc 파일을 기준으로 ESLint 규칙을 적용
	root: true,
	// 추가적인 규칙들을 적용
	extends: [
		'eslint:recommended',
		'plugin:vue/essential',
		'prettier',
		'plugin:prettier/recommended',
	],
	// 코드 정리 플러그인 추가
	plugins: ['prettier'],
	// 사용자 편의 규칙 추가
	rules: {
		'prettier/prettier': [
			'error',
			// 아래 규칙들은 개인 선호에 따라 prettier 문법 적용
			// https://prettier.io/docs/en/options.html
			{
				singleQuote: true, // '' 사용
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
			},
		],
		// eslint-disable-next-line no-undef
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	},
};

🚞 settings.json 설정 추가

윈도우 기준으로 F1을 누르고 settings.json을 누르고 아래의 내용을 추가해준다.

"editor.formatOnSave": false,
"editor.formatOnType": false,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
"eslint.workingDirectories": [
    {"mode": "auto"}
],
"eslint.validate": [
    "javascript",
    "typescript"
],

 

🚄 추가적으로 "Delete `␍` eslint (prettier/prettier)" 에러가 뜰 경우

에러

오른쪽 하단에 CRLF를 클릭 한 후 LF를 클릭하면 에러가 사라진다.