Skip to content

Code style

Jump to bottom
Andrej Sharapov edited this page Nov 2, 2022 · 1 revision

This article is a list of rules for writing concise examples that will be understandable by as many people as possible. This section explains the general guidelines to keep in mind while writing code examples.

Table of contents

Files naming

  • Folders - kebab-case
  • Files - kebab-case.format
  • Components - kebab-case
  • JS variables - camelCase 
# Example
|-- parent-folder
|---- child-folder
|------ component-name.format
|---- file-name.format

Lint

On this project use Prettier as a code formatter to keep the code style consistent. You can consult our configuration file to learn about the current rules, and read the Prettier documentation. Prettier formats all the code and keeps the style consistent. Nevertheless, there are a few additional rules that you need to follow:

HTML and Pug in Vue templates

Write example codes using a specific CSS methodology such as BEM.

Naming html

<template>
  <!-- bad -->
  <ComponentName />

  <!-- good (use kebab-case) -->
  <component-name />
</template>

Restrictions on content models

<template>
  <!-- bad -->
  <span>{{
    dataVar }}</span
  >

  <!-- good -->
  <span>{{ dataVar }}</span>

  <!-- good -->
  <span>
    {{ dataVar }}
  </span>
</template>

Attributes

  • You should put all attribute values in double quotes. It is tempting to omit quotes since HTML5 allows this, but markup is neater and easier to read if you do include them.
<!-- bad -->
<img src=images/logo.jpg alt=A circular globe icon class=no-border>

<!-- good -->
<img src="images/logo.jpg" alt="A circular globe icon" class="no-border" />
  • Don't write out boolean attributes in full; you can just write the attribute name to set it. For example, you can write:
<!-- bad -->
<video width="400" height="300" controls="controls" loop="loop" poster="path/src">

<!-- bad -->
<video width="400" height="300" controls="" loop="" poster="path/src">

<!-- good -->
<video width="400" height="300" controls loop poster="path/src">

CSS syntax

Use preprocessors

We document the vanilla CSS language and preprocessors more-less.

CSS -> SCSS -> Sass -> Stylus -> PostCSS (in lower priority)

CSS comments

Use CSS-style comments to comment code that isn't self-documenting. Also note that you should leave a space between the asterisks and the comment.

/* This is a CSS-style comment */

If you are using studio use VS Code CSS Comments extension to make things easier.

Double quotes around values

Where quotes can or should be included, use them, and use double quotes. For example:

input[type="search"] {
  background-color: #fff;
  background-image: url("../path/src/img.png");
}

Selectors

When a rule has multiple selectors, put each selector on a new line.

/* bad */
h1, h2, h3 {
  font-family: sans-serif;
  text-align: center;
}

/* good */
h1,
h2,
h3 {
  font-family: sans-serif;
  text-align: center;
}
/* bad */
p { color: white; background-color: black; padding: 1rem; }

/* good */
p {
  color: white;
  background-color: black;
  padding: 1rem;
}

Capitalization

/* bad */
color: #E5E5E5;

/* good */
color: #e5e5e5;

Styling JavaScript code

Component import

Do not add language mode in import.

// bad
import componentName from 'component-name.vue';

// good
import componentName from 'component-name';

Component naming

import componentName from 'component-name'; // use camelCase in import

export default {
  components: {
    componentName, // use camelCase
  },
};

Variables

export default {
  data: () => ({
    varName: null, // use camelCase
  }),
};

Styling Vue code

On this project use vue style guide as a code formatter to keep the code style consistent.

Note
There are a few additional rules that you should pay special attention to:

  • Be sure to specify the key="" if v-for was written above:
<!-- bad -->
<div v-for="">@content</div>

<!-- good -->
<div v-for="" :key="">@content</div>
  • Don't forget to specify REQUIRED values in props:
<!-- bad -->
<script>
  export default {
    props: {
      propsName: {
        Type: String, // Type is capitalized and no default specified
      },
    },
  },
</script>

<!-- good -->
<script>
  export default {
    props: {
      propsName: {
        type: String,
        default: '',
      },
    },
  },
</script>
  • We write props in the component through kebab-case, not through PascalCase || camelCase:
<script>
  export default {
    data: () => ({
      newProps: '',
    }),
  },
</script>

<!-- bad -->
<template>
  <my-component :newProps="data" />
</template>

<!-- good -->
<template>
  <my-component :new-props="data" />
</template>
Clone this wiki locally