Commit 8f13e071 authored by Achilleas Pipinellis's avatar Achilleas Pipinellis

Merge branch 'docs/fix-link-to-eslint-config' into 'master'

Fix broken link and file improvements

See merge request gitlab-org/gitlab-ce!22244
parents 1c51a6be 087eb951
# Style guides and linting # Style guides and linting
See the relevant style guides for our guidelines and for information on linting: See the relevant style guides for our guidelines and for information on linting:
## JavaScript ## JavaScript
We defer to [Airbnb][airbnb-js-style-guide] on most style-related We defer to [Airbnb][airbnb-js-style-guide] on most style-related
conventions and enforce them with eslint. conventions and enforce them with eslint.
See [our current .eslintrc][eslintrc] for specific rules and patterns. See [our current .eslintrc](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.eslintrc.yml) for specific rules and patterns.
### Common ### Common
...@@ -21,10 +23,10 @@ refactor an existing one, you should abide by the eslint rules. ...@@ -21,10 +23,10 @@ refactor an existing one, you should abide by the eslint rules.
```javascript ```javascript
// bad // bad
/* eslint-disable */ /* eslint-disable */
// better // better
/* eslint-disable some-rule, some-other-rule */ /* eslint-disable some-rule, some-other-rule */
// best // best
// nothing :) // nothing :)
``` ```
...@@ -34,14 +36,14 @@ refactor an existing one, you should abide by the eslint rules. ...@@ -34,14 +36,14 @@ refactor an existing one, you should abide by the eslint rules.
```javascript ```javascript
// bad // bad
/* eslint-disable no-new */ /* eslint-disable no-new */
import Foo from 'foo'; import Foo from 'foo';
new Foo(); new Foo();
// better // better
import Foo from 'foo'; import Foo from 'foo';
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Foo(); new Foo();
``` ```
...@@ -58,11 +60,11 @@ followed by any global declarations, then a blank newline prior to any imports o ...@@ -58,11 +60,11 @@ followed by any global declarations, then a blank newline prior to any imports o
/* global Foo */ /* global Foo */
/* eslint-disable no-new */ /* eslint-disable no-new */
import Bar from './bar'; import Bar from './bar';
// good // good
/* eslint-disable no-new */ /* eslint-disable no-new */
/* global Foo */ /* global Foo */
import Bar from './bar'; import Bar from './bar';
``` ```
...@@ -73,7 +75,7 @@ followed by any global declarations, then a blank newline prior to any imports o ...@@ -73,7 +75,7 @@ followed by any global declarations, then a blank newline prior to any imports o
```javascript ```javascript
// bad // bad
/* globals Flash, Cookies, jQuery */ /* globals Flash, Cookies, jQuery */
// good // good
/* global Flash */ /* global Flash */
/* global Cookies */ /* global Cookies */
...@@ -85,7 +87,7 @@ followed by any global declarations, then a blank newline prior to any imports o ...@@ -85,7 +87,7 @@ followed by any global declarations, then a blank newline prior to any imports o
```javascript ```javascript
// bad // bad
fn(p1, p2, p3, p4) {} fn(p1, p2, p3, p4) {}
// good // good
fn(options) {} fn(options) {}
``` ```
...@@ -191,28 +193,28 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod ...@@ -191,28 +193,28 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
```javascript ```javascript
// bad // bad
const values = {foo: 1}; const values = {foo: 1};
function impureFunction(items) { function impureFunction(items) {
const bar = 1; const bar = 1;
items.foo = items.a * bar + 2; items.foo = items.a * bar + 2;
return items.a; return items.a;
} }
const c = impureFunction(values); const c = impureFunction(values);
// good // good
var values = {foo: 1}; var values = {foo: 1};
function pureFunction (foo) { function pureFunction (foo) {
var bar = 1; var bar = 1;
foo = foo * bar + 2; foo = foo * bar + 2;
return foo; return foo;
} }
var c = pureFunction(values.foo); var c = pureFunction(values.foo);
``` ```
...@@ -231,10 +233,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod ...@@ -231,10 +233,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
document.addEventListener('click', this.handleCallback) document.addEventListener('click', this.handleCallback)
}, },
handleCallback() { handleCallback() {
} }
} }
// Good // Good
export class Foo { export class Foo {
constructor() { constructor() {
...@@ -253,12 +255,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod ...@@ -253,12 +255,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
```javascript ```javascript
const users = [ { name: 'Foo' }, { name: 'Bar' } ]; const users = [ { name: 'Foo' }, { name: 'Bar' } ];
// bad // bad
users.forEach((user, index) => { users.forEach((user, index) => {
user.id = index; user.id = index;
}); });
// good // good
const usersWithId = users.map((user, index) => { const usersWithId = users.map((user, index) => {
return Object.assign({}, user, { id: index }); return Object.assign({}, user, { id: index });
...@@ -272,10 +274,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod ...@@ -272,10 +274,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
```javascript ```javascript
// bad // bad
+'10' // 10 +'10' // 10
// good // good
Number('10') // 10 Number('10') // 10
// better // better
parseInt('10', 10); parseInt('10', 10);
``` ```
...@@ -289,7 +291,7 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod ...@@ -289,7 +291,7 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
<button class="add-user"> <button class="add-user">
Add User Add User
</button> </button>
// good // good
<button class="js-add-user"> <button class="js-add-user">
Add User Add User
...@@ -299,10 +301,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod ...@@ -299,10 +301,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
### Vue.js ### Vue.js
#### `eslint-vue-plugin` #### `eslint-vue-plugin`
We default to [eslint-vue-plugin][eslint-plugin-vue], with the `plugin:vue/recommended`. We default to [eslint-vue-plugin][eslint-plugin-vue], with the `plugin:vue/recommended`.
Please check this [rules][eslint-plugin-vue-rules] for more documentation. Please check this [rules][eslint-plugin-vue-rules] for more documentation.
#### Basic Rules #### Basic Rules
1. The service has it's own file 1. The service has it's own file
1. The store has it's own file 1. The store has it's own file
1. Use a function in the bundle file to instantiate the Vue component: 1. Use a function in the bundle file to instantiate the Vue component:
...@@ -314,7 +318,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -314,7 +318,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
new Component({}) new Component({})
} }
} }
// good // good
document.addEventListener('DOMContentLoaded', () => new Vue({ document.addEventListener('DOMContentLoaded', () => new Vue({
el: '#element', el: '#element',
...@@ -336,7 +340,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -336,7 +340,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
} }
} }
} }
// good // good
class Store { class Store {
constructor() { constructor() {
...@@ -354,14 +358,14 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -354,14 +358,14 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
```javascript ```javascript
// bad // bad
import cardBoard from 'cardBoard.vue' import cardBoard from 'cardBoard.vue'
components: { components: {
cardBoard, cardBoard,
}; };
// good // good
import CardBoard from 'cardBoard.vue' import CardBoard from 'cardBoard.vue'
components: { components: {
CardBoard, CardBoard,
}; };
...@@ -373,13 +377,13 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -373,13 +377,13 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
```javascript ```javascript
// bad // bad
<component class="btn"> <component class="btn">
// good // good
<component css-class="btn"> <component css-class="btn">
// bad // bad
<component myProp="prop" /> <component myProp="prop" />
// good // good
<component my-prop="prop" /> <component my-prop="prop" />
``` ```
...@@ -387,6 +391,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -387,6 +391,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
[#34371]: https://gitlab.com/gitlab-org/gitlab-ce/issues/34371 [#34371]: https://gitlab.com/gitlab-org/gitlab-ce/issues/34371
#### 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:
...@@ -395,31 +400,31 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -395,31 +400,31 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
// 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"
/> />
// bad // bad
<component <component
bar="bar" /> bar="bar" />
...@@ -434,7 +439,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -434,7 +439,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
template: ` template: `
<button :class='style'>Button</button> <button :class='style'>Button</button>
` `
// good // good
template: ` template: `
<button :class="style">Button</button> <button :class="style">Button</button>
...@@ -447,7 +452,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -447,7 +452,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
```javascript ```javascript
// bad // bad
props: ['foo'] props: ['foo']
// good // good
props: { props: {
foo: { foo: {
...@@ -467,7 +472,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ...@@ -467,7 +472,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
type: String, type: String,
} }
} }
// good // good
props: { props: {
foo: { foo: {
...@@ -490,7 +495,7 @@ On those a default key should not be provided. ...@@ -490,7 +495,7 @@ On those a default key should not be provided.
required: false, required: false,
} }
} }
// good // good
props: { props: {
foo: { foo: {
...@@ -499,7 +504,7 @@ On those a default key should not be provided. ...@@ -499,7 +504,7 @@ On those a default key should not be provided.
default: 'bar' default: 'bar'
} }
} }
// good // good
props: { props: {
foo: { foo: {
...@@ -534,7 +539,7 @@ On those a default key should not be provided. ...@@ -534,7 +539,7 @@ On those a default key should not be provided.
```javascript ```javascript
// bad // bad
<component v-on:click="eventHandler"/> <component v-on:click="eventHandler"/>
// good // good
<component @click="eventHandler"/> <component @click="eventHandler"/>
``` ```
...@@ -544,7 +549,7 @@ On those a default key should not be provided. ...@@ -544,7 +549,7 @@ On those a default key should not be provided.
```javascript ```javascript
// bad // bad
<component v-bind:class="btn"/> <component v-bind:class="btn"/>
// good // good
<component :class="btsn"/> <component :class="btsn"/>
``` ```
...@@ -556,7 +561,7 @@ On those a default key should not be provided. ...@@ -556,7 +561,7 @@ On those a default key should not be provided.
```javascript ```javascript
// bad // bad
<component></component> <component></component>
// good // good
<component /> <component />
``` ```
...@@ -650,7 +655,7 @@ Useful links: ...@@ -650,7 +655,7 @@ Useful links:
title="Some tooltip text"> title="Some tooltip text">
Text Text
</span> </span>
// good // good
<span <span
v-tooltip v-tooltip
...@@ -666,10 +671,10 @@ Useful links: ...@@ -666,10 +671,10 @@ Useful links:
```javascript ```javascript
// bad // bad
<span data-original-title="tooltip text">Foo</span> <span data-original-title="tooltip text">Foo</span>
// good // good
<span title="tooltip text">Foo</span> <span title="tooltip text">Foo</span>
$('span').tooltip('_fixTitle'); $('span').tooltip('_fixTitle');
``` ```
......
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