[英]Prettier and eslint indents not working together
I traying setup my vim based typescript developing environment, but have an issue with indent management.我托盘设置了我的 vim 基于 typescript 的开发环境,但是缩进管理有问题。
Probably 'eslint' says: indent: Expected indentation of 2 spaces but found 4.
after prettier
reformat.可能 'eslint' 说:
indent: Expected indentation of 2 spaces but found 4.
在prettier
的重新格式化后发现 4 个空格。
My .eslintrc.js
:我的
.eslintrc.js
:
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
tsx: true, // Allows for the parsing of TSX ???
},
},
rules: {
indent: ['error', 2],
quotes: ['error', 'single'],
semi: ['error', 'never'],
'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
},
}
My .prettierc
:我的
.prettierc
:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
};
As per this Kai Cataldo's comment on this GitHub issue :根据此 Kai Cataldo 对此GitHub 问题的评论:
ESLint's indent rule and Prettier's indentation styles do not match - they're completely separate implementations and are two different approaches to solving the same problem ("how do we enforce consistent indentation in a project").
ESLint 的缩进规则和 Prettier 的缩进样式不匹配——它们是完全独立的实现,是解决同一问题的两种不同方法(“我们如何在项目中强制执行一致的缩进”)。
Therefore, when using prettier
, you'd better disable eslint's indent
rule.因此,在使用
prettier
时,最好禁用 eslint 的indent
规则。 It's guaranteed that they will clash.保证他们会发生冲突。
in eslintrc
add indent: [2, 2, { SwitchCase: 1}]
在
eslintrc
添加indent: [2, 2, { SwitchCase: 1}]
Parameters defined定义的参数
new eslint rules want the first parameter to be a number: Severity should be one of the following: 0 = off, 1 = warn, 2 = error
.新的 eslint 规则希望第一个参数是一个数字:
Severity should be one of the following: 0 = off, 1 = warn, 2 = error
。
the amount of indent缩进量
The object is stating how to indent switch
and case
statements following the options here .该对象说明如何在此处的选项之后缩进
switch
和case
语句。
This should fix it https://github.com/prettier/eslint-config-prettier这应该修复它https://github.com/prettier/eslint-config-prettier
It disables rules in eslint that conflict with prettier它禁用 eslint 中与 prettier 冲突的规则
Turning off default Visual Studio Code parser and just leaving the eslint parser on save fixed it for me.关闭默认的 Visual Studio Code 解析器并只保留 eslint 解析器为我修复了它。
Just go to settings Ctrl/Cmd + ,
, choose User
(global settings) or Workspace
(only for the working repo) and on top right corner click the paper with a turning arrow.只需转到设置
Ctrl/Cmd + ,
,选择User
(全局设置)或Workspace
(仅适用于工作存储库),然后在右上角单击带有旋转箭头的纸张。 That will open the declared settings on a json file.这将打开 json 文件中声明的设置。 With the following settings it should work on any case:
使用以下设置,它应该适用于任何情况:
{
// other settings
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},
// other settings
}
Normally at the bottom of the Visual Studio Code window you have a Fix on save: X
flag.通常在 Visual Studio Code 窗口的底部有一个
Fix on save: X
标志。 That should be linked with this setting so make sure to leave it consistent.这应该与此设置相关联,因此请确保保持一致。
Most annoying thing.. so fixed with: eslint-config-prettier
最烦人的事情.. 如此固定:
eslint-config-prettier
{
"rules": {
"no-tabs": ["error", {"allowIndentationTabs": true}]
}
}
I ran into the same issue.我遇到了同样的问题。 Thing is you can just manually override any clashing rules.
问题是您可以手动覆盖任何冲突规则。 In my case it was the
prettier/prettier
plugin for ESLint, so that can be solved adding the indent rule, under the required plugin.就我而言,它是 ESLint 的
prettier/prettier
的插件,因此可以在所需插件下添加缩进规则来解决。
"rules": {
// "indent":["error",10]
"prettier/prettier":[ //or whatever plugin that is causing the clash
"error",
{
"tabWidth":4
}
]
}
You can override specific rules like this, to get rid of any clashes.您可以像这样覆盖特定规则,以消除任何冲突。
npm i --save-dev eslint-config-prettier
npm i --save-dev eslint-plugin-prettier
//eslintrc.js
{
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"plugin:prettier/recommended"
]
}
It seems on my end, the only conflict is with ternary operations.在我看来,唯一的冲突是三元运算。 Another option to fix the issue is to use the following eslint rule.
解决此问题的另一种选择是使用以下 eslint 规则。
"indent": ["error", 2, { "offsetTernaryExpressions": true }],
There are a lot more options here: https://eslint.org/docs/latest/rules/indent#offsetternaryexpressions这里有更多的选择: https://eslint.org/docs/latest/rules/indent#offsetternaryexpressions
I find eslint's indent rules more configurable and would use them over prettier.我发现 eslint 的缩进规则更易于配置,并且会在 prettier 上使用它们。
我遇到了这个问题,通过在设置菜单(ctrl + shift + P)中将 Prettier 更改为使用选项卡,它为我解决了这个问题。
就我而言,我只是在 VSCode 上将CRLF (回车,换行)更改为LF (换行)
In my case what I did was I removed the indentation rule from the .eslintrc file and added useTabs: true
to my .prettierrc file.在我的例子中,我所做的是从.eslintrc文件中删除了缩进规则,并将
useTabs: true
添加到我的.prettierrc文件中。
After reloading the VS Code it works perfectly with the tab size indentation.重新加载 VS 代码后,它与制表符大小缩进完美配合。
had the same issue, not using eslint, solved like so:有同样的问题,不使用eslint,解决如下:
npm i tslint-config-prettier --save-dev
tslint.config
: Add it if not already added: tslint.config
:如果尚未添加,请添加:
"extends": ["tslint:recommended", "tslint-config-prettier"],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.