Ember代码风格指南 #

// .prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  tabWidth: 2,
};

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:ember/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'ember/no-jquery': 'error',
    'ember/no-mixins': 'error',
    'ember/no-classic-classes': 'error',
  },
};

// 好的做法
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class UserCardComponent extends Component {
  @tracked isExpanded = false;

  @action
  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

{{! 好的做法 - Angle Bracket语法}}
<UserCard @user={{@user}} />

{{! 好的做法 - 使用data-test属性}}
<button data-test-submit type="submit">提交</button>

{{! 避免 - 内联事件处理}}
<button {{on "click" (fn this.delete item)}}>删除</button>

// 好的做法
const userList = [];
const isActive = true;
const userCount = 10;

// 避免
const ul = [];
const flag = true;
const n = 10;

// 好的做法 - 动词开头
function fetchUser() {}
function calculateTotal() {}
function validateForm() {}

// 布尔值返回
function isValid() {}
function hasPermission() {}
function canEdit() {}