환경
협업 프로젝트를 진행할때 코딩 컨벤션을 따르지 않으면 타인이 작성한 코드를 쉽게 이해할 수 없는 경우가 발생한다. 또한, 개인 프로젝트에서도 일정한 규칙이 없으면 한 사람이 작성하더라도 다른 형태의 코드가 작성되는 경우가 있다. 일관된 코드 작성을 위해 협업 프로젝트에서, ESLint를 적용한 방식은 다음과 같다.
ES + Linter
-> 하위 컴포넌트에서 받는 props가 많아지면 다음과 같이 길어지는 경우가 발생한다. 이럴때 작성하는 사람마다 개행하는 위치도 다르고 props 작성 순서도 다르다. 이를 위해 제일 강한 강도의 규칙을 설정한다.
<template>
<div id="app">
<HelloWorld v-if="visible" msg="Welcome to Your Vue.js App" :title="info.title" :date="info.date"/>
</div>
</template>
-> ESLint 에러가 터미널에 출력되는데 귀찮아서 고치지 않으면, 쌓이고 쌓여서 에러가 무진장 많이 출력된다. 가능한 편하게 고치기 위해 autoFixOnSave를 설정해준다.
규칙을 적용해도 수정하는 방식이 다르고, 귀찮아서 고치지 않는 경우가 있기 때문에 recommended, autoFixOnSave를 설정해주었다.
마켓 플레이스에서 ESLint를 검색해서 플러그인을 설치한다.
vue-cli 3.x 부터는 eslint 설정이 package.json에 들어있다.
//path: 프로젝트 폴더 명/package.json
"eslintConfig": {
...
"extends": [
"plugin:vue/recommended", // essential에서 recommended로 변경
"eslint:recommended"
],
...
},
//path: 프로젝트 폴더 명/.vscode/settings.json
//VS code에서 프로젝트 폴더를 열때 작업영역에 폴더를 추가하는 것으로 열어준다.
...
"eslint.validate": [
{"language": "vue", "autoFix": true}, //vue 체크
{"language": "javascript", "autoFix": true}, //자바스크립트 체크
{"language": "html", "autoFix": true}, //HTML 체크 <div></div> -> <div />
],
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
...
저장 버튼을 꾹 누르면 autoFixOnSave가 수행되어 recommended에 맞게 코드가 자동으로 수정된다.
참고자료 - Vue.js 완벽 가이드 - Vue Router 공식 가이드 라우팅이란? 라우팅이란 웹 페이지의 간의 이동방법을 의미합니다. 싱글 페이지 애플리케이션(SPA)은 이동할 페이지를 미리 받아놓고, 페이지를 이동할 때 라우팅을 이용해서 화면을 갱신합니다. Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 ...
참고자료 - Vue.js 완벽 가이드 - Vue CLI 공식 가이드 Vue CLI 란 Vue CLI 는 커맨드라인 인터페이스 기반의 Vue 프로젝트 생성 도구입니다. Vue 애플리케이션을 개발할 때 기본적인 폴더 구조, 라이브러리 등을 설정해줍다. 1. 설치 6. 프로젝트 구성 - vue-cli 3.x 플러그인 기반으로 기능 추가 - ...
어제것은 githubpages에 올렸는데, 웹에서 수정이 어렵고, 쓰기 불편해서 이제부터 벨로그에 작성할래 오늘 한 일 - vue-advanced 강의 라우터 기본 6개 수강 알아야 할 점 - rounter.push() 프로젝트에서 router-link 대신에 router.push() 를 사용하고 있다. vue-router를 보면 1) route...
환경 - vue-cli 3.x 이상 - eslint recommended - VS code - ESLint (VS code 플러그인) - 협업 프로젝트를 진행할때 코딩 컨벤션을 따르지 않으면 타인이 작성한 코드를 쉽게 이해할 수 없는 경우가 발생한다. 또한, 개인 프로젝트에서도 일정한 규칙이 없으면 한 사람이 작성하더라도 다른 형태의 코드가 작성되는 경...
2018년 회고 이지만, 2019년 1월 20일에 작성했다... 왜냐하면, 작성할 자신이 없었기 때문이다. 1. 알고리즘 - 2018년 '알고리즘' 단, 한가지에 집중했다. 이를 통해서 얻은것이 정말 많다. 그 중 한가지는 취업이었다. 2017년 12월 4일 알고리즘을 전혀 모르는 상태에서 20주간 공부해서 코딩 테스트를 통과하고 취업까지 이어질 ...