ESLint配置详解、husky、lint-staged入门使用

原生使用

  • 可以手动下载配置
  • 可以通过vue脚手架创建项目时自动下载配置

以下为手动配置举例

安装:npm i eslint -D

生成ESLint文件:npx eslint --init,再根据需求选择配置

检查:npx eslint 文件位置或整个文件夹

JS测试案例:

按照要求修改过后,检查通过:

这只是默认的规则,实际上什么样的规则完全由开发者们自己规定,每个团队都可以制定独特的规范,没有绝对正确说法

支持多种配置文件格式

.eslintrc配置文件

简单示例:

JS 复制代码
// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-unused-vars': 0,
    'vue/multi-word-component-names': 0,
    'vue/no-unused-components': 0,
  },
};

root 配置项

root 属性用于指定 ESLint 配置文件所在的根目录。这样,当您在项目根目录下运行 ESLint 时,它将只检查该目录及其子目录中的文件,而不检查其他目录。

env 配置项

js 复制代码
env: {
    browser: true,
    commonjs: true,
}

由于 ESLint 的各种规则中,一般都不允许使用未在页面内声明的成员,而开发中经常会用到 一些运行环境自带的 api,如:

  • 浏览器中的 window、document 等,所以要 "browser": true

  • nodejs中的**__dirname**,所以要"commonjs": true

所以要告诉eslint,当前代码是运行在哪些环境中,这样检查时就不会报错了

globals 配置项

当访问当前源文件内未定义的变量时,会发出警告。如果你想在一个源文件里使用全局变量,可以在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。可以使用注释或在配置文件中定义全局变量。

JS 复制代码
  globals: {
    _: true, // 可以读取,可以修改
    $: false, // 可以读取,不能修改
  },

extends 配置项

继承和扩展 ESLint 规则集的配置项

js 复制代码
extends: ['plugin:vue/essential', 'eslint:recommended'],
  • extends 的优先级是从低到高的,后面的规则会覆盖前面的规则
  • ESLint 检查时用哪些规则呢?通过这个配置项可以配置使用内置规则 还是第三方规则
    • 注意:配置 extends时,可以省略 eslint-config-,直接写成 standard

以前大家都在用原生JS开发,还没用上Vue、react等等,但也是需要工具来帮助检查语法规范的

后来有了Vue,但是.vue文件不是.js文件,所以为了让ESLint也支持检查.vue 文件中的模板、脚本和样式,便有了eslint-plugin-vue这个包,否则连<template>都不认识,直接开头的 < 符号都报错:

plugins和extends和的区别

extends 用于引用扩展或配置文件,可以继承一个或多个已定义好的配置,包括 ESLint 内置的推荐配置、第三方插件提供的配置或自定义的配置文件

plugins 用于引入第三方插件,可以加载第三方插件并使用插件提供的规则和功能。插件通常用于为特定的框架、库或语言提供定制的代码检查规则。

plugins 配置项

插件是一个可以为 ESLint 添加各种扩展功能的 npm 包。一个插件可以执行许多功能,包括但不限于添加新的规则和导出可共享的配置

JS 复制代码
plugins: ['prettier']

