好，還要更好

在小公司單打獨鬥約 5 年後，阿宅 PO 走跳到一間中型公司就職
也第一次與其他前端一起共同協作專案

在這裡學習到在 Team work 重要的除了溝通和分工之外
更重要的是 Codeing 格式與規範
這真的～真的～真的～很重要！！ (加強語氣)

因為當團隊大家在共同開發的時候，沒有一定的格式與縮排

A 喜歡用 Tab 做縮排 
B 喜歡用空白鍵做縮排
C 開發喜歡縮 2 格
D 喜歡縮 4 格

開發中各種解衝突～格式混亂...
真的是天大的災難啊啊啊啊～～～（炸裂）

這時候 Linter 就是會是你的救世主
JavaScript 有 ESLint
TypeScript 有 TSLint
其實 CSS / SCSS 樣式也是有 Linter 可以做管理的唷～
以下阿宅 PO 就挑最多人使用的 Stylelint 來做介紹

Stylelint

安裝流程

1. 安裝 stylelint npm install stylelint -D
2. 安裝 CSS 配置 npm install stylelint-config-standard -D
3. 安裝 SCSS 配置 npm install stylelint-config-sass-guidelines stylelint-scss -D
4. 安裝其他配置 可以參考 Stylelint 官方 Github

stylelint-config-standard 是stylelint的推薦配置

建立 .stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ],
  "plugins": [
    "stylelint-scss",
    "stylelint-order"
  ],
  "rules": {
    "max-nesting-depth": 3,
    "number-leading-zero": "never",
    "number-no-trailing-zeros": true,
    "block-no-empty": true,
    "block-opening-brace-space-before": "always",
    "color-named": "never",
    "dollar-variable-colon-space-before": "never",
    "dollar-variable-colon-space-after": "always-single-line",
    "declaration-bang-space-before": "always",
    "declaration-bang-space-after": "never",
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "declaration-block-semicolon-space-before": "never",
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "at-import-no-partial-leading-underscore": true,
    "property-no-vendor-prefix": true,
    "selector-no-redundant-nesting-selector": true,
    "function-comma-space-after": "always",
    "function-parentheses-space-inside": "never"
  }
}

在 Package.json 加入指令

{
 "scripts": {
    "lint": "stylelint app/scss/**/*.scss --syntax scss",
    "lint:fix": "stylelint app/scss/**/*.scss --syntax scss --fix"
  }
}

Reference

stylelint 官網
How to lint SCSS with stylelint