eslint-config-nstarter

nstarter ESLint 规则

Usage no npm install needed!

<script type="module">
  import eslintConfigNstarter from 'https://cdn.skypack.dev/eslint-config-nstarter';
</script>

README

NStarter ESLint 规则

Build Status npm package npm downloads

NStarter ESLint 规则在腾讯 Alloy ESLint 规则基础上定制而来,用于规范化 nstarter 系列项目的代码编写规范。

规则列表

名称 包含规则 解析器
标准规则 ESLint 规则 @babel/eslint-parser
TypeScript ESLint 规则、@typescript-eslint @typescript-eslint/parser

设计理念

  • 传承 ESLint 的理念,帮助大家建立自己的规则
  • 高度的自动化:先进的规则管理,测试即文档即[网站][]

传承 [ESLint 的理念][],帮助大家建立自己的规则

大家还记得 ESLint 是怎么打败 JSHint 成为最受欢迎的 js 代码检查工具吗?就是因为 ESLint 推崇的插件化、配置化,满足了不同团队不同技术栈的个性的需求。

所以 eslint-config-nstarter 也传承了 ESLint 的设计理念,不会强调必须要使用我们这套规则,而是通过文档、示例、测试、网站等方便大家参考 nstarter 的规则,在此基础上做出自己的个性化。

高度的自动化:先进的规则管理,测试即文档即[网站][]

无情的推动自动化

eslint-config-nstarter 通过高度的自动化,将一切能自动化管理的过程都交给脚本处理,其中包括了:

  • 通过 GitHub Actions,自动每周检查 ESLint 及相关插件是否有新版本,新版本中是否有新规则需要我们添加
  • 自动检查我们的规则是否包含了 Prettier 的规则
  • 自动检查我们的规则是否包含了已废弃(deprecated)的规则

除此之外,通过自动化的脚本,我们甚至可以将成百上千个 ESLint 配置文件分而治之,每个规则在一个单独的目录下管理:

  • 通过脚本将单个的配置整合成最终的一个配置
  • 通过脚本将单个配置中的 description 和 reason 构建成文档[网站][],方便大家查看
  • 通过脚本将单个配置中的 bad.jsgood.js 输出到[网站][]中,甚至可以直接在[网站][]中看到 bad.js 的(真实运行 ESLint 脚本后的)报错信息

这样的好处是显而易见的,测试即文档即[网站][],我们可以只在一个地方维护规则和测试,其他工作都交给自动化脚本,极大的降低了维护的成本。简单来说,当我们有个新规则需要添加时,只需要写三个文件 test/index/another-rule/.eslintrc.js, test/index/another-rule/bad.js, test/index/another-rule/good.js 即可。

使用方法

标准规则

安装:

npm install --save-dev eslint eslint-config-nstarter

在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:

module.exports = {
    extends: [
        'nstarter',
    ],
    env: {
        // 这里填入你的项目用到的环境
        // 它们预定义了不同环境的全局变量,比如:
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true
    },
    globals: {
        // 这里填入你的项目需要的全局变量
        // false 表示这个全局变量不允许被重新赋值,比如:
        //
        // myGlobal: false
    },
    rules: {
        // 这里填入你的项目需要的个性化配置
    }
};

TypeScript

安装:

npm install --save-dev eslint typescript eslint-config-nstarter

在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:

module.exports = {
    extends: [
        'nstarter',
        'nstarter/typescript',
    ],
    env: {
        // 这里填入你的项目用到的环境
        // 它们预定义了不同环境的全局变量,比如:
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true
    },
    globals: {
        // 这里填入你的项目需要的全局变量
        // false 表示这个全局变量不允许被重新赋值,比如:
        //
        // myGlobal: false
    },
    rules: {
        // 这里填入你的项目需要的个性化配置
    }
};

Troubleshootings

在 VSCode 中使用

在 VSCode 中,默认 ESLint 并不能识别 .ts 文件,需要在「文件 => 首选项 => 设置」里做如下配置:

{
    "eslint.validate": [
        "javascript",
        "typescript"
    ]
}

VSCode 中的 autoFixOnSave 没有效果

如果需要针对 .ts 文件开启 ESLint 的 autoFix,则需要配置成:

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "typescript",
            "autoFix": true
        }
    ]
}

Testing

npm test

常用命令

# 安装依赖
npm install

# 构建 eslintrc 配置
npm run build

# 执行测试
npm test

# 自动修复格式错误
npm run prettier:fix

# 发布新版本
npm version <major|minor|patch>
git push --follow-tags
npm publish

参考