ESLint相关 + prettier

发表于 | 分类于 | | 阅读次数:
ESLint相关，继承的主要是爱彼迎、eslint推荐、typescript-eslint推荐、React推荐规R，傻瓜式操作步骤，个人实践，可能还存在问题，望多多指教

ESLint相关

继承的主要是爱彼迎、eslint推荐、typescript-eslint推荐、react推荐规则，自己改了点小规则。.eslintrc具体细则还不是特别完善。各位大佬使用中发现问题的话，求轻喷。希望大家一起完善。

目前eslint提醒主要是error，warning，error红色，编译不通过，waring黄色警告，不影响项目编译。有强迫症的人估计一定会改掉。

1 package.json引入

1
2
3
4
5
6
7
8
9
10
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"husky": "^5.1.3",
"prettier": "^2.2.1"
1
2
3
4
5
6
7
// 规则见附
"scripts": {
	"lint": "eslint --ignore-path .eslintignore . --fix",
	"lint_quiet": "eslint --quiet  --ignore-path .eslintignore . --fix",
	"lint_husky": "eslint --quiet  --ignore-path .eslintignore . ",
	"fix": "npx prettier --write .",
}
在package.json里加入一条`"lint_husky": "eslint --ignore-path .eslintignore . ",`

在git提交的钩子函数（husky）里使用 npm run lint_husky

这个之前有个Bug，如果执行eslint的--fix修复代码操作，会在git提交后再修复，故在执行钩子时不修复代码，只是单纯的检测error错误。

Nextjs-v11版本有了官方的eslint规则，后续升级11版本的话，可以加进入

1
2
3
4
5
6
7
8
9
extends: [
	"next",
	"next/core-web-vitals",
]

"devDependencies": {
    
    "eslint-config-next": "^11.0.1",
  }

2 .eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true
	},
	extends: [
		"prettier",
		"airbnb",
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:@typescript-eslint/recommended"
	],
	settings: {
		"import/extensions": [
			"2",
			"ignorePackages",
			{
				ts: "never",
				tsx: "never",
				json: "never",
				js: "never"
			}
		]
	},
	parser: "@typescript-eslint/parser",
	parserOptions: {
		ecmaFeatures: {
			jsx: true
		},
		ecmaVersion: 2018
	},
	plugins: ["react", "@typescript-eslint"],
	rules: {
		indent: ["error", "tab"], // todo
		"no-tabs": 0,
		"quote-props": 0,
		semi: 0,
		quotes: 0,
		"comma-dangle": ["error", "never"],
		"arrow-parens": 0,
		"react/react-in-jsx-scope": 0,
		"react/jsx-indent": 0,
		"react/jsx-indent-props": [2, "tab"],
		"react/jsx-filename-extension": 0,
		"react/jsx-props-no-spreading": 0,
		"react/jsx-no-target-blank": 0,
		"import/no-unresolved": 0,
		"import/extensions": 0,
		"@typescript-eslint/no-var-requires": 0,
		"global-require": 0,
		"no-nested-ternary": 0,
		"max-classes-per-file": 0, // 一个页面最多一个class
		"no-plusplus": 0, // 允许使用++ --
		"no-new": 0,
		"no-useless-constructor": 0, // constructor允许{}
		"no-use-before-define": 0,
		"no-underscore-dangle": 0, // _
		"no-param-reassign": 1, // 形参赋值
		"import/prefer-default-export": 0, // 单个方法、类是否默认导出
		camelcase: 1, // todo 是否驼峰
		"no-restricted-syntax": 0, // 不受限制的语法
		"guard-for-in": 1, // 判断Object.prototype.hasOwnProperty.call(foo, key)
		"max-len": [1, { code: 200 }],
		"no-return-await": 0,
		"new-cap": 1,
		"jsx-a11y/label-has-associated-control": 0,
		"jsx-a11y/anchor-is-valid": 0,
		"jsx-a11y/click-events-have-key-events": 0, // 关爱残障人士标签 强制执行onClick是伴随着以下的至少一个：onKeyUp，onKeyDown，onKeyPress
		"jsx-a11y/no-static-element-interactions": 0, // 关爱残障人士标签 span div等 加role
		"jsx-a11y/no-noninteractive-element-interactions": 0, // 关爱残障人士标签 非交互元件
		"no-script-url": 1, // javascript:;
		"class-methods-use-this": 0,
		eqeqeq: 1, // todo ===
		"@typescript-eslint/ban-types": 1, // Object {}等
		"react/display-name": 0, // display-name
		"react/prop-types": 0, // .propTypes
		"react/destructuring-assignment": 1, // todo props state解构
		"react/no-array-index-key": 1,
		"no-unused-expressions": ["error", { allowShortCircuit: true }],
		"consistent-return": 2,
		"no-prototype-builtins": 1, //  bad: foo.hasOwnProperty("bar") good:Object.prototype.hasOwnProperty.call(foo, "bar");
		"no-shadow": 1,
		"@typescript-eslint/no-empty-function": 1,
		"no-async-promise-executor": 0, // 禁止将异步功能用作Promise执行器
		"@typescript-eslint/no-empty-interface": 0,

		"@typescript-eslint/explicit-module-boundary-types": 0, // 300 可以自动推倒
		"no-console": "off",
		"@typescript-eslint/no-unused-vars": 1, // 20 未使用的变量
		"func-names": 0, // 匿名函数
		"@typescript-eslint/no-explicit-any": 1, // 100 // any 类型

		"@typescript-eslint/no-this-alias": 1,
		"prefer-destructuring": 1,
		"no-case-declarations": 1
	}
};

