Стильные руководства и проверка кода

См. соответствующие стильные руководства для наших руководств и информации о проверке кода:

JavaScript

Мы следуем Airbnb по большинству стилевых конвенциям и применяем их с помощью eslint.

См. наш текущий .eslintrc для конкретных правил и шаблонов.

Общие

ESLint

Никогда не отключайте правила ESLint, если у вас нет веской причины.
Вы можете увидеть много старых файлов с /* eslint-disable some-rule, some-other-rule */ в начале, но старые файлы являются исключением. В любое время, когда вы разрабатываете новую функцию или переопределяете существующую, вы должны соблюдать правила ESLint.
Никогда, никогда, никогда не отключайте ESLint глобально для файла

  // плохой
  /* eslint-disable */

  // лучше
  /* eslint-disable some-rule, some-other-rule */

  // лучшее
  // ничего :)

Если вам нужно отключить правило для одного нарушения, постарайтесь сделать это как можно локальнее

  // плохой
  /* eslint-disable no-new */

  import Foo from 'foo';

  new Foo();

  // лучше
  import Foo from 'foo';

  // eslint-disable-next-line no-new
  new Foo();

Есть несколько правил, которые нам нужно отключить из-за технической задолженности. Это:
no-new
class-methods-use-this1. Когда они необходимы, всегда размещайте блоки комментариев директив ESLint на первой строке скрипта, после чего следует любые глобальные объявления, затем пустая строка перед любыми импортами или кодом.

  // плохой
  /* global Foo */
  /* eslint-disable no-new */
  import Bar from './bar';
```    // лучше
  /* eslint-disable no-new */
  /* global Foo */

  import Bar from './bar';

Никогда не отключайте правило no-undef. Объявляйте глобальные переменные с /* global Foo */ вместо этого.
При объявлении нескольких глобальных переменных всегда используйте одну строку /* global [name] */ на каждую переменную.

  // плохой
  /* globals Flash, Cookies, jQuery */

  // лучше
  /* global Flash */
  /* global Cookies */
  /* global jQuery */

Используйте до 3 параметров для функции или класса. Если вам нужно больше, принимайте объект вместо этого.

  // плохой
  fn(p1, p2, p3, p4) {}

  // лучше
  fn(options) {}

Модули, импорты и экспорты

Используйте синтаксис ES модуля для импорта модулей

  // плохое
  require('foo');    // хорошее
  import Foo from 'foo';

  // плохое
  module.exports = Foo;

  // хорошее
  export default Foo;

Относительные пути: Если вы не пишете тест, всегда используйте относительные пути вместо ~

В app/assets/javascripts:

  // плохое
  import Foo from '~/foo'

  // хорошее
  import Foo from '../foo';

В spec/javascripts:

  // плохое
  import Foo from '../../app/assets/javascripts/foo'

  // хорошее
  import Foo from '~/foo';

Избегайте использования IIFE. Несмотря на то, что у нас есть много примеров файлов, которые обернут свои содержимые в IIFE (immediately-invoked function expressions), это больше не требуется после перехода от Sprockets к webpack. Не используйте их и не стесняйтесь удалять при рефакторинге старого кода.1. Избегайте добавления к глобальному пространству имен.

  // плохое
  window.MyClass = class { /* ... */ };

  // хорошее
  export default class MyClass { /* ... */ }

В скриптах, содержащих экспорт, запрещены побочные эффекты

  // плохое
  export default class MyClass { /* ... */ }

  document.addEventListener("DOMContentLoaded", function(event) {
    new MyClass();
  });

Мутация данных и чистые функции

Стремитесь писать много маленьких чистых функций, и минимизировать места, где происходит мутация.

  // плохое
  const values = {foo: 1};

  function impureFunction(items) {
    const bar = 1;

    items.foo = items.a * bar + 2;

    return items.a;
  }

  const c = impureFunction(values);

  // хорошее
  var values = {foo: 1};

  function pureFunction(foo) {
    var bar = 1;

    foo = foo * bar + 2;

    return foo;
  }

  var c = pureFunction(values.foo);

Избегайте конструкторов с побочными эффектами
Предпочитайте .map, .reduce или .filter вместо .forEach Метод forEach вызывает побочные эффекты, он изменяет массив, который итерируется. Предпочтительнее использовать .map, .reduce или .filter

  const users = [ { name: 'Foo' }, { name: 'Bar' } ];

  // плохое
  users.forEach((user, index) => {
    user.id = index;
  });

  // хорошее
  const usersWithId = users.map((user, index) => {
    return Object.assign({}, user, { id: index });
  });

Парсинг строк в числа

parseInt() предпочтительнее Number() или +

  // плохое
  +'10' // 10

  // хороший
  Number('10') // 10

  // лучше
  parseInt('10', 10);
```#### CSS классы, используемые для JavaScript
1. Если класс используется в JavaScript, его следует дополнить префиксом `js-`
```html
  <!-- плохой -->
  <button class="add-user">
    Добавить пользователя
  </button>```    // хороший
  <button class="js-add-user">
    Добавить пользователя
  </button>

