inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

ESLint, Prettier

eslint 세팅 질문 드립니다.

1710

Seung hyun

작성한 질문수 1

0

vite로 프로젝트 설치 시, 영상과 다르게 extentsion설치에 대한 문의가 없어 바로 설치를 하였고,

eslint의 경우 npm으로 별도 설치 하였더니

영상에 보이는 cjs 파일이 보이지 않습니다.

rules세팅을 어떻게 해야 할까요?

vue.js vuejs

답변 2

0

Seung hyun

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

0

짐코딩

안녕하세요 :)

"영상과 다르게 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',
			},
		],
	},
};

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

 

npm init vue@3.1.9

0

36

2

크롭 웹스토어 vue devtools 설치 관련

0

38

1

snippets 작성하는 부분 설명이 있었나요?

0

47

2

computed 의 set 함수를 통해 const 변수에 값을 담는 부분

0

52

2

소스 공유 어디서 해야하는지 궁금합니다

0

60

2

component 등록과 사용

0

57

2

강의교안

0

56

2

eslint 룰 관련 질문이 있습니다.

0

63

2

npm init -y 명령어 실행에 관한 질문

0

153

2

volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.

0

167

2

깊은 감시자 질문

0

88

2

정리된 내용

0

153

2

화면이 왜 이렇게 뜨는걸까요?

0

184

2

왜 다르게 뜰까요..?ㅠㅠ

0

155

2

npm init vue , npm create vue@latest 명령 오류

0

289

2

강의를 듣다보니 궁금한 점 질문드립니다.

0

141

2

watch강의 질문

0

153

1

강의 듣다가 질문드립니다.

0

119

1

이벤트 처리 부분 강의 실습

0

140

2

v-pre는 설명이 없나요?

0

152

2

AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다

0

146

1

개발자도구 Vue 탭 관련 문의

0

240

2

강의를 인텔리제이로 수업따라가도 되져?

0

177

2

API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?

3

274

2