[英]How to resolve eslint(vue/html-closing-bracket-newline) conflict
保存時，VSCode 正在修復 eslint 正在修復所有規則。 如何解決以下沖突？
預期縮進
意外縮進
正在使用的 VScode 插件：
[
"formulahendry.auto-close-tag",
"msjsdiag.debugger-for-chrome",
"hookyqr.beautify",
"mikestead.dotenv",
"dbaeumer.vscode-eslint",
"donjayamanne.githistory",
"eamodio.gitlens",
"sidthesloth.html5-boilerplate",
"ecmel.vscode-html-css",
"abusaidm.html-snippets",
"wix.vscode-import-cost",
"lonefy.vscode-js-css-html-formatter",
"eg2.vscode-npm-script",
"christian-kohler.npm-intellisense",
"sibiraj-s.vscode-scss-formatter",
"octref.vetur",
"blanu.vscode-styled-jsx",
"jcbuisson.vue",
"hollowtree.vue-snippets",
"wscats.vue",
"sdras.vue-vscode-snippets",
"dariofuzinato.vue-peek",
]
錯誤
這是正在使用的配置：
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'never'
}
],
'indent': ['error', 2],
'vue/html-indent': ['error', 2],
'vue/script-indent': ['error', 2],
'vue/multiline-html-element-content-newline': 0
VSCode 設置
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true
},
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "jade",
"edge": "html"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
"*.js": "javascriptreact"
},
"editor.fontSize": 14,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"search.exclude": {
"**/.git": true,
"**/node_modules": true,
"**/bower_components": true,
"**/tmp": true,
"**/.bin": true,
"**/.next": true,
"**/__snapshots__/**": true,
"**/coverage/**": true,
"**/report/**": true
},
"javascript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"files.exclude": {
".next": true,
"*.log": true,
"**/__pycache__": true,
"**/node_modules": true,
"**/o": true,
"dist": true,
"geckodriver.log": true,
"package-lock.json": true,
"yarn.lock": true
},
"window.zoomLevel": 1,
"editor.find.globalFindClipboard": true,
"editor.fontLigatures": true,
"editor.formatOnType": true,
"team.showWelcomeMessage": false,
"git.autofetch": true,
"workbench.startupEditor": "newUntitledFile",
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
"launch": {},
"workbench.colorCustomizations": {},
"javascript.validate.enable": true,
"javascript.suggestionActions.enabled": false,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"prettier.disableLanguages": [],
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]
}
4 個空格/制表符是一種痛苦，也是一個修復的挑戰。 因此，堅持使用 2 個空間，並在設置中進行少量更改以符合我的要求。
.vscode/settings.json
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 4,
"editor.insertSpaces": true
},
"[vue]": {
"editor.tabSize": 4,
"editor.insertSpaces": true
},
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "jade",
"edge": "html"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
"*.js": "javascriptreact"
},
"editor.fontSize": 14,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"search.exclude": {
"**/.git": true,
"**/node_modules": true,
"**/bower_components": true,
"**/tmp": true,
"**/.bin": true,
"**/.next": true,
"**/__snapshots__/**": true,
"**/coverage/**": true,
"**/report/**": true
},
"javascript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"files.exclude": {
".next": true,
"*.log": true,
"**/__pycache__": true,
"**/node_modules": true,
"**/o": true,
"dist": true,
"geckodriver.log": true,
"package-lock.json": true,
"yarn.lock": true
},
"window.zoomLevel": 1,
"editor.find.globalFindClipboard": true,
"editor.fontLigatures": true,
"editor.formatOnType": true,
"team.showWelcomeMessage": false,
"git.autofetch": true,
"workbench.startupEditor": "newUntitledFile",
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
"launch": {},
"workbench.colorCustomizations": {},
"javascript.validate.enable": true,
"javascript.suggestionActions.enabled": false,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"prettier.disableLanguages": [],
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"vetur.validation.template": true,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 100, // No line exceeds 100 characters
"singleQuote": false // Prefer double quotes over single quotes
}
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
"eslint.options": {
"extensions": [".js", ".vue"]
},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue"
]
}
package.json devDependencies
"devDependencies": {
"@vue/cli-plugin-babel": "4.2.3",
"@vue/cli-plugin-eslint": "^4.3.1",
"@vue/cli-plugin-router": "4.2.3",
"@vue/cli-service": "4.2.3",
"@vue/eslint-config-prettier": "6.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-import": "0.13.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-es-beautifier": "^1.0.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-modules": "^1.1.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-prettier-vue": "^2.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"express": "^4.17.1",
"fibers": "4.0.2",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"husky": "^4.2.5",
"jest": "^25.4.0",
"jest-sonar-reporter": "^2.0.0",
"json-server": "^0.16.1",
"node-sass": "4.13.1",
"nodemon": "^2.0.3",
"pretty-quick": "^2.0.1",
"sass": "1.26.3",
"sass-loader": "^8.0.2",
"vue-jest": "^3.0.5",
"vue-template-compiler": "2.6.11"
},
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
jest: true
},
extends: ['plugin:vue/essential', '@vue/standard'],
rules: {
quotes: [
2,
'single',
{
avoidEscape: true
}
],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-unused-vars': [
'error',
{
vars: 'all',
varsIgnorePattern: 'css',
args: 'all'
}
],
'no-use-before-define': [
'error',
{
functions: false,
classes: true
}
],
'no-var': 'error',
'prefer-const': 2,
eqeqeq: [
'error',
'always',
{
null: 'ignore'
}
],
'no-array-constructor': 'error',
'no-new-object': 'error',
'no-bitwise': 'error',
'no-redeclare': 2,
'no-proto': 2,
'no-invalid-regexp': 2,
'vue/script-indent': ['error', 2],
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'always'
}
],
'space-before-function-paren': [2, 'never'],
'no-new': 0,
'no-implied-eval': 0,
'handle-callback-err': 0,
'no-extend-native': 0,
indent: ['error', 2, { SwitchCase: 1 }],
semi: [2, 'always'],
'vue/html-indent': [
'error',
2,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: ['pre', 'textarea', 'span']
}
],
'no-tabs': 0,
'vue/singleline-html-element-content-newline': [
'error',
{
ignoreWhenNoAttributes: true,
ignoreWhenEmpty: true,
ignores: ['pre', 'textarea', 'span']
}
]
},
parserOptions: {
parser: 'babel-eslint'
},
globals: {
console: true,
alert: true,
document: true,
__dirname: true,
require: true,
window: true,
process: true,
module: true,
define: true,
_: true,
Promise: true,
setTimeout: true,
clearTimeout: true,
mount: true,
clearInterval: true,
setInterval: true,
$: false,
MutationObserver: false,
Map: false,
localStorage: true
}
};
.prettierrc.js
module.exports = {
singleQuote: true,
tabWidth: 2
};
.jshintrc
{
"esversion": 9
}
.editorconfig
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
就是這樣，一切都按預期工作。 希望這可以幫助某人。
您可以將配置更改為此，希望它應該允許您嘗試執行的操作：
{
"vue/html-closing-bracket-newline": ["error", {
"singleline": "never",
"multiline": "always"
}]
}
如果您想了解更多有關它的信息，請參閱此。
如果我理解正確，您需要在您的 eslint 擴展中使用：
extends: [
'plugin:vue/recommended',
'@vue/standard',
]
它幾乎擁有你需要的所有東西來進行合理的格式化。
請記住，您必須安裝它們
我的 vs-code 設置只有默認的格式化程序
"vetur.format.defaultFormatter.html": "js-beautify-html",
...
"editor.formatOnSave": true,
...
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
與此事無關 - 我希望這會有所幫助。
錯誤在結束括號前預期有 1 個換行符，但沒有換行符\\找到 vue/html-closure-bracket-newline
[英]error Expected 1 line break before closing bracket, but no line breaks\ found vue/html-closing-bracket-newline
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.