Vue.js

Основные правила

Услуга имеет свой собственный файл.
Хранилище имеет свой собственный файл.
Используйте функцию в файле сборки для инициализации Vue-компонента:

  // плохой
  class {
    init() {
      new Component({})
    }
  }

  // хороший
  document.addEventListener('DOMContentLoaded', () => new Vue({
    el: '#element',
    components: {
      componentName
    },
    render: createElement => createElement('component-name'),
  }));

Не используйте синглтон для услуги или хранилища.

  // плохой
  class Store {
    constructor() {
      if (!this.prototype.singleton) {
        // делайте что-то
      }
    }
  }

  // хороший
  class Store {
    constructor() {
      // делайте что-то
    }
  }

Именование

Расширения: Используйте расширение .vue для Vue-компонентов.
Именование ссылок: Используйте camelCase для их экземпляров:

  // хороший
  import cardBoard from 'cardBoard'

  components: {
    cardBoard:
  };

Именование props: Избегайте использования имен props DOM-компонентов.
Именование props: Используйте kebab-case вместо camelCase для передачи props в шаблонах.

  // плохой
  <component class="btn">

  // хороший
  <component css-class="btn">

  // плохой
  <component myProp="prop" />

  // хороший
  <component my-prop="prop" />

Выравнивание

Следуйте этим стилям выравнивания для метода шаблона:

  // плохой
  <component v-if="bar"
      param="baz" />
```    <button class="btn">Нажми меня</button>

  // хороший
  <component
    v-if="bar"
    param="baz"
  />

  <button class="btn">
    Нажми меня
  </button>

  // если props помещаются в одну строку, оставьте их на одной строке
  <component bar="bar" />
```#### Цитаты
1. В шаблонах всегда используйте двойные кавычки `"` и одинарные кавычки `'` для всех остальных JS.
```javascript
  // плохо
  template: `
    <button :class='style'>Button</button>
  `

  // хорошо
  template: `
    <button :class="style">Button</button>
  `

Пропсы

Пропсы должны объявляться в виде объекта

  // плохо
  props: ['foo']

  // хорошо
  props: {
    foo: {
      type: String,
      required: false,
      default: 'bar'
    }
  }

Ключ required всегда должен быть предоставлен при объявлении пропса

  // плохо
  props: {
    foo: {
      type: String,
    }
  }

  // хорошо
  props: {
    foo: {
      type: String,
      required: false,
      default: 'bar'
    }
  }

Ключ default всегда должен быть предоставлен, если пропс не является обязательным:

  // плохо
  props: {
    foo: {
      type: String,
      required: false,
    }
  }

  // хорошо
  props: {
    foo: {
      type: String,
      required: false,
      default: 'bar'
    }
  }

  // хорошо
  props: {
    foo: {
      type: String,
      required: true
    }
  }

Данные

Метод data всегда должен быть функцией

  // плохо
  data: {
    foo: 'foo'
  }

  // хорошо
  data() {
    return {
      foo: 'foo'
    };
  }

Директивы

Краткая форма @ предпочтительнее v-on

  // плохо
  <component v-on:click="eventHandler"/>
  ```    // хорошо
  <компонент @click="eventHandler"/>

Краткая форма : предпочтительнее v-bind

  // плохо
  <компонент v-bind:class="btn"/>


  // хорошо
  <компонент :class="btn"/>

Закрывающие теги

Предпочтительнее использовать самозакрывающиеся теги компонентов

  // плохо
  <компонент></компонент>

  // хорошо
  <компонент />

Порядок

Порядок для Vue компонента:
name
props
mixins
data
components
computedProps
methods
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

Vue и Bootstrap

Подсказки: Не полагайтесь на имя класса has-tooltip для Vue компонентов

  // плохо
  <span
    class="has-tooltip"
    title="Some tooltip text">
    Text
  </span>

  // хорошо
  <span
    v-tooltip
    title="Некоторый текст подсказки">
    Текст
  </span>

Подсказки: При использовании подсказки включите директиву подсказки, ./app/assets/javascripts/vue_shared/directives/tooltip.js
Не изменяйте data-original-title.

  // плохо
  <span data-original-title="текст подсказки">Foo</span>

  // хорошо
  <span title="текст подсказки">Foo</span>

  $('span').tooltip('fixTitle');

SCSS

SCSS

OSCHINA-MIRROR/panda26-gitlab

Стильные руководства и проверка кода

JavaScript

Общие

ESLint

Модули, импорты и экспорты

Мутация данных и чистые функции

Парсинг строк в числа

Vue.js

Основные правила

Именование

Выравнивание

Пропсы

Данные

Директивы

Закрывающие теги

Порядок

Vue и Bootstrap

SCSS

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/panda26-gitlab .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Стильные руководства и проверка кода

JavaScript

Общие

ESLint

Модули, импорты и экспорты

Мутация данных и чистые функции

Парсинг строк в числа

Vue.js

Основные правила

Именование

Выравнивание

Пропсы

Данные

Директивы

Закрывающие теги

Порядок

Vue и Bootstrap

SCSS

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/panda26-gitlab