发布一个eslint的npm包

Bee.Bee.

已于 2023-05-23 16:13:22 修改

阅读量2.2k

点赞数 2

分类专栏：前端工具文章标签：前端 npm vue.js javascript

于 2022-03-29 15:45:52 首次发布

本文链接：https://blog.csdn.net/weixin_49015558/article/details/123822588

版权

前端工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.npm基本命令

1.1安装模块

【npm install / i】下载当前项目所依赖的包；
【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
【npm install -g xxx】利用npm安装全局模块xxx；
【 npm install --force】强制更新；
【npm install xxx】安装但不写入package.json；
【npm install xxx --save】安装并写入package.json的”dependencies”中，添加依赖；
【npm install xxx --save -dev】安装并写入package.json的”devDependencies”中。

1.2删除模块

【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；

1.3镜像仓库

查看当前库：npm config get registry
设置官方库：npm config set registry https://registry.npmjs.org/
设置淘宝镜像：npm config set registry https://registry.npm.taobao.org/

1.4其他命令

【npm -v】查看npm版本
【npm version】查看所有模块版本
【npm view less-loader versions 】查看特定模块（less-loader）版本
【npm init】初始化package.json
【npm list -g】查看所有全局安装的模块
【npm list xxx】查看某个模块的版本号
【 npm update <xxx>】更新模块
【npm search xxx】搜索模块
【npm install -g cnpm --registry=https://registry.npmmirror.com】淘宝定制的 cnpm (gzip 压缩支持) 命令行工具
【npm cache clear】清空NPM本地缓存
【npm whoami】查看当前登录的npm账号

2.发布一个eslint的npm包

2.1 准备工作

设置GitHub代码仓库

mkdir eslint-config-vue-ts-rule 
cd eslint-config-vue-ts-rule 
 
git clone git@github.com:Bee-zhang/elint-config-vue-ts.git

设置npm官方镜像仓库

2.2 初始化

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

# 发布的包名：不能有大写字母/空格/下滑线，默认是上级文件夹名，不得与现在npm中的包名重复（eslint模块名称以eslint-config-开头）
name: (node_modules) eslint-config-vue-ts-rule
# X.Y.Z格式：修复bug，小改动，增加z；增加新特性向后兼容，增加y；有很大改动无法向下兼容，增加x
version: (1.0.0)
description: vue-ts项目的eslint规则配置
entry point: (index.js) #入口文件
test command:
# Github 地址
git repository: git@github.com:Bee-zhang/elint-config-vue-ts.git
keywords:
author:
license: (ISC)
# 生成地址
About to write to ……/node_modules/package.json:

{
"name": "eslint-config-vue-ts-rule",
"version": "1.0.0",
"description": "vue-ts项目的eslint规则配置 ",
……
}

Is this ok? (yes) yes

2.3约束代码风格

2.3.1Eslint 支持

添加依赖

# eslint 安装 
yarn add eslint --dev
# eslint 插件安装 
yarn add eslint-plugin-vue --dev  

yarn add @typescript-eslint/eslint-plugin --dev  

yarn add eslint-plugin-prettier --dev  

# typescript parser 
yarn add @typescript-eslint/parser --dev

配置 eslint 校验规则