3 .eslintignore 和 .prettierignore

看诸位项目

1
2
3
4
5
6
7
8
9
10
11
12
/node_modules/
/src/_next/
/src/dist/
/src/static/
  
  or

/node_modules/
/src/_next/
/src/dist/
/src/static/
/src/server/proto

4 prettier.config.js

1
2
3
4
5
6
7
8
9
module.exports = {
	"printWidth": 80,
	"tabWidth": 4,
	"singleQuote": false,
	"semi": true,
	"trailingComma": "none",
	"bracketSpacing": true,
	"arrowParens": "avoid",
}

5 .editorconfig

1
2
3
4
5
6
7
8
9
10
11
12
# http://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = tab
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off

6. Vscode插件

Prettier Eslint 规则会使用eslint中的规则，此插件仅在eslint项目下格式化有效。

Prettier - Code formatter 会使用prettier.config.js的规则

依据个人需求，选择是否保存并格式化

image-20230505195421411

image-20230505195451035

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，它会格式化代码，会修复一些规则。

引入老项目后。发现有点奔溃😿

image-20230505195523395

image-20230505195545111

image-20230505195601910

image-20230505195620941

经过修复后

image-20230505195638982

8 husky

husky一个Git Hook 工具，文档 将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现在 pre-commit 阶段就执行一系列流程保证每一个 commit 的正确性。

npm install husky --save-dev && npx husky init

or

1
2
3
4
5
6
7
8
9
10
npm install husky --save-dev  ||  yarn add husky --save-dev

npx husky install || yarn husky install
  或者也可以在项目内容install
  // package.json
  {
    "scripts": {
      "prepare": "husky install"
    }
  }

image-20230505195717826

添加钩子

npx husky add .husky/pre-commit "npm run lint"

1
2
3
4
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

    npm run lint

image-20210317145824823

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 的运行时间，确保只对有改变的文件进行检测。

2. Exit codes

当检测完毕后，eslint会有状态码提醒

  • 0: 检测成功，没有错误。如果 --max-warnings 标志被设置为 n，那么警告数量最多为n。
  • 1: 检测成功，并且至少有一个错误，或者警告多于 --max-warnings 选项所允许的警告。
  • 2: 由于配置问题或内部错误，检测未能成功。

3. 忽略相关

  1. 在文件头部添加规则，整个文件忽略
1
2
/* eslint-disable */
// 代码开始位置
  1. 临时禁止
1
2
3
/* eslint-disable */
console.log('hello');
/* eslint-enable */
  1. 对指定规则忽略
1
2
3
4
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */
  1. 指定行忽略
1
2
3
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
  1. 指定行禁用某个规则
1
2
3
alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');
  1. 指定行禁用多个规则
1
2
3
4
alert('foo'); // eslint-disable-line no-alert, quotes, semi
 
// eslint-disable-next-line no-alert, quotes, semi
alert('foo');
感谢你的打赏哦！