[英]ESLint / Prettier / Husky indent problems in React-Native app
I have a problem, when I commit, I have Husky which checks for indentation errors / usual errors (like props are not used.... etc).我有一个问题,当我提交时,我有 Husky 检查缩进错误/常见错误(如未使用道具......等)。 My app is a TypeScript React-Native app.
我的应用程序是 TypeScript React-Native 应用程序。
I am getting the following:我得到以下信息:
25:1 error Expected indentation of 4 spaces but found 2 indent
26:1 error Expected indentation of 2 spaces but found 0 indent
27:1 error Expected indentation of 4 spaces but found 2 indent
28:1 error Expected indentation of 6 spaces but found 4 indent
29:1 error Expected indentation of 8 spaces but found 6 indent
30:1 error Expected indentation of 8 spaces but found 6 indent
31:1 error Expected indentation of 10 spaces but found 8 indent
32:1 error Expected indentation of 10 spaces but found 8 indent
33:1 error Expected indentation of 10 spaces but found 8 indent
34:1 error Expected indentation of 10 spaces but found 8 indent
35:1 error Expected indentation of 10 spaces but found 8 indent
36:1 error Expected indentation of 8 spaces but found 6 indent
37:1 error Expected indentation of 6 spaces but found 4 indent
39:1 error Expected indentation of 6 spaces but found 4 indent
40:1 error Expected indentation of 8 spaces but found 6 indent
41:1 error Expected indentation of 8 spaces but found 6 indent
42:1 error Expected indentation of 8 spaces but found 6 indent
43:1 error Expected indentation of 8 spaces but found 6 indent
44:1 error Expected indentation of 6 spaces but found 4 indent
45:1 error Expected indentation of 4 spaces but found 2 indent
46:1 error Expected indentation of 2 spaces but found 0 indent
My VSCode is set to 2 spaces,我的 VSCode 设置为 2 个空格,
My eslint.rc
rule is "indent": ["error", 2]
and my prettier.rc
is set to "tabWidth": 2,
I don't understand why it's giving errors, the code is formatted as it should be.我的
eslint.rc
规则是"indent": ["error", 2]
而我的prettier.rc
设置为"tabWidth": 2,
我不明白为什么它会出错,代码的格式应该是这样的。 I even ran prettier myself command-shift-f
on Mac.我什至在 Mac 上运行了更漂亮
command-shift-f
。
Any ideeas?有什么想法吗?
Prettier documentation states that更漂亮的文档指出
Whatever linting tool you wish to integrate with, the steps are broadly similar.
无论您希望集成何种 linting 工具,这些步骤都大体相似。 First disable any existing formatting rules in your linter that may conflict with how Prettier wishes to format your code.
首先禁用 linter 中可能与 Prettier 希望格式化代码的方式冲突的任何现有格式化规则。 Then you can either add an extension to your linting tool to format your file with Prettier - so that you only need a single command for format a file, or run your linter then Prettier as separate steps.
然后,您可以向您的 linting 工具添加扩展名以使用 Prettier 格式化您的文件 - 这样您只需要一个命令来格式化文件,或者作为单独的步骤运行您的 linter 然后 Prettier。
In your case, I would suggest 1. Add prettier
to the end of the extends array in eslintrc to disable the formatting rules在您的情况下,我建议 1. 在 eslintrc 中的 extends 数组的末尾添加
prettier
以禁用格式化规则
{
"extends": ["prettier"]
}
Then you can combine husky with lint-staged to run pre-commit hooks for your staged files.然后,您可以将 husky 与lint-staged结合起来,为您的暂存文件运行预提交挂钩。 For example: in
package.json
, define husky例如:在
package.json
中,定义哈士奇
"husky": { "hooks": { "pre-commit": "lint-staged" } } “哈士奇”:{“钩子”:{“预提交”:“lint-staged”}}
create .lintstagedrc.js
in root folder在根文件夹中创建
.lintstagedrc.js
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint'],
'*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)': ['prettier --write'],
};
It will run eslint to check linting errors and then format your code with prettier.它将运行 eslint 来检查 linting 错误,然后用 prettier 格式化你的代码。
since you are using typescript因为您使用的是 typescript
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
//this will block eslint showing conflicting prettier errors. prettier will handle it
"prettier",
// if eslint-config-prettier version is before 8.0.0, include those two lines, if not exlude
"prettier/@typescript-eslint",
"prettier/react"
],
To use this plugins, install npm i -D eslint-config-prettier
要使用此插件,请安装
npm i -D eslint-config-prettier
Instead of creating a separate file, you could add whose to package.json under scripts:您可以在脚本下将其添加到 package.json 中,而不是创建单独的文件:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint",
"**/*.{js,jsx,json,ts,tsx}": "prettier --write"
},
lint-staged
will lint only the staged files, instead of entire project which would take a lot of time. lint-staged
将仅对暂存文件进行 lint,而不是对整个项目进行 lint,这将花费大量时间。 With "prettier --write", link-staged will correct the files and add them to the staging area使用“prettier --write”,link-staged 将更正文件并将它们添加到暂存区域
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.