Eslint 檢查 javascript

https://cn.eslint.org/docs/rules/

Stylelint 檢查 css

https://www.npmjs.com/package/stylelint-config-standard

命名

• JS 小駝峰

  studentInformation
  

• 避免重複

  const Car = {
    make: "Honda",
    model: "Accord",
    color: "White"
  }
  

• CSS—BEM

  .block__element{} 
  .block--modifier{}
  

• 語義化

  can ⇒ 判斷可否執行

  has ⇒ 判斷有或無

  is ⇒ 判斷是或否

  get ⇒ 獲得

  set ⇒ 設定

• 物件寫法

  const menuConfig ={
  	title: 'Order',
  	buttonText: 'Send',
  	cancellable: true
  }
  
  function createMenu (config) {
  	config = Object.assign (
  		{
  			title: 'Foo',
  			body: 'Bar',
  			buttonText: 'Baz',
  			cancellable: true
  		},
  		config
  	)
  }
  
  createMenu (menuConfig)
  

• 物件的屬性保存為局部變數

  避免多次查詢帶來性能消耗

  let person = {
  	info: {
  		sex: '男'
  	}
  }
  
  function getMaleSex () {
  	let sex = person.info.sex
  	if (sex === '男') {
  		console.log(sex)
  	}
  }
  

• 函數參數

  參數越少越好，超過兩個以上，使用解構來寫

  function createMenu ({ title, body, buttonText, cancellable }) {}
  
  createMenu ({
  	title: 'Foo',
  	body: 'Bar',
  	buttonText: 'Baz',
  	cancellable: true
  })
  

• 使用默認值

  替代條件語法

  function createCompany( name = 'Handa' ) {}
  

• 累加

  const programmerOutput = [
    {
      name: 'Uncle Bobby',
      linesOfCode: 500
    }, {
      name: 'Suzie Q',
      linesOfCode: 1500
    }, {
      name: 'Jimmy Gosling',
      linesOfCode: 150
    }, {
      name: 'Gracie Hopper',
      linesOfCode: 1000
    }
  ];
  let totalOutput = programmerOutput
    .map(output => output.linesOfCode)
    .reduce((totalLines, lines) => totalLines + lines, 0)
  

• 用 class 代替條件

  class Airplane {
    // ...
  }
  
  class Boeing777 extends Airplane {
    // ...
    getCruisingAltitude() {
      return this.getMaxAltitude() - this.getPassengerCount();
    }
  }
  
  class AirForceOne extends Airplane {
    // ...
    getCruisingAltitude() {
      return this.getMaxAltitude();
    }
  }
  
  class Cessna extends Airplane {
    // ...
    getCruisingAltitude() {
      return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
  

SCSS 寫法

• 變數

  $--color-success: "#67C23A";
  $--color-warning: "#E6A23C";
  $--color-danger: "#F56C6C";
  $--color-info: "#909399";
  

• 用 & 實現 BEM 命名規範

• @mixin 使用

  @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    border-radius: $border-radius;
    &.is-round {
      padding: $padding-vertical $padding-horizontal;
    }
  }
  
    @include m(medium) {
      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);   
    }
  
    @include m(small) {
      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
    }