可以通过 extends 选项来继承插件的规则,extends 属性值由以下内容组成:

  • plugin:
  • 包名(可以省略其前缀,如 prettiereslint-plugin-prettier 的缩写)
  • /
  • 配置名称(如 recommended

举例plugin:prettier/recommended,使用它需要安装 npm 包:eslint-plugin-prettier

JS 复制代码
  extends: [
    // 意思是配置eslint-plugin-prettier包中的recommended选项
    "plugin:prettier/recommended",
  ],

到node_modules中找下这个recommended选项在哪里,帮助加深理解

parser 配置项

指定用于解析JavaScript代码的解析器。ESLint默认使用 Espree 解析器,但是可以通过parser配置来使用其他解析器。

JS 复制代码
{
    "parser": "某某解析器",
}

parserOptions 配置项

给配置的解析器添加可选配置项。ESLint 解析器 解析代码时,可以指定用哪个 js 的版本

js 复制代码
"parserOptions": {
  "ecmaVersion": 12
 }

rules 配置项

  • "off"0 - 关闭规则
  • "warn"1 - 启用并视作警告
  • "error"2 - 启用并视作错误
JS 复制代码
  rules: {
    'no-unused-vars': 'off',
    'vue/multi-word-component-names': 0,
    'vue/no-unused-components': 0,
  },

如果说extends引入了某第三方规则集,但是你不喜欢其中的某一条,便可以在这里进行覆盖

语法规范包类型

ESLint 安装时自带的两百多个规范,开发时未必都要使用,各个公司根据自己的习惯选择

所以就用了不同的选择组合:

一、ESLint内置规范包

可以理解为官方给你推荐的套餐

eslint-all ,不管三七二十一,只要是个规则全给你用上

eslint-recommended,ESLint作者:Nicholas C. Zakas推荐的五十多个规则

二、标准规范包

eslint-config-standard,也使用了两百多个规则

安装:npm i eslint-config-standard -D

三、第三方规范包

google/airbnb/facebook....

这个好理解,大公司都有成熟团队,翅膀硬了自然有自己的规范

举例:查看依赖详情:npm info "eslint-config-airbnb-base@latest" peerDependencies

下载相关包:npx install-peerdeps --dev eslint-config-airbnb-base,相关的就被下好了:

fix修复格式问题

scss 复制代码
//cmd命令:修复src目录下所有扩展名为vue和js的文件
npx eslint --fix --ext .vue,.js src
//或者不指定扩展名,直接目录下所有文件都修复(就算是.png图片也会检查)
npx eslint --fix src/**

--fix:修复

--ext:文件扩展名

忽略文件配置

方法有两个

  • 在配置文件中添加 ignorePatterns
  • 创建包括忽略匹配模式的专用文件(默认为 .eslintignore

甚至可以用注释写到代码里面

JS 复制代码
1. 关闭段落校验

/* eslint-disable */
some code
some code
/* eslint-enable */

2. 关闭当前行校

some code // eslint-disable-line

3. 关闭下一行校验

// eslint-disable-next-line
some code

项目中怎么规范化开发

一、eslint配合prettier eslint

【格式化程序选择Prettier ESLint】

介绍

eslint管的是语法,prettier管的是风格,这两个怎么搭配不冲突是重点

这个问题网上技术文章大致思路:

  • 细心点注意两个插件的配置不要冲突就好

  • 使用eslint-config-prettier,格式的问题就全由Prettier接手

  • ......

但个人感觉比较通用且方便的方案应该是ESLintPrettier ESLint这两个vscode插件

不需要安装Prettier插件,也能做到Prettier该有的格式化 json、html、css等等文件的格式化,主要是看中这点,否则像安装eslint-plugin-prettier等等办法,对于其他文件的格式化还得专门设置

安装

vue3举例

Prettier ESLint插件要求安装的包:

使用如下命令即可,不用按照上面的图片说明单独安装vue-eslint-parser,因为它属于eslint-plugin-vue的次级依赖,直接装eslint-plugin-vue更好,还能写入vue语法的规则

kotlin 复制代码
// 注意,这个搭配方案,prettier不要升到@3.X.X版本,直到23/8/14日测试,会不兼容以致无法格式化
pnpm i prettier@^2.5.1 eslint@^8.7.0 -D
//初始化eslint文件设置
npx eslint --init

接着按照需求选择eslint给你的选项就好,再设置格式化默认插件,然后重启Vscode,再打开就可以正常用格式化文档快捷键进行格式化代码了

在初始化eslint文件设置的时候,如果选择了Vue框架,那它会主动提示你顺带安装eslint-plugin-vue,一定要装这个,否则不能格式化.vue文件

如果发现错过了、总之当时没装,再pnpm i eslint-plugin-vue -D就好

JS 复制代码
//然后在.eslintrc文件的extends中加上'plugin:vue/vue3-essential',示例:
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
  • 更改.eslintrc.js规则的时候,有时候要等几秒钟,才会按照新的规则去格式化

  • 如果项目根目录下有.prettier配置文件,并且对它进行更改,那么需要重启vscode之后,prettier EsLint插件才会采用新的配置文件进行格式化

  • Prettier ESLint 做的就是先使用 prettier 对所有源码中的文件(.vue,.js,.ts,.css,.scss,.json,.md等)用 prettier 的规则进行格式化,此时的代码必然会与 ESLint 有冲突。再调用 ESLint --fix 对 .js,.ts,.vue 等涉及到 ESLint 语法检查的地方用 ESLint 进行格式化。简单的说,它的原理就是凡是 ESLint 严格限制的部分,都用 ESLint 格式化,反之用 Prettier。

  • 在cmd终端执行:

    shell 复制代码
    npx prettier --write src & npx eslint --fix --ext .js,.ts,.vue src

    在powershell终端执行:

    shell 复制代码
    npx prettier --write src ; npx eslint --fix --ext .js,.ts,.vue src

    可以达到和 Prettier ESLint 一样的效果。因此可以认为 Prettier ESLint 就是以上终端执行的封装。

  • 由于vite创建项目的时候默认是module包

这时所有js文件默认使用ESM模块规范,但是ESLint目前不支持ESM模块(新版配置可以,但是还在实验性阶段),所以需要显性地声明成.cjs才能标识这个是用commonjs规范的

无论package.json中的type字段为何值,.mjs的文件都按照es模块来处理,.cjs的文件都按照commonJs模块来处理

vue/cli创建给出的默认搭配方案

【格式化程序选择ESLint】

vite命令创建是没有方案选择的,这里说下vue/cli给的方案,vue2举例

按照这些配置,那么项目的package.json中关于 linter和formatter 实际给的搭配方案是

JS 复制代码
//选择格式化插件程序为eslint
//package.json
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
//如果直接复制上面版本安装,ecmaVersion最高兼容到12,用13或者直接latest会报错Invalid ecmaVersion

如果你的某个项目中现在没有任何规范化方案,并且想采用这个搭配,可以直接装最新版本:

arduino 复制代码
//安装
pnpm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D
//设置
npx eslint --init
JS 复制代码
// .eslintrc.js
extends: [
    "eslint:recommended",
     // vue3用plugin:vue/vue3-essential
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],

直到23/8/14日经过测试,按照上面命令安装的各npm包没有任何冲突,版本结果如下:

JS 复制代码
"eslint": "^8.47.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.1",

注意装完需重启vscode

方案缺点

有些规则会和prettier/prettier冲突,例如.eslintrc.js里面写个不要分号的规则,会提示和prettier/prettier冲突,这东西其实就是npm包eslint-plugin-prettier,鼠标点链接就是它github主页

所以冲突了还得另外建个.prettierrc文件去关掉冲突的规则

前面的方案就不用这么做,直接就覆盖prettier的规则

二、限制使用包管理工具

团队里面同一个项目你用npm,我用yarn,他用pnpm,大家各玩各的,迟早因为包版本的问题导致项目出问题

JS 复制代码
"scripts": {
    // ... 其他命令
    //举例限制只能使用pnpm
    "preinstall": "npx only-allow pnpm"
 }

三、husky+lint-staged

前面的规范开发只是君子协议,在大家提交代码前还得设置一道门槛检查到底有没有遵守,在commit之前检查代码能不能通过eslint校验,不让屎山代码流入仓库

  • husky:管理 git hooks 的工具

  • lint-staged:只对已经通过 git add 加入到暂存区的文件进行扫描

husky

  • 自动安装,完成手动安装的1到4步

pnpm dlx husky-init;pnpm install

但是为了和lint-staged配合,这个内容要改成npx lint-staged

还要注意加上手动安装第3步的git init

  • 手动安装

1、安装

pnpm i husky -D

2、启用 git hooks

pnpx husky install

3、项目安装时自动启用git hooks

(pnpm pkg命令要求node版本不能过低,这里用16.20.0)

pnpm pkg set scripts.prepare="husky install"

该命令其实就是package.json加上这个script

注意:初次安装项目生成node_modules时,根目录得有git仓库,否则会跳过husky install,以致于后续commit不会触发任何git hooks

所以为了防止这种情况,在上述的npm的prepare钩子函数中再加上git init

JSON 复制代码
"prepare": "git init && husky install"

4、添加一个 husky hook,内容为npx lint-staged

pnpx husky add .husky/pre-commit "npx lint-staged"

lint-staged

安装

pnpm i lint-staged -D

配置文件

根目录下新建文件**.lintstagedrc.json**

JSON 复制代码
//检验规则举例,具体检验什么文件哪些路径看团队需求
{
  //对src目录下所有文件校验
  "src/**/*.{js,cjs,ts,html,json,css,scss,vue}": ["npx prettier --write"],
  "src/**/*.{js,cjs,ts,vue}": ["npx eslint --fix"],
  //只对根目录的所有文件校验,不涉及文件夹
  "./*.{js,cjs,ts,html,json}": ["npx prettier --write"],
  "./*.{js,cjs,ts}": ["npx eslint --fix"]
}

或者直接在package.json添加如下对象

json 复制代码
  "lint-staged": {
    "src/**/*.{js,cjs,ts,html,json,css,scss,vue}": [
      "npx prettier --write"
    ],
    "src/**/*.{js,cjs,ts,vue}": [
      "npx eslint --fix"
    ],
    "./*.{js,cjs,ts,html,json}": [
      "npx prettier --write"
    ],
    "./*.{js,cjs,ts}": [
      "npx eslint --fix"
    ]
  },

然后就可以尝试commit代码了,如果eslint校验没通过,就像这样有个变量声明了但是没用过便提交失败了,这样就必须调整代码,再暂存、再推送,直到符合eslint规则,以达到规范化开发的目的

注意看规范包官网

  • 修改规则别忘了重新启动项目才能生效

有些规则似乎官网并没有,但是为什么能够使用?比如vue/multi-word-component-names

那是因为引入了这么一个规范包(就是一个别人已经配置好的.eslintrc文件,人家已经定义了很多的rules、 plugins等等配置)

这是它的官网,可以看到找到了相关规则

在这里看到使用指导:

源码也可以看到

再例如阿里巴巴的规范包:

也有指明怎么配置extends里的命名

本文仅代表个人观点,可能存在不准确或不完整之处,欢迎各位读者批评指正

相关推荐
susu1083018911几秒前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾2 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu4 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym9 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫10 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫14 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat15 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。2 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode