阅读 1146

Eslint + Prettier + stylelint + Husky + Lint-staged 规范你的工程代码规范

Eslint + Prettier + stylelint + Husky + Lint-staged

完成它, 你的工程将会有一个统一风格的格式化标准,并且不需要人为的关注是否有问题,在git commit 命令时,也会自动去格式化代码再提交。所以无需关心团队编码工具是否一致。

Reference Link:

  1. eslint-config-prettier
  2. stylelint

Prepare your environment

Install package that you need

简单方法将以下内容copy到你的文件中,然后执行yarn or npm install

// package.json
"devDependencies": {
    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "husky": "^7.0.2",
    "lint-staged": "^11.2.3",
    "prettier": "^2.4.1",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-order": "^4.1.0"
}
复制代码

Stylelint

stylelint-order

该插件的作用是强制你按照某个顺序编写 css。例如先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性。这样可以极大的保证我们代码的可读性。

stylelint-config-standard

作用:配置 Stylelint 规则。 官方的代码风格 :stylelint-config-standard。该风格是 Stylelint 的维护者汲取了 GitHub、Google、Airbnb 多家之长生成的。

stylelint-config-recess-order

stylelint-order 插件的第三方配置

// .stylelintrc
{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "plugins": ["stylelint-order"],
  "rules": {
    "indentation": 4,
    "no-descending-specificity": null
  }
}
复制代码

Eslint config

eslint-config-prettier

用来覆盖和eslint冲突的不重要的规则,保证prettier的格式化不会被报错

eslint-plugin-prettier

prettier 格式化规则插件,默认会调用.prettierrc文件

prettier

prettier 格式化插件

// .eslintrc
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    // "no-confusing-arrow": "off",
    // "no-mixed-operators": ["error", { "allowSamePrecedence": true }],
    // "arrow-parens": [2, "as-needed", { "requireForBlockBody": false }]
  }
}
​
复制代码

Husky + Lint-staged

  1. Run install command

    npm set-script prepare "husky install"
    npm run prepare
    复制代码
  2. Run git hooks command

    npx husky add .husky/pre-commit "npx lint-staged"
    复制代码
  3. Define lint-staged file

    // .lintstagedrc
    {
      "**/*.{js,jsx}": [
        "prettier --config .prettierrc --write",
        "eslint --fix"
      ],
      "**/*.less": [
        "stylelint --fix"
      ]
    }
    复制代码

Vscode plugin

You can install some plugin eslint stylelint prettier to free your using. then I will provide the settings.

eslint

提供eslint的校验,保存自动修复功能

stylelint

提供样式文件的校验,保存自动修复的功能

prettier

提供prettier 保存自动格式化的功能

// .vscode -> settings.json
{
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.codeAction.disableRuleComment": {
    "enable": true
  },
  "eslint.validate": ["javascript", "javascriptreact"],
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.run": "onSave",
​
  "editor.defaultFormatter": null,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}
复制代码

Tips

.eslintrcplugin:prettier/recommended 的实际含义:

// .eslintrc
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
复制代码

\

文章分类
前端
文章标签