프로젝트에 eslint와 prettier를 나중에 추가하고 싶습니다.

작성한 질문수 1

1

안녕하세요 :)

1. eslint 설치

npm install --save-dev eslint eslint-plugin-vue

2. root 디렉터리에 .eslintrc.cjs 파일 추가

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

3. settings.json 파일에 아래 추가

{
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"typescript",
		"typescriptreact",
		"vue",
		"markdown"
	],
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
}

4. 여기까지 기본 eslint 설치 완료

5. prettier 설치

npm install --save-dev prettier @vue/eslint-config-prettier @rushstack/eslint-patch

6. .eslintrc.cjs 파일에 플러그인 및 prettier 규칙 추가

module.exports = {
	extends: [
		// add more generic rulesets here, such as:
		// 'eslint:recommended',
		'plugin:vue/vue3-recommended',
		// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
		'@vue/eslint-config-prettier',
	],
	rules: {
		// override/add rules settings here, such as:
		// 'vue/no-unused-vars': 'error'
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
			},
		],
	},
};

참고

해당 내용은 아래 링크에 기재되어 있는 내용입니다~! 

(rules 설정은 강의내용 참고함)

• eslint-plugin-vue
• @vue/eslint-config-prettier

순서대로 따라해보시고 위 링크 공식문서를 꼼꼼히 살펴보시면 도움이 되실거에요~! 🙂