项目下新建 .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parser: 'vue-eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    // eslint-config-prettier 的缩写
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'prettier/prettier': 'error',
    // 禁止出现var
    'no-var': 'error',
    // 禁止出现console
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 禁用debugger
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 禁止出现重复的 case 标签
    'no-duplicate-case': 'warn',
    // 禁止出现空语句块
    'no-empty': 'warn',
    // 禁止不必要的括号
    'no-extra-parens': 'warn',
    // 禁止对 function 声明重新赋值
    'no-func-assign': 'warn',
    // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
    'no-unreachable': 'warn',
    // 强制所有控制语句使用一致的括号风格
    curly: 'warn',
    // 要求 switch 语句中有 default 分支
    'default-case': 'warn',
    // 强制尽可能地使用点号
    'dot-notation': 'warn',
    // 要求使用 === 和 !==
    eqeqeq: 'warn',
    // 禁止 if 语句中 return 语句之后有 else 块
    'no-else-return': 'warn',
    // 禁止出现空函数
    'no-empty-function': 'warn',
    // 禁用不必要的嵌套块
    'no-lone-blocks': 'warn',
    // 禁止使用多个空格
    'no-multi-spaces': 'warn',
    // 禁止多次声明同一变量
    'no-redeclare': 'warn',
    // 禁止在 return 语句中使用赋值语句
    'no-return-assign': 'warn',
    // 禁用不必要的 return await
    'no-return-await': 'warn',
    // 禁止自我赋值
    'no-self-assign': 'warn',
    // 禁止自身比较
    'no-self-compare': 'warn',
    // 禁止不必要的 catch 子句
    'no-useless-catch': 'warn',
    // 禁止多余的 return 语句
    'no-useless-return': 'warn',
    // 禁止变量声明与外层作用域的变量同名
    'no-shadow': 'off',
    // 允许delete变量
    'no-delete-var': 'off',
    // 强制数组方括号中使用一致的空格
    'array-bracket-spacing': 'warn',
    // 强制在代码块中使用一致的大括号风格
    'brace-style': 'warn',
    // 强制使用骆驼拼写法命名约定
    camelcase: 'warn',
    // 强制使用一致的缩进
    indent: 'off',
    // 强制在 JSX 属性中一致地使用双引号或单引号
    'jsx-quotes': 'warn',
    // 强制可嵌套的块的最大深度4
    'max-depth': 'warn',
    // 文件强制最大行数 1200
    'max-lines': ['warn', { max: 1200 }],
    // 强制函数最大代码行数 50
    'max-lines-per-function': ['warn', { max: 50 }],
    // 强制函数块最多允许的的语句数量100
    'max-statements': ['warn', 100],
    // 强制回调函数最大嵌套深度
    'max-nested-callbacks': ['warn', 3],
    // 强制函数定义中最多允许的参数数量
    'max-params': ['warn', 3],
    // 强制每一行中所允许的最大语句数量
    'max-statements-per-line': ['warn', { max: 1 }],
    // 要求方法链中每个调用都有一个换行符
    'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 3 }],
    // 禁止 if 作为唯一的语句出现在 else 语句中
    'no-lonely-if': 'warn',
    // 禁止空格和 tab 的混合缩进
    'no-mixed-spaces-and-tabs': 'warn',
    // 禁止出现多行空行
    'no-multiple-empty-lines': 'warn',
    // 关于分号
    semi: ['warn', 'always', { omitLastInOneLineBlock: true }],
    // 强制在块之前使用一致的空格
    'space-before-blocks': 'warn',
    // 强制在圆括号内使用一致的空格
    'space-in-parens': 'warn',
    // 要求操作符周围有空格
    'space-infix-ops': 'warn',
    // 强制在一元操作符前后使用一致的空格
    'space-unary-ops': 'warn',
    // 强制在注释中 // 或 /* 使用一致的空格
    'spaced-comment': 'warn',
    // 强制在 switch 的冒号左右有空格
    'switch-colon-spacing': 'warn',
    // 强制箭头函数的箭头前后使用一致的空格
    'arrow-spacing': 'warn',
    // 一个变量从不重新分配，使用const
    'prefer-const': 'warn',
    // 标记arguments变量的使用
    'prefer-rest-params': 'warn',
    // 'no-useless-escape': 'warn',
    'no-irregular-whitespace': 'warn',
    // 不允许直接在Object.prototype对象实例上调用某些方法
    'no-prototype-builtins': 'warn',
    // 消除一个案件无意中掉到另一个案件
    'no-fallthrough': 'warn',
    // 禁止不必要的布尔转换
    'no-extra-boolean-cast': 'warn',
    // 防止访问未初始化的词汇绑定以及跨越事例子句访问提升的功能
    'no-case-declarations': 'warn',
    // 禁止使用异步函数作为 Promise executor
    'no-async-promise-executor': 'warn',
    // 强化*发生器功能的间距
    'generator-star-spacing': 'off',
    // 任何对未声明的变量的引用都会导致警告
    'no-undef': 'off',
    // 不允许使用制表符
    'no-tabs': 'off',
    // 不允许在行尾添加尾随空白（空格，制表符和其他Unicode空白字符）
    'no-trailing-spaces': 'off',
    // 在表达式中连续使用不含运算符的不同运算符时发出警告
    'no-mixed-operators': 'off',
    // 确保promise只被Error对象拒绝
    'prefer-promise-reject-errors': 'off',
    // 禁止使用eval()函数来防止潜在的危险
    'no-eval': 'warn',
    // 强制每个函数(对于var)或块(对于let和const)作用域同时声明或单独声明变量。
    'one-var': 'off',
    // 在不改变类的工作方式的情况下安全地移除的类构造函数
    'no-useless-constructor': 'off',
    // 不允许括号和括号内的空格
    'computed-property-spacing': 'warn',
    'standard/computed-property-even-spacing': 'off',
    'standard/no-callback-literal': 'off',
    // 该规则检查每个v-model指令是否有效
    'vue/valid-v-model': 'warn',
    // 需要使用指令v-bind:key
    'vue/require-v-for-key': 'warn',
    // v-bind缩写
    'vue/v-bind-style': 'warn',
    // v-on缩写
    'vue/v-on-style': 'warn',
    // 避免 v-if 和 v-for 同时用在一个元素上
    'vue/no-use-v-if-with-v-for': 'warn',
    'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }],
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
};

