@render-ae86/ae86-lint

ae86-lint

介绍

ae86-lint是用于项目代码校验而封装的各种校验工具集，其内部集成了大量经过实践而设置的代码校验规则。

无需繁琐配置，各种校验工具开箱即用，减少了繁杂的配置，提升了项目工程成型的时间。

用法

安装ae86-lint

npm i @render-ae86/ae86-lint -D

安装ae86-lint后，无须在单独安装eslint、stylelint、prettier、husky等工具，直接开箱即用。

使用ae86-lint

ae86-lint目前支持eslint、stylelint、prettier、commitlint，共四种类型lint tool。

init命令

安装@render-ae86/ae86-lint后，终端可以使用如下命令，自动生成各种规则校验。

npx ae86-lint init

eject命令

使用eject命令，可以暴露出各种校验工具的具体配置，如果想看看具体的配置，你可以使用它

npx ae86-lint eject

配置文件

ae86-lint支持js和json两种文件类型的配置文件

.ae86-lint.js配置文件

module.exports = {
    // 使用哪些校验工具
    eslint: {
        // 使用什么类型的校验规范: common | react | ts | .....
        lintType: 'common'
    },
    commitlint: {
        lintType: 'common'
    },
    prettier: {
        lintType: 'common'
    },
    stylelint: {
        lintType: 'common'
    },
}

.ae86-lint.json配置文件

{
    "eslint": {
        "lintType": "common"
    },
    "commitlint": {
        "lintType": "common"
    },
    "prettier": {
        "lintType": "common"
    },
    "stylelint": {
        "lintType": "common"
    }
}

ae86-lint脚手架会根据配置文件中的配置实现按需配置，如下配置就只会生成eslint相关的配置

{
    "eslint": {
        "lintType": "common"
    }
   
}

可以根据自己项目的实际情况，使用不同配置。

使用ae86-lint init命令后，根据配置文件会生成不同的校验工具的配置文件，使用的校验规则是根据ae86-lint配置文件中配置的lintType来决定的。

eslint配置文件

会在项目根目录下新增.eslintrc.js文件：

const { getESLintConfig } = require('ae86-lint');

module.exports = getESLintConfig('common', {
    // 自定义规则，优先级大于ae86-lint中内部的规则
});

目前getESLintConfig支持common-ts、common、react-ts、react四种规则集的获取。

stylelint配置文件

会在项目根目录下新增.stylelintrc.js文件：

const { getStylelintConfig } = require('ae86-lint');

module.exports = getStylelintConfig('react', {
    // 自定义规则，优先级大于ae86-lint中内部的规则
});

目前getStylelintConfig支持common、react两种规则集的获取。

prettier配置文件

会在项目根目录下新增.prettierrc.js文件：

const {getPrettierConfig}  = require("ae86-lint")

module.exports = getPrettierConfig('react', {
    // 自定义规则，优先级大于ae86-lint中内部的规则
});

目前getPrettierConfig支持common、react两种规则集的获取。

commlint配置文件

会在项目根目录下新增commitlint.config.js文件，添加如下代码：

const {getCommitlintConfig} = require("ae86-lint");

module.exports = getCommitlintConfig('react', {
    // 自定义规则，优先级大于ae86-lint中内部的规则
})

目前getCommitlintConfig支持common、react两种规则集的获取。

新增package.json配置

ae86-lint会修改package.json中的相关配置，来完成一些lintflow。其中scripts和lint-staged中的配置，根据ae86-lint配置文件中的配置不同，会有不同的展现。 下面是配置使用所有校验工具后得到的一个修改展现

{
    "scripts": {
        "eslint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
        "stylelint:fix": "stylelint --fix src**/*.{css,scss,less}",
        "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
        "ae86:lint:fix": "npm run eslint:fix && npm run stylelint:fix && npm run prettier:fix"
    },
     "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx}": "eslint",
        "src/**/*.{css,scss,less}": "stylelint",
        "src/**/*{.js,.jsx,.ts,.tsx}": "prettier --check"
    }
}

scripts中的配置只是ae86-lint中的默认配置，开发中可以根据实际情况进行修改。

新增.husky文件

ae86-lint为了实现基本的lintflow，使用了husky来执行配置的各种HOOK。

1. .husky/commit-msg 该文件用于校验git commit的提交信息（ae86-lint配置文件中配置 commitlint 后才会生成）
2. .husky/pre-commit 该文件用于检查git staged区中的文件，进行相应的规则校验（ae86-lint配置文件中配置 eslint | stylelint | prettier 后才会生成）

内部配置查看

通过以下链接可以查看ae86-lint中集成的各种校验工具的默认配置

1. ae86-lint中eslint的默认配置
2. ae86-lint中stylelint的默认配置
3. ae86-lint中commlint的默认配置
4. ae86-lint中prettier的默认配置

说明

ae86-lint没有做任何代码使用和配置脚本上的限制，它仅仅只是一个校验工具集合而已。通过get***Config函数中，添加自定义配置对象，就可以对ae86-lint中的配置进行修改。

配置对象的配置规则参考eslint、stylelint、prettier、commitlint配置。