Vue - SFC 프로젝트 구성 With Webpack

eslint설정 방법

1. npm i -D eslint eslint-plugin-vue

2. 루트 경로에 .eslintrc.json 파일 생성 (.js로 만들어도 됨)

3. .eslintrc.json에 설정 작성

 

- env : 브라우저에 전역 API, nodejs의 전역 API 대한 eslint 규칙을 확인 시켜줌

- browser : false => 전역 API(window,document) eslint로 확인하겠다는 의미

- node : false => 전역API(required,module.exrport, __dirname 등) eslint로 확인하겠다는 의미

- eslint:recommanded : eslint에서 추천되는 JS 규칙을 그대로 사용

- plugin:vue/vue3-recommanded : eslint에서 추천되는 vue 규칙을 그대로 사용

4. ESLint 확장 프로그램 설치해야됨

5. 보기 -> 명령 팔레트에서 아래처럼 클릭

6. 해당 옵션 추가

- 에디터내에서 파일을 저장하게되면 eslint규칙에맞게 수정한다는 뜻

 

 

 

eslint 규칙 수정 방법

태그의 닫는 부분이 줄바꿈이 안되도록 하면 아래와 같이 알림이 뜨는데 링크를 눌러보자

2. 사이트에서 해당 규칙의 옵션 확인

singleline : never => 한 줄로만 작성할 때는 위 규칙을 사용하지 않겠다.

multiline : always => 여러 줄을 작성할 때는 위 규칙이 필요하다.

4. 위 코드 복사 후 .eslintrc.json에 추가해서 덮어씌울 거임

multiline을 never로 수정한 후 저장

 

 

추가로 세미콜론과 문자데이터의 따옴표 기준!

 

double은 큰따옴표, single은 작은따옴표