[英]Prettier and eslint indents not working together
我托盘设置了我的 vim 基于 typescript 的开发环境,但是缩进管理有问题。
可能 'eslint' 说: indent: Expected indentation of 2 spaces but found 4.
在prettier
的重新格式化后发现 4 个空格。
我的.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 }],
},
}
我的.prettierc
:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
};
根据此 Kai Cataldo 对此GitHub 问题的评论:
ESLint 的缩进规则和 Prettier 的缩进样式不匹配——它们是完全独立的实现,是解决同一问题的两种不同方法(“我们如何在项目中强制执行一致的缩进”)。
因此,在使用prettier
时,最好禁用 eslint 的indent
规则。 保证他们会发生冲突。
在eslintrc
添加indent: [2, 2, { SwitchCase: 1}]
定义的参数
新的 eslint 规则希望第一个参数是一个数字: Severity should be one of the following: 0 = off, 1 = warn, 2 = error
。
缩进量
该对象说明如何在此处的选项之后缩进switch
和case
语句。
这应该修复它https://github.com/prettier/eslint-config-prettier
它禁用 eslint 中与 prettier 冲突的规则
关闭默认的 Visual Studio Code 解析器并只保留 eslint 解析器为我修复了它。
只需转到设置Ctrl/Cmd + ,
,选择User
(全局设置)或Workspace
(仅适用于工作存储库),然后在右上角单击带有旋转箭头的纸张。 这将打开 json 文件中声明的设置。 使用以下设置,它应该适用于任何情况:
{
// other settings
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},
// other settings
}
通常在 Visual Studio Code 窗口的底部有一个Fix on save: X
标志。 这应该与此设置相关联,因此请确保保持一致。
最烦人的事情.. 如此固定: eslint-config-prettier
{
"rules": {
"no-tabs": ["error", {"allowIndentationTabs": true}]
}
}
我遇到了同样的问题。 问题是您可以手动覆盖任何冲突规则。 就我而言,它是 ESLint 的prettier/prettier
的插件,因此可以在所需插件下添加缩进规则来解决。
"rules": {
// "indent":["error",10]
"prettier/prettier":[ //or whatever plugin that is causing the clash
"error",
{
"tabWidth":4
}
]
}
您可以像这样覆盖特定规则,以消除任何冲突。
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"
]
}
在我看来,唯一的冲突是三元运算。 解决此问题的另一种选择是使用以下 eslint 规则。
"indent": ["error", 2, { "offsetTernaryExpressions": true }],
这里有更多的选择: https://eslint.org/docs/latest/rules/indent#offsetternaryexpressions
我发现 eslint 的缩进规则更易于配置,并且会在 prettier 上使用它们。
我遇到了这个问题,通过在设置菜单(ctrl + shift + P)中将 Prettier 更改为使用选项卡,它为我解决了这个问题。
就我而言,我只是在 VSCode 上将CRLF (回车,换行)更改为LF (换行)
因此, npm i --save-dev eslint-config-prettier
解决了Akshay指出的问题
有同样的问题,不使用eslint,解决如下:
npm i tslint-config-prettier --save-dev
tslint.config
:如果尚未添加,请添加:
"extends": ["tslint:recommended", "tslint-config-prettier"],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.