Commit 39e2ace4 authored by Christiaan Van den Poel's avatar Christiaan Van den Poel Committed by Rémy Coutable

fixes some markup issues in the js style guide docs

parent 4ccbd556
...@@ -86,34 +86,34 @@ followed by any global declarations, then a blank newline prior to any imports o ...@@ -86,34 +86,34 @@ followed by any global declarations, then a blank newline prior to any imports o
#### Modules, Imports, and Exports #### Modules, Imports, and Exports
1. Use ES module syntax to import modules 1. Use ES module syntax to import modules
```javascript ```javascript
// bad // bad
const SomeClass = require('some_class'); const SomeClass = require('some_class');
// good // good
import SomeClass from 'some_class'; import SomeClass from 'some_class';
// bad // bad
module.exports = SomeClass; module.exports = SomeClass;
// good // good
export default SomeClass; export default SomeClass;
``` ```
Import statements are following usual naming guidelines, for example object literals use camel case: Import statements are following usual naming guidelines, for example object literals use camel case:
```javascript
// some_object file
export default {
key: 'value',
};
// bad
import ObjectLiteral from 'some_object';
// good ```javascript
import objectLiteral from 'some_object'; // some_object file
``` export default {
key: 'value',
};
// bad
import ObjectLiteral from 'some_object';
// good
import objectLiteral from 'some_object';
```
1. Relative paths: when importing a module in the same directory, a child 1. Relative paths: when importing a module in the same directory, a child
directory, or an immediate parent directory prefer relative paths. When directory, or an immediate parent directory prefer relative paths. When
...@@ -334,33 +334,33 @@ A forEach will cause side effects, it will be mutating the array being iterated. ...@@ -334,33 +334,33 @@ A forEach will cause side effects, it will be mutating the array being iterated.
#### Alignment #### Alignment
1. Follow these alignment styles for the template method: 1. Follow these alignment styles for the template method:
1. With more than one attribute, all attributes should be on a new line: 1. With more than one attribute, all attributes should be on a new line:
```javascript ```javascript
// bad // bad
<component v-if="bar" <component v-if="bar"
param="baz" /> param="baz" />
<button class="btn">Click me</button> <button class="btn">Click me</button>
// good // good
<component <component
v-if="bar" v-if="bar"
param="baz" param="baz"
/> />
<button class="btn"> <button class="btn">
Click me Click me
</button> </button>
``` ```
1. The tag can be inline if there is only one attribute: 1. The tag can be inline if there is only one attribute:
```javascript ```javascript
// good // good
<component bar="bar" /> <component bar="bar" />
// good // good
<component <component
bar="bar" bar="bar"
/> />
``` ```
#### Quotes #### Quotes
1. Always use double quotes `"` inside templates and single quotes `'` for all other JS. 1. Always use double quotes `"` inside templates and single quotes `'` for all other JS.
...@@ -414,7 +414,6 @@ A forEach will cause side effects, it will be mutating the array being iterated. ...@@ -414,7 +414,6 @@ A forEach will cause side effects, it will be mutating the array being iterated.
1. Default key should be provided if the prop is not required. 1. Default key should be provided if the prop is not required.
_Note:_ There are some scenarios where we need to check for the existence of the property. _Note:_ There are some scenarios where we need to check for the existence of the property.
On those a default key should not be provided. On those a default key should not be provided.
```javascript ```javascript
// good // good
props: { props: {
...@@ -494,21 +493,20 @@ On those a default key should not be provided. ...@@ -494,21 +493,20 @@ On those a default key should not be provided.
#### Ordering #### Ordering
1. Tag order in `.vue` file 1. Tag order in `.vue` file
```
``` <script>
<script> // ...
// ... </script>
</script>
<template>
<template> // ...
// ... </template>
</template>
// We don't use scoped styles but there are few instances of this
// We don't use scoped styles but there are few instances of this <style>
<style> // ...
// ... </style>
</style> ```
```
1. Properties in a Vue Component: 1. Properties in a Vue Component:
1. `name` 1. `name`
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment