- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
保存时,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
就是这样,一切都按预期工作。希望这对某人有所帮助。
关于javascript - 如何解决 eslint(vue/html-closing-bracket-newline) 冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61715509/
@Cacheable在同一类中方法调用无效 上述图片中,同一个类中genLiveBullets()方法调用同类中的queryLiveByRoom()方法,这样即便标识了Cacheable标签,
目录 @Transaction注解导致动态切换更改数据库失效 使用场景 遇到问题 解决 @Transaction
@RequestBody不能class类型匹配 在首次第一次尝试使用@RequestBody注解 开始加载字符串使用post提交(貌似只能post),加Json数据格式传输的时候,
目录 @Autowired注入static接口问题 @Autowired自动注入普通service很方便 但是如果注入static修饰的serv
目录 @RequestBody部分属性丢失 问题描述 JavaBean实现 Controller实现
目录 解决@PathVariable参数接收不完整的问题 今天遇到的问题是: 解决办法: @PathVariable接受的参
这几天在项目里面发现我使用@Transactional注解事务之后,抛了异常居然不回滚。后来终于找到了原因。 如果你也出现了这种情况,可以从下面开始排查。 1、特性 先来了解一下@Trans
概述: ? 1
场景: 在处理定时任务时,由于这几个方法都是静态方法,在aop的切面中使用@Around注解,进行监控方法调用是否有异常。 发现aop没有生效。 代码如下:
最近做项目的时候 用户提出要上传大图片 一张图片有可能十几兆 本来用的第三方的上传控件 有限制图片上传大小的设置 以前设置的是2M&nb
我已经实现了这个SCIM reference code在我们的应用程序中。 我实现的代码确实通过了此postman link中存在的所有用户测试集合。 。我的 SCIM Api 也被 Azure 接受
我一直对“然后”不被等待的行为感到困扰,我明白其原因。然而,我仍然需要绕过它。这是我的用例。 doWork(family) { return doWork1(family)
我正在尝试查找 channel 中的消息是否仍然存在,但是,我不确定如何解决 promise ,查看其他答案和文档,我可以看到它可能是通过函数实现的,但我是不完全确定如何去做。我希望能在这方面获得一些
我有以下情况: 同一工作区中的 2 个 Eclipse 项目:Apa 和 Bepa(为简洁起见,使用化名)。 Apa 项目引用(包括)Bepa 项目。 我在 Bepa 有一个类 X,具有公共(publ
这个问题已经有答案了: Why am I getting a NoClassDefFoundError in Java? (31 个回答) 已关闭 6 年前。 我正在努力学习 spring。所以我输入
我正在写一个小游戏,屏幕上有许多圆圈在移动。 我在两个线程中管理圈子,如下所示: public void run() { int stepCount = 0; int dx;
我在使用 Sympy 求解方程时遇到问题。当我运行代码时,例如: 打印(校正(10)) 我希望它打印一个数字 f。相反,它给我错误:执行中止。 def correction(r): from
好吧,我制作的每个页面都有这个问题。我不确定我做错了什么,但我所有的页面都不适用于所有分辨率。可能是因为我使用的是宽屏?大声笑我不确定,但在小于宽屏分辨率的情况下,它永远不会看起来正确。它的某些部分你
我正在尝试像这样进行一个非常简单的文化 srting 检查 if(culture.ToUpper() == "ES-ES" || "IT-IT") { //do something } else
Closed. This question is off-topic. It is not currently accepting answers. Learn more。 想改进这个问题吗?Upda
我是一名优秀的程序员,十分优秀!