eslint 使用单引号,Prettier使用双引号冲突
这个问题是因为ESLint和Prettier在字符串引号风格上有所差异化,ESLint推荐使用单引号'
,而Prettier推荐使用双引号"
。当这两个工具配合使用时,可能会产生冲突。
解决方法:
- 在
.eslintrc
或.eslintrc.js
文件中,你可以配置ESLint的quotes
规则来遵守Prettier的引号风格。
rules: {
// 其他规则...
quotes: [
'error',
'backtick',
{ avoidEscape: true, allowTemplateLiterals: true }
]
}
- 在
package.json
中,你可以通过eslintConfig
部分覆盖ESLint的规则。
{
// 其他配置...
"eslintConfig": {
"rules": {
"quotes": ["error", "double"]
}
}
}
- 如果你想使用Prettier的规则并让ESLint适应它,你可以在
.prettierrc
或prettier.config.js
中设置。
{
"singleQuote": false,
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"useTabs": false,
// 其他配置...
}
- 在
.prettierrc
或prettier.config.js
中设置singleQuote
为true
,这将使Prettier使用单引号。 - 如果你想要在项目中统一使用单引号,可以在ESLint规则中将
quotes
设置为['error', 'single']
,并在Prettier配置中设置singleQuote
为true
。 - 确保Prettier的配置优先级高于ESLint的配置,可以在项目根目录下创建
.prettierrc
文件,然后在.eslintrc
中添加如下配置:
{
"extends": ["plugin:prettier/recommended"]
}
这样,Prettier的配置将会覆盖ESLint的quotes
规则。
- 如果你使用的是VSCode编辑器,可以安装Prettier - Code formatter和ESLint插件,并在设置中配置他们的工作方式,如在保存时自动格式化代码。
总结,解决这个问题的关键是让ESLint和Prettier的配置保持一致,并优先遵守Prettier的规则。
评论已关闭