frontend

Frontend Code Convention

vue style guide

Installation

Requirement

• vscode
  • extensions
    • eslint
    • prettier
    • vetur

How To Setting

1. run vscode, install extensions eslint, prettier, vetur
2. open setting (cmd + ,)
3. find format javascript. unchecked item
4. find format on save. check item

Rules:

• vue style guide, strong recommended
• spacing: 2, no tab
• semicolon: no semi
• quatation mark:
  • template: double quotation, backtick
  • script: single quotation, backtick
  • css: double quotation
• print width: 120
• bracket spacing: false

/* BAD */
const data = { key: 'value' } 

/* GOOD */
const data = {key: 'value'}

<!-- BAD -->
<div :style="{ margin: 1px }">

<!-- GOOD -->
<div :style="{margin: 1px}">

• space-before-function-paren: false
  • space-before-function-parent not working prettier

/* BAD */
function () {
}

/* Good */
function() {
}

• let and const insted of var

// BAD
// no-var
var a = 1

// BAD
// `let` must be reassign
let b = 1

// GOOD
const a = 1

// GOOD
let b = 1
b ++;

• filename:
  • scss, css -> underscore, -
  • export class: Pascal case
  • export object or function: Camel case.
• trailing comma

let aa = [
  'aaa',
  'bbb',
]

const bb = {
  first: {
    ...
  },
  second: {
    ...
  },
}

• function

export default {
  data (aaa, bbb) {
    return {
      foo: 'bar'
    }
  }
}

func2(data, {app: $axios}).then(res => {  
  let data2 = {
    'aaa': {
      'bbb': {
        'ccc': 'ddd',
      },
    },
  }

  for (let i = 0; i < 10; i++) {
    console.log('success')
  }
}).catch(error => {
  console.log('error')
})

<template>
  <div>
    <h1>{{ data }}</h1>
    <h2 :style="{a: 'bb', c:'cc'}"></h1>
  </div>
</template>