Inflearn Community Q&A

해결 하였습니다^^ 감사해요

안녕하세요 :)

"영상과 다르게 extentsion설치에 대한 문의가 없어"

위 말씀이 터미널에서 npm init vue 명령어를 통하여 프로젝트를 생성할 때 eslint 설치여부 묻지 않았다는 말씀이시죠?

1) npm init vue 명령어를 통해 생성하신거죠?

2) npm 버전을 확인할 수 있을까요?

npm -v // 버전확인

제가 v8.11.0 , v9.5.1 에서는 정상 동작을 확인해서요. 만약 v8 이하 버전이라면 npm 업그레이드를 한 번 해보시겠어요?

sudo npm istall -g npm // 업그레이드

3) 버전이상이 없다면

• node_modules 폴더 제거, package-lock.json 파일 제거 하신 후

• package.json에 아래 코드를 넣고

{
  "name": "learn-vue3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5050",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "bootstrap": "^5.1.3",
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@vitejs/plugin-vue": "^2.3.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0",
    "prettier": "^2.5.1",
    "vite": "^2.9.1"
  }
}

• npm install 명령어로 모듈 설치 진행

• .eslintrc.cjs 파일을 생성한 후 아래 코드 삽입

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

module.exports = {
	root: true,
	parserOptions: {
		ecmaVersion: '2022',
		sourceType: 'module',
	},
	extends: [
		'plugin:vue/vue3-essential',
		'eslint:recommended',
		'@vue/eslint-config-prettier',
	],
	env: {
		'vue/setup-compiler-macros': true,
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-unused-vars': 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
			},
		],
	},
};

이렇게 하신다음에 강의대로 진행해 보시겠어요?