Skip to main content

代码规范校验

tsconfig​

eslint​

.eslintrc.js
module.exports = {
    globals: {
        window: true
    }
};

prettier​

安装​

yarn add prettier -D

usage demo​

.prettierrc
{
    "printWidth": 140,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "none"
}

lint-staged​

安装​

yarn add lint-staged --D

usage​

  1. 添加lint-staged配置 在package.json中添加lint-staged配置
package.json
"lint-staged": {
  "*.js": "eslint",
  "*.css": "stylelint",
   "**/*.{md,json,js,jsx,tsx,ts,css,less,scss}": [
            "prettier --write"
        ]
}

or

创建.lintstagedrc文件,并添加配置

.lintstagedrc
{
    "*.js": "eslint --fix",
    "*.css": "stylelint --fix"
}
  1. 在 pre-commit 中运行lint-staged
{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    }
}

husky​

husky 是一个 git hooks 框架，用法很简单。

示例​

{
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint",
            "pre-push": "npm test"
        },
        "skipCI": true,
        "ignoreNodeModules": true,
        "gitParams": "--no-verify"
    }
}

Q & A​

eslint vs prettier​

检查方式：ESLint 能够检查代码中的潜在问题，而 Prettier 只能格式化代码。 检查内容：ESLint 主要关注代码质量、风格和最佳实践等，而 Prettier 只关注代码的外观。 检查规则：ESLint 提供了大量的检查规则来检查代码，而 Prettier 则没有类似的规则集合。 操作方式：ESLint 需要手动运行或与编辑器集成，而 Prettier 通常是自动化运行的。

eslint vs lint-staged​

一般来说，我们会在 lint-staged 中配置 eslint 来检查我们的项目文件，比如 js, css 等文件。 但 lint-staged 是 git 的一个钩子，会检查变更（也就是 staged）的代码。