[英]Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier
在使用 ESLint 和 Prettier 的 Visual Studio Code 中處理 .vue 文件時,似乎我無法讓 vue/max-attributes-per-line 正確自動修復。
例如,將 vue/max-attributes-per-line 設置為“off”,並且我嘗試手動添加換行符,它會更正它以使每個元素始終位於不超過一行的位置,無論是 81 還是 120 、200 或更多字符寬。 我怎樣才能弄清楚是什么迫使我的標記元素恰好在一行上?
我使用的是 ESLint 5.1.0 版和 Visual Studio Code(沒有 Prettier 擴展),以及 Prettier 1.14.2。
這是 .vue 文件中的示例——當'vue/max-attributes-per-line': 'off'
時,無論我做什么,我都無法在多行上進行。 每次我保存時,它都會強制將一長串標記全部放在一行上。
<template>
<font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>
如果我設置'vue/max-attributes-per-line': 2
,它的格式是這樣的,有一個換行符(這也是完全錯誤的)。
<font-awesome-icon
v-if="statusOptions.icon"
:icon="statusOptions.icon"
:spin="statusOptions.isIconSpin"
:class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>
如果我嘗試手動重新格式化它,它會在我保存時恢復到上述狀態。
此外,當我按下 Ctrl+S 時,它似乎重新格式化了兩次:首先它重新格式化以將其全部放在一行上,然后半秒后格式化上述結果。 有什么想法嗎? 是什么導致了這種奇怪現象——是否有多個重新格式化程序在運行? 我如何弄清楚第一個是什么禁用它?
VS Code 工作區設置:
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"[vue]": {
"editor.tabSize": 2
},
"[csharp]": {
"editor.tabSize": 4
},
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.referencesCodeLens.enabled": true,
"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"vue-html",
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.rulers": [
80,
100
]
}
.eslintrc.js:
module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
jest: true
},
globals: {
expect: true
},
extends: [
'prettier',
'plugin:vue/recommended', // /base, /essential, /strongly-recommended, /recommended
'plugin:prettier/recommended', // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier.
'eslint:recommended'
],
plugins: ['vue', 'prettier'],
rules: {
'vue/max-attributes-per-line': 'off',
'prettier/prettier': [ // customizing prettier rules (not many of them are customizable)
'error',
{
singleQuote: true,
semi: false,
tabWidth: 2
},
],
'no-console': 'off'
}
}
在不更改任何設置的情況下, ESLint --fix
確實正確格式化——將我所有的 .vue 模板元素正確地分成多行。 那么我有什么想法可以讓 VS Code 成型? 上述設置沒有幫助,但我不知如何甚至知道什么是干擾。 有任何想法嗎?
強調一下,當我在 VS Code 中保存時,一個很長的 HTML 元素將折疊為一行,然后在半秒后拆分為兩行,所有這些都來自一次保存操作。 我期待它把它分解成多行。 如果需要多次保存也沒關系,但是第一次保存以及隨后的每次保存都會顯示此行為。
簡短回答:我需要: "editor.formatOnSave": false, "javascript.format.enable": false
。
多虧了Wes Bos 在 Twitter 上的這個帖子,我終於找到了神奇的設置組合。 我懷疑似乎有多個相互沖突的格式化程序是正確的。 雖然我不確定它們到底是什么,但我能夠關閉除 eslint 之外的所有內容,如下所示:
在 VS Code 設置中,我需要:
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true },
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true }
]
在 .eslintrc.js 中,我可以使用原始帖子中的設置,然后根據需要更改“vue/max-attributes-per-line”。 然后 VS Code 的 ESLint 插件將在每次保存時一次一步地格式化代碼,就像 kenjiru 寫的那樣。 最后一個障礙:HMR 不會接受這些更改,所以從頭開始重建。
使用'vue/max-attributes-per-line': 'off'
規則被禁用,因此 VSCode 不會嘗試修復自動保存時的長行。 正如預期的那樣,應用了其他 eslint 修復程序。
使用'vue/max-attributes-per-line': 1
VSCode 每次保存僅修復一個錯誤。 這是vscode-eslint 的一個已知限制
vscode-eslint只執行一次,以將插件生成的編輯量保持在最低限度。 目標是在文件中保留盡可能多的標記(如斷點)。
VSCode 有 1 秒的時間限制,所有插件在保存時計算更改集。 如果其中一個插件導致其他插件連續 3 次無法運行,它將被禁用。
eslint --fix
運行所有規則,直到不再出現 linting 錯誤。 我認為它最多有 10 次迭代的限制。
有關更多詳細信息,請參閱這些鏈接:
我創建了一個最小設置來演示這個問題:
我知道這是舊的,但如果有人發現這個並且在發布的解決方案中沒有成功,我的解決方法是添加:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
由於某種原因,我不需要"editor.formatOnSave": true
。 我沒有安裝 Prettier - 只有 ESLint - 但現在我保存時它會自動執行任何修復。
這是我最終在 VSC settings.json
文件中使用的settings.json
。
非常適合本地設置eslint
禁用默認 vetur 設置(如果安裝了插件)。
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
我試過這些東西,但沒有奏效。
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
但最后我試過了。 並工作"diffEditor.wordWrap": "off"
,
我遇到了同樣的問題,意外地發現 prettier 和 vetur 是矛盾的。 我不得不禁用 vetur 格式化程序,它現在按預期工作。
如果您在編輯器的settings.json
有此部分並且安裝了更漂亮的,
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
},
}
很有可能,這兩個格式化程序是沖突的,因此會出現意外的行為。
一個快速的解決方法是在下面評論它,或者干脆永久刪除它。
{
"[vue]": {
// "editor.defaultFormatter": "octref.vetur",
},
}
我一直在努力解決類似的問題。 我嘗試了上面的解決方案,但不幸的是對我不起作用。 我正在使用 eslint 和 Vetur,沒有安裝更漂亮的插件,而是通過 eslint 配置它並啟用了“eslint.autoFixOnSave”:true。 通過刪除 settings.json 中的以下配置,我終於在保存時獲得了正確的自動格式。 不知道為什么,但它對我有用。
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
如果我遇到與此相關的其他問題,將更新此答案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.