A rough guide for keeping a consistent project style
All JavaScript must adhere to the JavaScript Standard Style, it isn't officially endorsed by Ecmascript someone just called it that. This style is set up with Eslint so it should be easy to follow.
Vue components should be organised like so:
<template lang="pug">
</template>
<script>
</script>
<style lang="sass">
</style>
Component definitions should define configuration in a static > instance order, with the static things first. Here is an example order
export default {
mixins: [ ],
components: { },
props: { }, // An explicit definition is preferred rather than an array
data: () => ({ }), // Using the arrow-function shorthand where possible
computed: { },
watch: { }, // Try to avoid using watches, $route.params.____ is ok
mounted () { }, // The lifecycle hooks around here, earliest first
methods: { } // Then your custom methods
}
- Use the past tense ("Added feature" not "Add feature")
- Use the imperative mood ("Moved cursor to..." not "Moves cursor to...")
- Use the first line (72 letters) as a general description then bullet changes on subsequent lines with an
*
- Unless you change something really small
- Consider starting the commit message with an applicable emoji:
- 🎨
:art:
when improving the format/structure of the code - 🐎
:racehorse:
when improving performance - 🚱
:non-potable_water:
when plugging memory leaks - 📝
:memo:
when writing docs - 🐧
:penguin:
when fixing something on Linux - 🍎
:apple:
when fixing something on macOS - 🏁
:checkered_flag:
when fixing something on Windows - 🐛
:bug:
when fixing a bug - 🔥
:fire:
when removing code or files - 💚
:green_heart:
when fixing the CI build - ✅
:white_check_mark:
when adding tests - 🔒
:lock:
when dealing with security - ⬆️
:arrow_up:
when upgrading dependencies - ⬇️
:arrow_down:
when downgrading dependencies - 👕
:shirt:
when removing linter warnings - 🌐
:globe_with_meridians:
when changing localisation
- 🎨
This is a simplified version of Atom's Contribution Guide