配置 eslint 忽略检查 (根据项目需要自行添加)

项目下新建 .eslintignore

node_modules
dist

2.3.2prettier 支持

添加依赖

# 安装 prettier
yarn add prettier --dev

解决 eslint 和 prettier 冲突

解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

# 安装插件 eslint-config-prettier
yarn add eslint-config-prettier --dev

配置 prettier 校验规则

项目下新建 .prettier.js

module.exports = {
  // Tab字符的空格宽度
  tabWidth: 2,
  //在JSX中使用单引号而不是双引号
  jsxSingleQuote: false,
  printWidth: 100,
  //使用单引号而不是双引号
  singleQuote: true,
  //在语句的末尾打印分号
  semi: true,
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 200,
      },
    },
  ],
  //在一个单独的箭头函数参数周围包含括号
  arrowParens: 'avoid',
}

配置 prettier忽略检查 (根据项目需要自行添加)

项目下新建 .prettierignore

# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist

2.3.3package.json 配置

  "scripts": {
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
    "prettier": "prettier --write ."
  },

上面配置完成后,可以运行以下命令测试下代码检查个格式化效果:

# eslint 检查
yarn lint
# prettier 自动格式化
yarn prettie

2.4导出配置

将配置导出到index.js文件中

const eslintrc = require('./.eslintrc.js');
 
module.exports = eslintrc;

2.5本地测试

可以通过在JavaScript项目中运行以下命令在本地测试配置包，配置包的依赖项也可能已安装

npm install F:\project\eslint-config-vue-ts

2.6提交代码

配置好的项目如图，进行git add .——git commit——git push操作

2.7注册

$ npm adduser
Username: 
Password:
Email: (this IS public)

2.8发布/撤销

$ npm publish
$ npm unpublish <package>@<version>

2.9引用发布的依赖包

构建项目

你可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
```
# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue
```
查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

安装依赖

 cd my-vue-app
 npm install
 npm run dev
 
 npm install eslint-config-vue-ts-rule

引入配置

在my-vue-app 项目根目录下新建.eslintrc.js文件

// .eslintrc.js

module.exports = {
  extends: ["eslint-config-vue-ts-rule"],
};

2.10常见错误解决

不能发布同名同版本的npm包
删除npm市场的包同名的24小时后才能重新发布
需要提高版本号
pm publish --access public
确保登录的用户账号正确
无权限删除线上的包(撤包有时间限制，24小时) 解决方案：加上 --force

3.相关链接

代码仓库：git@github.com:Bee-zhang/elint-config-vue-ts.git
npm官网：npm