vue 코딩 컨벤션

ESLint

• 기본적으로 vue-plugin-vue essential과 airbnb code style을 따른다.

  extends: ["plugin:vue/essential", "airbnb-base", "@vue/prettier"],

설정을 위한 npm 설치

npm install --save-dev eslint-config-airbnb
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-vue

추가적인 rules

• semi: ['error','always']

console.log('hello world'); // O

console.log('hello world'); // X

• 'comma-dangle': 'off'

const person = {
  name: 'jun',
  age: 31,
} // O

const person = {
  name: 'jun',
  age: 31
} // X

• 'no-new': 'off'

const person = new Person() // O
new Person() // X

• indent: ['error', 2]

const person = {
  name: 'jun',
  age: 31,
} // O

const person = {
    name: 'jun',
    age: 31,
} // X

• 'import/extensions': ['error', 'always'], 'import/no-unresolved': 'off'

import Person from './Person.js' // O
import Person from './Person' // X

Prettier

• tabWidth: 2

const person = {
  name: 'jun',
  age: 31,
} // O

const person = {
    name: 'jun',
    age: 31,
} // X

• semi: true

console.log('hello world'); // O

console.log('hello world'); // X

• singleQuote: true

console.log('hello world'); // O

console.log("hello world"); // X

• endOfLine: 'lf'
  • 줄바꿈 옵션으로 \n을 사용한다.
• trailingComma: 'all'

const person = {
  name: 'jun',
  age: 31,
} // O

const person = {
  name: 'jun',
  age: 31
} // X

• bracketSpacing: true

{ name: 'jun' } // O
{name: 'jun'} // X

• printWidth: 120
  • 한줄의 크기를 120으로 설정한다.
• jsxBracketSameLine: false

<button
	className="prettier-class"
	id="prettier-id">
	Click Here
</button> // O

<button
	className="prettier-class"
	id="prettier-id"
>
	Click Here
</button> // X

• jsxSingleQuote: false

<button
	className="prettier-class"
	id="prettier-id">
	Click Here
</button> // O

<button
	className='prettier-class'
	id='prettier-id'
>
	Click Here
</button> // X

• quoteProps: 'as-needed'

const object2 = {
    foo: 'bar',
    baz: 42,
    true: 0,
    0: 0,
    'qux-lorem': true
}; // O

const object2 = {
    "a": 0,
    "0": 0,
    "true": 0,
    "null": 0
}; // X

• arrowParens: 'always'

(x) => x // O

x => x // X

• vueIndentScriptAndStyle: false

<script>
export default {
    mounted() {
        console.log("Component mounted!");
    }
};
</script>
<style>
body {
    color: #fff;
}
</style> // O

<script>
    export default {
        mounted() {
            console.log('Component mounted!')
        }
    }
</script>
<style>
    body {
        color: #fff;
    }
</style> // X

기타 컨벤션

컴포넌트 명명규칙

• 파스칼케이스를 따른다.
  • 첫 문자가 대문자이며, 복합어일 경우 중간에 시작하는 새로운 단어는 대문자로 적는다. 예) UtilityBox, MainFrame