eslint-config、eslint-config的npm包的开发和使用

怎么制作 eslint 的 npm 包？

1. 新建 eslint-config-xxxx 文件夹

eslint 的 npm 包名必须以 eslint-config- 开头

2. 新建 eslint-config-xxxx/index.js 文件

  1. module.exports = {
  2.     env: {
  3.         browser: true,
  4.         es6: true,
  5.         commonjs: true,
  6.         node: true,
  7.     },
  8.     extends: 'eslint:recommended', // 多个可以用数组
  9.     parserOptions: {
  10.         ecmaVersion: 8,
  11.         sourceType: 'module',
  12.     },
  13.     rules: {
  14.         //http://eslint.cn/docs/rules/
  15.         //参数：0 关闭，1 警告，2 错误
  17.         //Possible Errors
  18.         'for-direction': 2, //保持 for 循环计数方向正确
  19.         'no-await-in-loop': 1, //禁止在循环中使用 await
  20.         'no-console': 0, //禁用 console
  21.         'no-extra-parens': 0, //禁止不必要的括号()
  23.         //Best Practices
  24.         'accessor-pairs': 2, //强制 getter 和 setter 在对象中成对出现
  25.         'array-callback-return': 0, //强制数组方法的回调函数中有 return 语句
  26.         'block-scoped-var': 2, //强制把变量的使用限制在其定义的作用域范围内
  27.         'class-methods-use-this': 0, //强制 class 中方法使用 this
  28.         complexity: [0, 20], //允许的最大环路复杂度
  29.         'default-case': 0, //要求 switch 语句中有 default 分支
  30.         'dot-location': [1, 'property'], //强制在点号之前和之后一致的换行
  31.         eqeqeq: 0, //要求使用 === 和 !==
  32.         'no-alert': 2, //禁用 alert、confirm 和 prompt
  33.         'no-caller': 2, //禁用 arguments.caller 或 arguments.callee
  34.         'no-empty-function': 0, //禁止出现空函数,
  35.         'no-eq-null': 2, //禁止在没有类型检查操作符的情况下与 null 进行比较
  36.         'no-eval': 1, //禁用 eval()
  37.         'no-extra-bind': 2, //禁止不必要的 .bind() 调用
  38.         'no-extra-label': 2, //禁用不必要的标签
  39.         'no-floating-decimal': 2, //禁止数字字面量中使用前导和末尾小数点
  40.         'no-implicit-globals': 2, //禁止在全局范围内使用变量声明和 function 声明
  41.         'no-implied-eval': 2, //禁止使用类似 eval() 的方法
  42.         'no-invalid-this': 0, //禁止 this 关键字出现在类和类对象之外
  43.         'no-iterator': 2, //禁用 __iterator__ 属性
  44.         'no-lone-blocks': 2, //禁用不必要的嵌套块
  45.         'no-loop-func': 0, //禁止在循环中出现 function 声明和表达式
  46.         'no-multi-spaces': [
  47.             1,
  48.             {
  49.                 exceptions: {
  50.                     VariableDeclarator: true,
  51.                 },
  52.             },
  53.         ], //禁止使用多个空格
  54.         'no-multi-str': 2, //禁止使用多行字符串
  55.         'no-new': 0, //禁止使用 new 关键字调用构造函数但却不将结果赋值给一个变量
  56.         'no-new-func': 2, //禁止对 Function 对象使用 new 操作符
  57.         'no-new-wrappers': 2, //禁止对 String，Number 和 Boolean 使用 new 操作符
  58.         'no-param-reassign': 0, //禁止对 function 的参数进行重新赋值
  59.         'no-proto': 2, //禁用 __proto__ 属性
  60.         'no-return-assign': 2, //禁止在 return 语句中使用赋值语句
  61.         'no-return-await': 2, //禁止使用没有意义的 return await
  62.         'no-script-url': 1, //禁止使用 javascript: url
  63.         'no-self-compare': 2, //禁止自身比较
  64.         'no-sequences': 2, //禁用逗号操作符
  65.         'no-throw-literal': 2, //禁止抛出异常字面量
  66.         'no-unmodified-loop-condition': 2, //禁用一成不变的循环条件
  67.         'no-useless-concat': 2, //禁止不必要的字符串字面量或模板字面量的连接
  68.         'no-useless-return': 2, //禁止多余的 return
  69.         'require-await': 1, //禁止不包含 await 的 async 函数
  70.         yoda: 2, //要求或禁止 “Yoda” 条件
  72.         //Variables
  73.         'no-label-var': 2, //不允许标签与变量同名
  74.         'no-shadow': ['error', { allow: ['state', 'config'] }], //禁止变量声明与外层作用域的变量同名（允许state、config）
  75.         'no-shadow-restricted-names': 2, //禁止将标识符定义为受限的名字
  76.         'no-undef': 1, //禁用未声明的变量，除非它们在 /*global */ 注释中被提到
  77.         'no-undef-init': 1, //不允许初始化变量值为 undefined
  78.         'no-undefined': 0, //禁止将 undefined 作为标识符
  79.         'no-unused-vars': [
  80.             1,
  81.             { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
  82.         ], //
  83.         'no-use-before-define': [
  84.             1,
  85.             {
  86.                 functions: false,
  87.                 classes: false,
  88.             },
  89.         ], //禁止在变量定义之前使用它们
  90.         //Node.js and CommonJS
  92.         //Stylistic Issues
  93.         'array-bracket-spacing': 1, //强制数组方括号中使用一致的空格
  94.         'block-spacing': 1, //强制在单行代码块中使用一致的空格
  95.         'brace-style': 1, //强制在代码块中使用一致的大括号风格
  96.         camelcase: 0, //强制使用驼峰法命名约定
  97.         'comma-dangle': 2, //要求或禁止末尾逗号
  98.         'comma-spacing': 1, //强制在逗号前后使用一致的空格
  99.         'comma-style': 2, //强制使用一致的逗号风格
  100.         'computed-property-spacing': 1, //强制在计算的属性的方括号中使用一致的空格
  101.         'consistent-this': [0, 'self', 'context'], //当获取当前执行环境的上下文时，强制使用一致的命名
  102.         'eol-last': 1, //要求或禁止文件末尾存在空行
  103.         'func-call-spacing': 1, //要求或禁止函数名和调用符之间的空格
  104.         'func-name-matching': 1, //要求函数名和其被赋值的变量相匹配
  105.         'func-names': 0, //要求或禁止使用命名的 function 表达式
  106.         'func-style': 0, //强制一致地使用 function 声明或表达式
  107.         'id-blacklist': [0], //禁用指定的标识符
  108.         'id-length': [
  109.             0,
  110.             {
  111.                 min: 2,
  112.             },
  113.         ], //强制标识符的最大和最小长度
  114.         'id-match': [0], //要求标识符匹配一个指定的正则表达式
  115.         indent: [1, 4], //4空格缩进
  116.         'key-spacing': [
  117.             1,
  118.             {
  119.                 align: {
  120.                     beforeColon: true,
  121.                     afterColon: true,
  122.                     on: 'colon',
  123.                 },
  124.             },
  125.         ], //强制在对象字面量的属性中键和值之间使用一致的间距
  126.         'keyword-spacing': 1, //强制在关键字前后使用一致的空格
  127.         'linebreak-style': [0, 'unix'], //强制使用一致的换行风格
  128.         'max-depth': [
  129.             1,
  130.             {
  131.                 max: 10,
  132.             },
  133.         ], //强制可嵌套的块的最大深度
  134.         'max-len': [0], //强制一行的最大长度
  135.         'max-nested-callbacks': [
  136.             1,
  137.             {
  138.                 max: 5,
  139.             },
  140.         ], //强制回调函数最大嵌套深度
  141.         'new-cap': 1, //要求构造函数首字母大写
  142.         'new-parens': 1, //要求调用无参构造函数时有圆括号
  143.         'no-lonely-if': 0, //禁止 if 作为唯一的语句出现在 else 语句中
  144.         'no-mixed-operators': 0, //禁止混合使用不同的操作符
  145.         'no-multi-assign': 2, //禁止使用链接赋值
  146.         'no-multiple-empty-lines': 1, //禁止出现多行空行
  147.         'no-negated-condition': 0, //禁用否定的表达式
  148.         'no-new-object': 1, //禁用 Object 的构造对象
  149.         'no-trailing-spaces': 1, //禁用行尾空格
  150.         'no-whitespace-before-property': 2, //禁止属性前有空白
  151.         'object-curly-newline': 0, //强制大括号内换行符的一致性
  152.         'object-curly-spacing': [1, 'always'], //强制在大括号中使用一致的空格
  153.         'operator-linebreak': [0, 'before'], //强制操作符使用一致的换行符
  154.         'padded-blocks': [0, 'never'], //要求或禁止块内填充
  155.         quotes: 0, //建议使用单引号
  156.         semi: [1, 'always'], //使用分号代替 ASI
  157.         'semi-spacing': 1, //强制分号之前和之后使用一致的空格
  158.         'semi-style': 1, //强制分号的位置
  159.         'space-before-blocks': 1, //强制在块之前使用一致的空格
  160.         'space-before-function-paren': [1, 'never'], //强制在 function的左括号之前使用一致的空格
  161.         'space-in-parens': 1, //强制在圆括号内使用一致的空格
  162.         'space-infix-ops': 1, //要求操作符周围有空格
  163.         'space-unary-ops': 1, //强制在一元操作符前后使用一致的空格
  164.         'unicode-bom': 2, //要求或禁止 Unicode 字节顺序标记 (BOM)
  165.         'wrap-regex': 0, //要求正则表达式被括号括起来
  167.         //ECMAScript 6
  168.         'arrow-spacing': 1, //强制箭头函数的箭头前后使用一致的空格
  169.         'generator-star-spacing': [1, 'after'], //强制 generator 函数中 * 号周围使用一致的空格
  171.         'no-empty': 1, // 禁止出现空语句块
  172.         'no-useless-escape': 1, // 禁用不必要的转义字符
  173.     },
  174. };

3. 新建 eslint-config-xxxx/package.json 文件

  • name 包名
  • version 版本号
  • main 入口文件
  • dependencies 依赖的其他 npm 包（千万不要放在 devDependencies 里）
    1. {
    2. "name": "eslint-config-xxxx",
    3. "version": "1.0.6",
    4. "description": "ESLint config base version",
    5. "main": "index.js",
    6. "scripts": {},
    7. "keywords": [
    8.   "npm"
    9. ],
    10. "author": "",
    11. "license": "ISC",
    12. "dependencies": {
    13.   "eslint-config-recommended": "^4.1.0"
    14. }
    15. }

4. 打包

  • 离线包
    • npm pack
    • 会在同级目录产生一个 tgz 的包
    • 传到静态资源服务器上就可以供前端使用了
  • npm 官方包
    • npm adduser
    • npm publish
  • npm 私服（verdaccio 或 nexus）
  • git 仓库的方式（引入包的时候在 git 地址前加一个 git+）

怎么制作 stylelint 的 npm 包？

1. 新建 stylelint-config-xxxx 文件夹

stylelint 的 npm 包名必须以 stylelint-config- 开头

2. 新建 stylelint-config-xxxx/index.js 文件

依赖的一些基本是用来检测 css 属性的顺序用的

  1. module.exports = {
  2.     extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
  3.     plugins: ['stylelint-order'],
  4. };

3. 新建 eslint-config-xxxx/package.json 文件

  • name 包名
  • version 版本号
  • main 入口文件
  • dependencies 依赖的其他 npm 包（千万不要放在 devDependencies 里）
    1. {
    2.   "name": "stylelint-config-xxxx",
    3.   "version": "1.0.1",
    4.   "description": "stylelint config",
    5.   "main": "index.js",
    6.   "scripts": {
    7.       "test": "echo \"Error: no test specified\" && exit 1"
    8.   },
    9.   "keywords": [
    10.       "stylelint"
    11.   ],
    12.   "author": "",
    13.   "license": "ISC",
    14.   "dependencies": {
    15.       "stylelint": "^13.13.1",
    16.       "stylelint-config-rational-order": "^0.1.2",
    17.       "stylelint-config-standard": "^22.0.0",
    18.       "stylelint-order": "^4.1.0"
    19.   }
    20. }

4. 打包

同 eslint