beizhu
type
Post
status
Published
date
Apr 1, 2021
slug
summary
ESLint相关，继承的主要是爱彼迎、eslint推荐、typescript-eslint推荐、React推荐规R，傻瓜式操作步骤，个人实践，可能还存在问题，望多多指教
tags
JS
category
技术
icon
password
ESLint相关
继承的主要是爱彼迎、eslint推荐、typescript-eslint推荐、react推荐规则，自己改了点小规则。.eslintrc具体细则还不是特别完善。各位大佬使用中发现问题的话，求轻喷。希望大家一起完善。
目前eslint提醒主要是error，warning，error红色，编译不通过，waring黄色警告，不影响项目编译。有强迫症的人估计一定会改掉。
1 package.json引入
在git提交的钩子函数（husky）里使用 npm run lint_husky
这个之前有个Bug，如果执行eslint的
--fix修复代码操作，会在git提交后再修复，故在执行钩子时不修复代码，只是单纯的检测error错误。Nextjs-v11版本有了官方的eslint规则，后续升级11版本的话，可以加进入2 .eslintrc.js
3 .eslintignore 和 .prettierignore
看诸位项目
4 prettier.config.js
5 .editorconfig
6. Vscode插件
Prettier Eslint 规则会使用eslint中的规则，此插件仅在eslint项目下格式化有效。Prettier - Code formatter 会使用prettier.config.js的规则依据个人需求，选择是否保存并格式化
7. npm run fix && npm run lint
第一次引入项目先执行npm run fix，目的是统一项目中所有单双引号，缩进，格式。后执行npm run lint 。npm run lint(eslint --fix)对一些缩进格式不是特别敏感，所以先执行一遍fix，再执行lint。 以后项目可不再执行npm run fix，编辑提交时只执行npm run lint。
npm run fix 在你引入到现有项目后执行，帮你把代码格式化到prettier的配置
npm run lint 带了
--fix，它会格式化代码，会修复一些规则。引入老项目后。发现有点奔溃😿
经过修复后
8 husky
husky一个Git Hook 工具，文档 将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现在 pre-commit 阶段就执行一系列流程保证每一个 commit 的正确性。
npm install husky --save-dev && npx husky initor
添加钩子
npx husky add .husky/pre-commit "npm run lint"
9 改代码
come on！
附
1. Eslint常用配置项
加入script 。具体内部配置诸位酌情使用，不常用的见文档
.代表的是所有文件。也可以写具体的目录，比如pages，utils等
-fix修复文件，剩下的未修复的问题才会输出到命令行
-fix-dry-run：该选项与-fix有相同的效果，唯一一点不同是，修复不会保存到文件系统中。
-ext：可以指定在指定目录中搜索JavaScript文件时，ESLint将使用哪些文件扩展名。默认扩展名为.js。
-global：用于定义全局变量。任何指定的全局变量默认是只读的，在变量名字后加上:true后会使它变为可写。要指定多个变量，使用逗号分隔它们，或多次使用这个选项。
-quiet只会报告错误error
-max-warnings指定一个警告的阈值,当你的项目中有太多违反规则的警告时，这个阈值被用来强制 ESLint 以错误状态退出 示例:eslint --max-warnings 10 file.js
o将报告写到一个文件。示例 :eslint -o ./test/test.html
-cache缓存默认被存储在.eslintcache启用这个选项可以显著改善 ESLint 的运行时间，确保只对有改变的文件进行检测。 <img src="https://tva1.sinaimg.cn/large/008eGmZEgy1gomw6os2fmj30x80g87a8.jpg">
2. Exit codes
当检测完毕后，eslint会有状态码提醒
0: 检测成功，没有错误。如果-max-warnings标志被设置为n，那么警告数量最多为n。
1: 检测成功，并且至少有一个错误，或者警告多于-max-warnings选项所允许的警告。
2: 由于配置问题或内部错误，检测未能成功。
3. 忽略相关
- 在文件头部添加规则，整个文件忽略
- 临时禁止
- 对指定规则忽略
- 指定行忽略
- 指定行禁用某个规则
- 指定行禁用多个规则