kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'vue-eslint' into 'master'

Browse source 
Adds a better explanation for alignment section

Closes #32071

See merge request !14109
This commit is contained in:
Phil Hughes 2017-09-08 12:10:12 +00:00
commit fadc58c50d
1 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
doc/development/fe_guide/style_guide_js.md
View file

@ -311,6 +311,7 @@ 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:
```javascript ```javascript
// bad // bad
<component v-if="bar" <component v-if="bar"
@ -327,9 +328,16 @@ A forEach will cause side effects, it will be mutating the array being iterated.
<button class="btn"> <button class="btn">
Click me Click me
</button> </button>
```
1. The tag can be inline if there is only one attribute:
```javascript
// good
<component bar="bar" />
// if props fit in one line then keep it on the same line // good
<component bar="bar" /> <component
bar="bar"
/>
``` ```
#### Quotes #### Quotes
@ -381,9 +389,12 @@ A forEach will cause side effects, it will be mutating the array being iterated.
} }
``` ```
1. Default key should always 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.
On those a default key should not be provided.
```javascript ```javascript
// bad // good
props: { props: {
foo: { foo: {
type: String, type: String,
@ -512,11 +523,11 @@ A forEach will cause side effects, it will be mutating the array being iterated.
``` ```
### The Javascript/Vue Accord ### The Javascript/Vue Accord
The goal of this accord is to make sure we are all on the same page. The goal of this accord is to make sure we are all on the same page.
1. When writing Vue, you may not use jQuery in your application. 1. When writing Vue, you may not use jQuery in your application.
1. If you need to grab data from the DOM, you may query the DOM 1 time while bootstrapping your application to grab data attributes using `dataset`. You can do this without jQuery. 1. If you need to grab data from the DOM, you may query the DOM 1 time while bootstrapping your application to grab data attributes using `dataset`. You can do this without jQuery.
1. You may use a jQuery dependency in Vue.js following [this example from the docs](https://vuejs.org/v2/examples/select2.html). 1. You may use a jQuery dependency in Vue.js following [this example from the docs](https://vuejs.org/v2/examples/select2.html).
1. If an outside jQuery Event needs to be listen to inside the Vue application, you may use jQuery event listeners. 1. If an outside jQuery Event needs to be listen to inside the Vue application, you may use jQuery event listeners.
1. We will avoid adding new jQuery events when they are not required. Instead of adding new jQuery events take a look at [different methods to do the same task](https://vuejs.org/v2/api/#vm-emit). 1. We will avoid adding new jQuery events when they are not required. Instead of adding new jQuery events take a look at [different methods to do the same task](https://vuejs.org/v2/api/#vm-emit).
1. You may query the `window` object 1 time, while bootstrapping your application for application specific data (e.g. `scrollTo` is ok to access anytime). Do this access during the bootstrapping of your application. 1. You may query the `window` object 1 time, while bootstrapping your application for application specific data (e.g. `scrollTo` is ok to access anytime). Do this access during the bootstrapping of your application.