如何解决我无法在Vue / nuxt项目中更漂亮,更随意地演奏
我对ESLint和更漂亮的东西一直有疑问。现在,发生了几次,因为它们的规则相互冲突,保存其中一个的自动格式化会在另一个上引发错误。
此刻我的问题是该行,该行已由ESLint格式化:
<v-card outlined min-width="105" :style="{ backgroundColor: cCodeWaterTemp }">
然后更漂亮的人抛出此错误:
88:16 error Replace `·outlined·min-width="105"·:style="{·backgroundColor:·cCodeWaterTemp·}"` with `⏎··········outlined⏎··········min-width="105"⏎··········:style="{·backgroundColor:·cCodeWaterTemp·}"⏎········` prettier/prettier
基本上是说我应该将其更改为这种格式
<v-card
outlined
min-width="105"
:style="{ backgroundColor: cCodeWaterTemp }"
>
随后将在保存时再次更改哪个ESLint。如何配置它们以具有一致的,无冲突的规则?我浏览了一些教程,此刻我的配置文件如下所示:
Settings.json:
{
"window.zoomLevel": 0,"vetur.validation.template": false,"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},"editor.formatOnSave": true,"vetur.completion.scaffoldSnippetSources": {
"workspace": "","user": "","vetur": ""
},"prettier.useTabs": true,"prettier.tabWidth": 4,"git.autofetch": true,"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true
},"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
eslintrc.js:
module.exports = {
root: true,env: {
node: true,browser: true,},rules: {
'vue/component-name-in-template-casing': ['error','PascalCase'],'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',globals: {
$nuxt: true,parserOptions: {
parser: 'babel-eslint',extends: [
'plugin:vue/recommended','eslint:recommended','prettier/vue','plugin:prettier/recommended','prettier',],}},parserOptions: {
parser: 'babel-eslint',extends: [
'plugin:vue/recommended',}
和editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
{
"editor.formatOnSave": false,"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
}
任何帮助都将受到欢迎! 干杯
解决方法
这对我来说是最好的方式。 这也适用于热重载。
在nuxt.config.js
中添加
buildModules: [
...,['@nuxtjs/eslint-module',{fix: true}]
],
,
万一有人绊脚石寻找答案,我现在已经弄清楚了。我读到eslint中的“扩展”部分应该是最后一个,因此其中的任何规则都不会被覆盖。此外,我需要教eslint有关vue和更漂亮的一些技巧,这会导致此eslint文件:
module.exports = {
root: true,env: {
node: true,browser: true,},rules: {
'vue/component-name-in-template-casing': ['error','PascalCase'],'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',globals: {
$nuxt: true,parserOptions: {
parser: 'babel-eslint',extends: [
'plugin:vue/recommended','eslint:recommended','prettier/vue','plugin:prettier/recommended','prettier','plugin:vue/base',],}
现在我只需要告诉编辑者他可以在保存(.editorconfig)时更正代码:
{
"editor.formatOnSave": false,"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
然后我们开始。他们暂时表现不错。我发现这些页面有很大帮助:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。