代码规范

使用ESLint

    安装
    yarn  add eslint -D
    初始化配置
    ./node_modules/.bin/eslint --init
    选择配置 主流都使用standard规范（Airbnb更严格繁琐，如要代码尾部加; 对象末尾属值性要加,）
    ✔ How would you like to use ESLint? · style
    ✔ What type of modules does your project use? · esm
    ✔ Which framework does your project use? · vue
    ✔ Does your project use TypeScript? · No / Yes
    ✔ Where does your code run? · browser
    ✔ How would you like to define a style for your project? · guide
    ✔ Which style guide do you want to follow? · standard
    ✔ What format do you want your config file to be in? · JavaScript

集成Prettier

ESLint 主要解决了两类问题，但其实 ESLint 主要解决的是代码质量问题。另外一类代码风格问题其实并没有完全做完。 代码质量规则

• (code-quality rules)
• no-unused-vars
• no-extra-bind
• no-implicit-globals
• prefer-promise-reject-errors

代码风格规则

• (code-formatting rules)
• max-len
• no-mixed-spaces-and-tabs
• keyword-spacing
• ...

代码质量出问题意味着程序有潜在Bug，而风格问题决定是否利于阅读。

Prettier主要解决的就是代码风格问题

• 依赖安装

    yarn add prettier -D

    yarn add eslint-plugin-prettier -D //集成eslint的插件

    yarn add eslint-config-prettier -D //用于关闭所有不必要的规则，或可能与Prettier冲突的规则

eslint-config-prettier覆盖集成时与eslint冲突的规则

{
  "extends": [
    "some-other-config-you-use",
    "prettier"//必须最后，做覆盖操作
  ]
}

plugins中引入eslint-plugin-prettier的配置

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error" //开启报错提示
  }
}

使用StyleLint

安装标准配置

安装命令

    yarn add stylelint -D

    yarn add stylelint-config-standard -D

.stylelintrc对应配置

{
  'extends': "stylelint-config-standard"
}

安装属性顺序检查插件

安装命令

    yarn add stylelint-order -D

    yarn add stylelint-config-rational-order -D

.stylelintrc对应配置

{ 
  "extends"：[ 
    “ stylelint-config-rational-order” 
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-config-rational-order/plugin"
  ],
  "rules": {
    //默认配置
    "order/properties-order": [],
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": false,
        "empty-line-between-groups": true
      }
    ],
    // 解决与plugin/rational-order中"empty-line-between-groups": true与基础配置的冲突
    "declaration-empty-line-before": [
      "never",
      {
        ignore:["after-declaration"]
      }
    ],
  }
}

stylelint集成scss

安装命令

    yarn add stylelint-scss -D
    yarn add stylelint-config-sass-guidelines -D

.stylelintrc对应配置

  {
    "extends":[ 
      "stylelint-config-sass-guidelines"
    ],
    "plugins": [
      "stylelint-scss"
    ],
    rules: [
      // 解决stylelint-order插件与stylelint-config-sass-guidelines冲突
      "order/properties-alphabetical-order":null
    ]
  }

更多插件