如何发布你的eslint校验规则

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

一、项目初始化

1.创建文件夹

名称尽量为eslint-config-*

$ mkdir eslint-config-novice && cd eslint-config-novice

2.初始化项目

自定义项目的配置

$ npm init

3.推荐目录结构

$ npm i -D eslint
$ eslint --init

并新增index.js，lib文件夹，test文件夹

生成以下目录结构

|-- eslint-config-novice

|-- .eslintrc.js // 配置测试文件的校验 推荐写为 module.exports = {extends: './index.js'};

|-- index.js // 项目入口 从./lib/legacy.js中引入规则

|-- package-lock.json

|-- package.json

|-- lib // 具体规则存放处

| |-- .legacy.js // 配置需要引入的规则

| |-- rules // 将一个个具体规则存放在该目录下

|-- test // 测试文件存放在该目录下,可使用Mocha编写单元测试用例

参考: eslint-config-egg: github.com/eggjs/eslin…

         eslint-config-vi: github.com/vicompany/e…

4.编写校验规则

编写rules规则在index.js中如图

5.校验规则解释：

字段	描述	例
root	停止在父级目录中寻找 .eslintrc.*	package.json 文件里的 eslintConfig,	root:true
parserOptions	解析器选项。帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false	parserOptions:{ecmaVersion: 2018}( 支持 ES2018 规范)
env	指定脚本的运行环境。每种环境都有一组特定的预定义全局变量	env:{broswer:true}（浏览器全局变量）
globals	当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了	globals:{"Promise": "off"}（可以使用字符串 "off" 禁用全局变量。例如，在大多数 ES2015 全局变量可用但 Promise 不可用的环境中，你可以使用该配置）
extends	一个配置文件可以从基础配置中继承已启用的规则，每个配置继承它前面的配置,可省略配置名中的 eslint-config- 前缀	extends:['egg']
rules	启用的规则及其各自的错误级别。(最重要的配置，具体见下)	rules:[{"dot-location": [2, "property"] }] (强制在点号之前和之后一致的换行)
overrides	可以在配置的 overrides 部分为已命名的代码块指定附加配置	overrides: [{files:['*.js'],rules:{'@typescript-eslint/no-var-requires':'off'}}对js文件关闭ts中的无var校验
plugin	ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。插件名称可以省略 eslint-plugin- 前缀。	plugins: [ "plugin1", "eslint-plugin-plugin2" ]
parser	ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器	parser: '@typescript-eslint/parser'(将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。)

rules校验规则编写

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

二、上传校验规则到npm仓库

1.注册账号

https://www.npmjs.com/signup

2.切换npm源并确认node版本

若已安装nrm可使用nrm切换npm源

$ nrm use npm

若未安装则使用

$ npm set registry https://registry.npmjs.org

确定node版本>=14.18.0，可用nvm切换node版本

$ nvm use 14.18.0

3.登录npm账号

$ npm login

按提示输入账号密码及邮箱

4.发布npm包

$ npm publish

5.查看包是否发布成功

登录www.npmjs.com/搜索自己发布的包名

如图所示即为成功

三、在项目中导入eslint校验规则

1.下载npm包

$ npm i -D eslint-config-novice
$ npm i -D eslint
$ eslint --init

2.在eslintrc.js中使用校验规则

如图

3.测试校验是否生效

$ yarn lint

若出现信息则校验规则导入成功

四、在VSCODE中使用

1.安装eslint插件

2.配置setting.json

使用F1,并搜索setting.json进入设置文件

添加配置：

   "eslint.options": {
        "extensions": [
            ".ts",
            ".tsx",
            ".jsx",
            ".js",
            ".vue",
       ]
   },
    "eslint.validate": [
        "typescript",
        "typescriptreact",
        "javascript",
        "javascriptreact",
   ],
    "eslint.run": "onSave",

即可保存代码后自动格式化