创建一个 ESLint 的npm 包

一牙西瓜
137 阅读3分钟
前言

团队开发项目，代码风格不同以及一些代码明显性问题，为避免上述问题，引入 ESLint 并创建团队内的 ESLint 规则包搭配 vscode 实现代码规则校验。

ESLint规则包
相关配置详解&记录

ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。官方｜中文

npm 包的项目结构image.png

配置详解
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: []
 }

.eslintrc.js配置解释

  1. root，布尔值。用于标记该配置文件是否是项目的根目录下的配置文件。使用 root: true 是一种最佳实践，它使得配置的意图更清晰，并且可以避免因为意外地继承了父级目录的 ESLint 配置而导致的潜在问题。
  2. env，对象。指定代码运行的环境，这会影响哪些环境全局变量会被识别为已定义。
env : {
 browser: true, // 启用浏览器全局变量
 node: true, // 启用Node.js全局变量和Node.js范围的规则
 es2021: true // 启用ES2021的全局变量和语法特性
}
  1. extends，数组。继承其他配置文件或预设，简化配置过程。
extends: [
 'plugin:vue/essential', // 应用Vue插件的基本规则，针对Vue组件的必需规则。
 'eslint:recommended', // 应用ESLint推荐的规则，包括错误预防和潜在问题的规则。
 'plugin:import/errors', // 应用import插件的错误规则，用于检测导入语句中的错误。
 'airbnb-base', // 应用Airbnb风格指南的基础规则，用于代码风格和一致性。
 ]
  1. globals, 对象。定义全局变量，使其在所有文件中都可用而不触发未定义变量的警告。
globals: { 
 jQuery: 'writable', // 允许全局使用jQuery变量，并且可以被重写
 myVar: 'readonly' // 全局变量myVar只读 
}
  1. parser，字符串。指定解析器，默认为Espree，但你可以指定其他解析器，如@typescript-eslint/parser用于TypeScript。
  2. parserOptions，对象。为解析器提供额外的选项，比如指定ECMAScript版本、源码类型等。
parserOptions: { 
 ecmaVersion: 2021, // 指定ECMAScript版本 
 sourceType: 'module', // 指定源码类型，'script' 或 'module' 
 ecmaFeatures: { jsx: true // 启用jsx语法支持 } 
}
  1. plugins，数组，加载额外的ESLint插件，扩展更多功能和规则。
plugins: ['react', 'import']
  1. rules,对象，自定义每条规则的启用、禁用及警告或错误等级。
rules: { 
 'no-console': 'warn', // 将no-console规则设置为警告级别 
 'quotes': ['error', 'double'], // 启用quotes规则，并要求使用双引号 
 'indent': ['error', 2] // 启用缩进规则，设置缩进宽度为2个空格
 }

rules规则解释

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 启用并视作警告（不影响退出）
  • "error" 或 2 - 启用并视作错误（触发时退出代码为 1）
发布 npm 包
  1. 创建项目

  1. yarn init（创建 package.json 文件）

  2. npm init @eslint/config （安装并配置 ESLint）

  3. 书写自己的 ESLint 规则 && 调整应用目录结构

  1. 发布包
  1. 确认当前当前源，可通过yrm工具查看、切换源；或者npm config set registry https://registry.npmjs.org/设置源
  2. 确认自己是否有 npm 的账号，没有的话可以在 www.npmjs.com/ 注册。然后执行npm login登录。可以通过npm whoami查看自己是否已成功登录。
  3. npm publish发布
vscode配置
1.VSCode 安装 ESLint 插件；

image.png

2.修改用户配置
"eslint.enable": true,
"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
  },
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "vue"
],
3.git 提交钩子配置

安装lint-staged,并配置gitHooks

"gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{vue,js,jsx,ts,tsx}": [
      "eslint --max-warnings=0 --fix",
      "git add"
    ]
  }
avatar
文章
阅读
粉丝