检查代码规范

命令

使用skr lint可以检查本地的项目源码规范。

参数

--changed                    仅检查在git中有变更的文件
--staged                     仅检查在git中有变更且已经通过git add的文件
--allow-unsafe-react-method  允许React组件中有UNSAFE_*的方法，用于版本过渡
--fix                        自动修复可以修复的编码问题
--auto-stage                 在修复问题后自动add已经git add且没有其它修改的文件
-h, --help                   显示帮助信息

在skr lint后还可以输入需要检查的路径，如果路径为文件夹则会进一步检查里面的所有文件。默认会检查.js、.jsx、.ts、.tsx、.less、.css的代码。

路径默认是src下的所有文件（带递归），以及当前目录下的文件（不带递归），即仅检查项目中开发者手写的代码。如果在src以外你还有其它的文件需要检查，则需要手动指定：

skr lint src demo *.js

自定义配置

skr lint实际上是对eslint与stylelint的一个封装，用它们分别检查不同类型的文件，再抹平错误信息的结构。在内部，使用了@ecomfe/eslint-config和@ecomfe/stylelint-config作为基础配置，额外增加了一些更严格的规则。

当然skr lint也尊重你在本地配置的规则，你可以使用本地的配置来指定额外的检查规则。

我们希望你将@reskript/config-lint提供的规则作为基础配置，在此基础上做局部的调整。

首先，你要安装配置的包：

npm install --save-dev @reskript/config-lint

随后按照下文来配置额外的规则。在项目中放置这些配置文件的另一个好处是可以与编辑器的插件友好整合，带来编码过程中的检查能力，所以我们非常推荐你生成这几个配置文件。

JavaScript代码检查

skr lint保持与其行为与eslint一致的行为，也就是说你可以在本地不同的目录下放置.eslintrc.*文件来自定义配置。

你的.eslintrc.js中应该是以下的内容：

require('@reskript/config-lint/patch');

module.exports = {
    extends: require.resolve('@reskript/config-lint/config/eslint'),
    rules: {
        // 其它规则的覆盖
    },
};

其中第一行用来解决ESLint无法从共享配置查找插件的问题。

样式代码检查

很遗憾地，因为种种原因，skr lint在样式文件的检查上仅支持当前目录（process.cwd()）下的stylelint.config.cjs这一个文件作为自定义配置，不支持任何子目录内的配置文件，也不支持诸如.stylelintrc.json之类的其它文件：

module.exports = {
    extends: require.resolve('@reskript/config-lint/config/stylelint'),
    rules: {
      // 其它规则的覆盖
    },
};

支持其它样式语言

reSKRipt内置了LESS的stylelint配置，你不会遇到缺失customSyntax的警告。但如果你使用SASS等其它语言，则需要做进一步的自定义配置。

以SASS为例，如果需要自定义配置，你可以安装postcss-sass包：

# NPM
npm i -D postcss-sass@latest
# Yarn
yarn add -D postcss-sass@latest
# PNPM
pnpm i -D postcss-sass@latest

随后在项目目录下新建stylelint.config.cjs文件，并填写以下内容：

const sassSyntax = require('postcss-sass');

module.exports = {
    extends: require.resolve('@reskript/config-lint/config/stylelint'),
    overrides: [
        {
            files: ['**/*.sass'],
            customSyntax: sassSyntax,
        },
    ],
};

stylelint.config.cjs为stylelint的标准配置文件，更详细的使用方式请参考StyleLint的文档。

提交前检查

我们推荐你通过husky在代码提交前做好编码规范的检查。首先安装之：

npm install --save-dev husky

随后执行以下命令增加钩子：

npx --no-install husky install \
  && npx --no-install husky add .husky/pre-commit "npx --no-install skr lint --staged --fix --auto-stage"

当然你也可以使用lint-staged来实现类似的能力，此时package.json中的配置大致是：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,less,css}": "skr lint"
  }
}

对应初始化钩子的命令是：

npx --no-install husky add .husky/pre-commit "npx --no-install lint-staged"