天道酬勤,学无止境

如何解决 eslint(vue/html-closure-bracket-newline) 冲突(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"
    ]
}
  • 应保留多行格式,但右括号应与图像预期的相同。
  • eslint 和 vscode 设置应该没有冲突
  • 需要必要的 vscode 设置。 vue 设置的 eslint 和 eslint 设置此外,每次提交前检查时,sass 文件都不应该受到对齐的影响。
  • 如果 vue、js 和 sass 文件考虑制表符对齐而不是 2 个空格会很好
回答1

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

就是这样,一切都按预期工作。 希望这可以帮助某人。

回答2

您可以将配置更改为此,希望它应该允许您尝试执行的操作:

{
  "vue/html-closing-bracket-newline": ["error", {
    "singleline": "never",
    "multiline": "always"
  }]
}

如果你想阅读更多关于它的信息,请参考这里。

回答3

如果我理解正确,您需要在 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
},

没有其他与此事相关的事情 - 我希望这会有所帮助。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何使用 ES6 语法导入 jquery?(How to import jquery using ES6 syntax?)
    问题 我正在通过babel transpiler 和preset-es2015插件使用(JavaScript) ES6语法编写一个新应用程序,以及样式的semantic-ui 。 索引.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/scripts/jquery.min'; import * as jquery3 from '../node_modules/jquery/dist/jquery.min'; console.log($('my-app')); 索引.html <!DOCTYPE html> <html lang="fr"> <head> <body> <script src="dist/app.js"></script> </body> </html> 项目结构 . ├── app/ │ ├── index.js ├── assets/ ├── dist/ │ ├── scripts/ │ │ ├── jquery.min.js ├── index.html ├── node_modules/ │ ├── jquery/ │ │ ├── dist/ │ │ │ ├── jquery.min.js ├── package.json
  • 如何使用ES6语法导入jquery?(How to import jquery using ES6 syntax?)
    问题 我正在通过babel transpiler, preset-es2015插件以及该样式的semantic-ui使用(JavaScript) ES6语法编写一个新应用。 index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/scripts/jquery.min'; import * as jquery3 from '../node_modules/jquery/dist/jquery.min'; console.log($('my-app')); index.html <!DOCTYPE html> <html lang="fr"> <head> <body> <script src="dist/app.js"></script> </body> </html> 项目结构 . ├── app/ │ ├── index.js ├── assets/ ├── dist/ │ ├── scripts/ │ │ ├── jquery.min.js ├── index.html ├── node_modules/ │ ├── jquery/ │ │ ├── dist/ │ │ │ ├── jquery.min.js ├── package
  • 【面试系列】=>补充 以及ESLint
    专业技能 1.倒排,把最有价值的排到最上面,如Vue、React,微信小程序等应该排前2位,其它往后排 岗位职责 1.开发相关的描述(分析项目需求和产品原型(axure是产品原型工具,墨刀),搭建项目及设计组件,进行相应的业务逻辑编码和接口调用,配合前端组长对项目代码进行优化,提高代码质量) 2.配合测试相关的描述(配合测试修改Bug,配合产品经理(或者UI工程师)对页面进行优化,对用户体验进行优化) 3.对已经上线项目进行相关的维护(包括添加新功能、新页面、修改线上页面细节问题及bug(Bug从哪里来?从项目管理软件中提交的。比如:禅道)) 4.参加各种会议(如项目需求评审会、服务端接口设计评审会议,日常项目管理会议(一般项目增加新功能,改动的业务逻辑过大)) 5.研究学习类工作(难题/关键技术验证、组件库等技术选型、公司公用代码(公司积累的常用功能代码,比如:各种数据验证插件,权限控制,登录,注册)/开发规范(个人的编码风格:css规范,JS规范)等学习改进) 6.非开发其它配合类工作(带新人类工作、配合产品经理画原型,配合产品经理或测试写文档(用接口文档工具生成也行,比如:swaggers)等) 项目 1.注意问题1:应用形态(PC页面、手机内嵌页面(Web App,移动端项目)、微信小程序、公众号等,为啥要做成这种形态?)原因:不同的程序有不同的宿主环境
  • 如何从导入“react”中删除未解决的 ESlint 错误(How to remove ESlint error no-unresolved from importing 'react')
    问题 no-unresolved https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md 安装eslint-import-resolver-webpack 我的.eslintrc配置 { "extends": "airbnb", "rules": { "comma-dangle": ["error", "never"], "semi": ["error", "always"], "react/jsx-filename-extension": 0, "react/prop-types": 0, "react/no-find-dom-node": 0, "jsx-a11y/label-has-for": 0 }, "globals": { "document": true, "window": true }, "env": { "jest": true }, "settings": { "import/resolver": "webpack" } } 我的 package.json { "name": "coinhover", "version": "0.0.1", "main": "index.js", "author": "Leon Gaban",
  • 如何在eslintrc中手动添加要解析的路径(How to manually add a path to be resolved in eslintrc)
    问题 我的项目main目录中有一个文件夹,我正在像模块一样解析它。 例如import x from 'main/src'导入main/src/index.js 。 这是通过 webpack 的解析别名配置完成的。 我遇到的一个问题是通过 eslint 消除错误。 我知道 eslint 提供了一个 webpack 解析插件,但是,我一直无法让它工作。 我怀疑这是因为我在 webpack 2 上并在我的 webpack 配置文件中使用 es6。 是否有手动方法来编写解决设置来为我的 eslint 解决此问题? 我见过的唯一其他 hack 是使用import/core-modules但是我必须列出子目录树main/src/bar 、 main/src/foo中的每个文件夹。 这不会很理想。 回答1 我认为下面的链接可以帮助您。 您可以使用 config 添加解析目录。 https://github.com/benmosher/eslint-plugin-import#resolvers 例如,如果你想解析src/ ,你可以在.eslintrc上写如下。 { "settings": { "import/resolver": { "node": { "paths": ["src"] } } } } 然后 ESLint 从 src 目录解析。 你可以通过编写const moge =
  • 如何解决 eslint import/no-named-as-default(How do I resolve eslint import/no-named-as-default)
    问题 在查看了 import/no-named-as-default eslint 规则的文档后,我仍然对我到底做错了什么感到困惑。 我有以下文件结构 . ├── ButtonBack.css ├── ButtonBack.jsx ├── __tests__ │ └── ButtonBack.test.jsx └── index.js ButtonBack.jsx 包含以下代码 import React from 'react'; import PropTypes from 'prop-types'; export default class ButtonBack extends React.Component { ... code removed to keep example short ... } __tests__/ButtonBack.test.jsx 包含以下代码 import React from 'react'; import { shallow } from 'enzyme'; import ButtonBack from '../ButtonBack'; // <== this line has an eslint warning ... code removed to keep example short ... 问题是,我import ButtonBack
  • 如何解决代码格式化和eslint冲突问题
    1.创建一个.prettierrc文件 2.在文件中输入以下内容 { "semi": false, "singleQuote": true } 第一行表示在语句末尾不打印分号 第二行表示使用单引号 来源:https://blog.csdn.net/weixin_43706664/article/details/104345009
  • 如何解决 @typescript-eslint/no-var-requires 错误。 添加@axe-core/react 时出错(How to resolve @typescript-eslint/no-var-requires error. Error while adding @axe-core/react)
    问题 我通过以下方式将axe-core/react添加到我的项目中: npm install --save-dev @axe-core/react 现在我在index.tsx 中添加了以下代码以启动并运行: if (process.env.NODE_ENV !== 'production') { const axe = require('@axe-core/react'); axe(React, ReactDOM, 1000); } 现在,如果我导航到 localhost,该页面会显示编译错误并显示以下消息: src\index.tsx Line 14:17: Require statement not part of import statement @typescript-eslint/no-var-requires 行发生此错误: const axe = require('@axe-core/react'); 否则我如何导入它? PS:我尝试做类似的事情: import foo = require("foo") 但仍然没有运气。 回答1 更换线路 const axe = require('@axe-core/react'); 和 import axe from '@axe-core/react'; 解决了我的问题。
  • react-native 无法解析模块“warnOnce”(react-native Unable to resolve module 'warnOnce')
    问题 我的英语有点生疏,我很抱歉。 当我在 iOS 模拟器上启动 react-native 项目时出现错误。 为了排除与我的代码的任何冲突,我开始了一个新项目 react-native init demo react-native start react-native run-ios --simulator="iPhone 6" 现在是当我收到消息错误时 Loading dependency graph, done. error: bundling failed: Error: Unable to resolve module `warnOnce` from `node_modules/react-native/Libraries/react-native/react-native-implementation.js`: warnOnce could not be found within the project. If you are sure the module exists, try these steps: 1. Clear watchman watches: watchman watch-del-all 2. Delete node_modules: rm -rf node_modules and run yarn install 3. Reset Metro's
  • Prettier + Airbnb 的 ESLint 配置(Prettier + Airbnb's ESLint config)
    问题 最近,我开始在我的编辑器中使用 Visual Studio Code,并找到了 Prettier - JavaScript 格式化程序。 我认为这是一个很棒的插件,因为它可以帮助我保持代码的美观。 我设置了 Airbnb 的 ESLint 配置,发现它非常有用。 这是问题所在。 我目前运行的 Airbnb ESLint 配置与 Prettier 不兼容。 例如,对于 JavaScript 字符串,Prettier 被格式化为包含双刻度和 Airbnb 的 ESLint,就像单刻度一样。 当我使用 Prettier 格式化代码时,Airbnb 的 ESLint 不同意。 我知道 Kent Dodds 已经用 ESLint 配置做了一些工作,其中包括这里的例子。 但我似乎找不到一个解决方案,让我使用 Prettier 的魔力将我的代码格式化为 Airbnb 的 ESLint。 回答1 我认为 eslint-config-prettier 就是为此目的而创建的:https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules 基本上它会关闭所有与代码样式有关的规则,因为prettier无论如何都会处理它。 因此,您只需将此配置与任何其他所需的 eslint 配置(如eslint-config
  • 自定义 ESLint 规则中的异步代码(Asynchronous code in custom ESLint rules)
    问题 故事和动机: 我们有一个相当庞大的端到端量角器测试代码库。 有时,测试会等待特定修复的实施——通常作为 TDD 方法的一部分,并演示如何重现问题以及预期行为是什么。 我们目前正在做的是使用 Jasmine 的pending() ,里面有一个 Jira 问题号。 例子: pending("Missing functionality (AP-1234)", function () { // some testing is done here }); 现在,我们想知道什么时候可以将pending()重命名为it()并运行测试。 或者,换句话说,当问题AP-1234得到解决或发送到测试时。 目前的方法: 目前,我正在尝试使用自定义 ESLint 规则、jira NodeJS 模块和 Q 来解决它。自定义ESLint规则搜索具有至少一个参数的pending()调用。 以AP-后跟 4 位数的格式提取票号,并使用jira.findIssue()检查其在 Jira 中的状态。 如果状态为Resolved - 报告错误。 这是我到目前为止所得到的: "use strict"; var JiraApi = require("jira").JiraApi, Q = require('q'); var jira = new JiraApi("https", "jira.url.com", "443
  • vscode自动格式化不符合eslint_vscode 格式化代码 与 eslint 有冲突的问题解决
    项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致。然后在配置中加了配置也无效(File - Preference - Setting) 查了下原因是在vue开发的时候我们一般都安装了Vetur的插件来对.vue格式的文件进行处理,Vetur自带了格式化,规范就是使用prettier 这时候装prettier插件,并且在设置或setting.json里配置了prettier的话是无效的 解决方法:在setting.json中加入下面的配置就可以了 { "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true }, "wrap_attributes": "force-aligned" }, "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html" } 但是这个时候会发现vue文件是可以了,可以js文件还是无效,找到以下方法解决之: 1
  • vscode 格式化代码 与 eslint 有冲突的问题解决
    vscode 格式化代码 与 eslint 有冲突的问题解决 参考文章: (1)vscode 格式化代码 与 eslint 有冲突的问题解决 (2)https://www.cnblogs.com/webhmy/p/12060651.html 备忘一下。 来源:https://blog.csdn.net/w36680130/article/details/112225699
  • 更漂亮/VSCode Eslint 奇怪的格式/语法破坏错误(Prettier/VSCode Eslint weird format/syntax breaking bug)
    问题 有时当我启动 VSCode 并保存一个 JS 文件时,一切都会变得一团糟。 例子 从: 到: 在保存 我发现了什么: 当我更改 VSCode 用户设置(与 prettier 插件相关的内容 | 任何内容(我通常更改 prettier.eslintIntegration 但可能是设置中的任何更改都可以解决它))时,它会在保存时停止中断。 可能的相关环境细节 // Part of .eslintrc { parser: 'babel-eslint', extends: ['airbnb', 'prettier'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error' } ... } // .prettierrc.yml printWidth: 80 tabWidth: 4 useTabs: false semi: false singleQuote: true trailingComma: es5 bracketSpacing: true jsxBracketSameLine: false arrowParens: always // Part of my VSCode 'User Settings' file "javascript.format.enable": false, "javascript
  • Vue项目使用Vscode编辑,配置Eslint检查以及使用代码格式化工具之间的各种冲突、各种爱恨情仇的终极解决办法。
    vscode来编码vue前端项目的时候,我们像用eslint来做代码规范检查,配合一些代码格式化工具,能够让我们编写代码爽歪歪。 但是,这其中的配置,搭配,是个坑,大坑。 搞了一大圈,各种说法都有,各种配置都有,整个人都不好了。 特此记录一下正确的解决办法。 方案一:Eslint + prettier + stylelint方案 大体可以参考:http://www.imooc.com/article/details/id/292407【vue项目整合Eslint和stylelint规范代码】 安装依赖: npm install eslint eslint-plugin-vue --save-dev 根目录创建文件.eslintrc.js 内部内容,后面。 有些目录,忽略eslint校验的配置 建一个.eslintignore文件,内容: /build/ /config/ /dist/ /*.js /test/unit/coverage/ stylelint配置累帮助格式化css的代码,统一风格 npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin 在根目录新建.stylelintrc.js配置如下: module.exports = { extends: "stylelint-config
  • VSCode保存时自动格式化代码(复制即用)
    Vue项目保存自动根据eslint格式化代码 保存自动根据eslint格式化代码新版保存自动按eslint格式化代码新版配置(当前版本ESLint2.18)旧版配置 保存自动格式化代码(没有eslint配置文件时)配置解读(基于上面的配置)Eslint 和 Prettier 的区别EslintPrettier vue 文件格式化配置(Vetur 配置)解决vue 文件和 html 文件,没有 eslint 风格提示。function () (eslint 推荐)和 function() (prettier 推荐) 的风格冲突问题 保存自动根据eslint格式化代码 编辑器 Visual Studio Code(VS code)插件 eslint 和 vetur用户配置 文件 -> 首选项 -> 设置 settings.json { // 主题颜色 浅色主题 看个人喜好 "workbench.colorTheme": "Solarized Light", "eslint.autoFixOnSave": true, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", { "language": "html", "autoFix": true }, {
  • eslint项目配置——Typescript
    非 react 项目的 eslint 配置 { //是否针对根目录进行检测 "root": true, //指定代码运行的寄主环境 "env": { //防止__dirname不能识别的错误 "node": true, //自动启用es6语法和ES6全局变量 "es6": true }, //继承的配置 "extends": [ // airbnb基础版,不针对react的jsx语法检测 "airbnb-base/legacy", // 启用eslint推荐的规则 "eslint:recommended", // typescript-eslint插件的检验规则 "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "ignorePatterns": ["node_modules/"], "rules": { // 强制数组方法的回调函数中有 return 语句 "array-callback-return": "error", // 不能使用++运算 "no-plusplus": "off", // 不能出现相同的case "no-duplicate-case": "error", // 操作符换行风格
  • Delete `,` 怎么解决(vue eslint与prettier冲突)
    最近又来了一个急项目,之前的项目基础上改版,开始用的是webStrome,最近半年换了vsCode,导致老项目在Vscode下报这个错,由于项目已经很庞大,编译+提示要费时近10秒,百度了一下eslint,发现解决不了这个问题,项目实在是太赶,这个就先放着。 使用formate document的时候会默认带上逗号,执行yarn lint --fix会删除逗号,我的习惯是写一段代码后会格式化一下,这样编译就很慢了,提交文件前又要lint后提交很麻烦,按照官方的说明是没有设置prettier导致体验不一致,解决办法是在项目根目录下面添加一个.prettierrc文件,内容如下(内容可以为空对象) { "semi": true, //结尾加分号 老项目默认配置 "singleQuote": false //双引号 老项目默认配置 } 来源:https://blog.csdn.net/qq_27175079/article/details/105628171
  • 常用解决eslint和格式化冲突问题(vue)
    .eslintrc.js文件修改 module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-trailing-spaces': 'off', indent: 'off', 'spaced-comment': 'off', 'no-trailing-spaces': 'off', 'no-new': 'off', 'key-spacing': 'off', 'comma-dangle': 'off', 'eol-last': 'off', quotes: 'off', semi: 'off', 'keyword-spacing': 'off', 'space-before-blocks': 'off'
  • 如何修复 Npm 缺少对等依赖项(How to fix Npm missing peer dependency)
    问题 我不知道如何修复以下对等依赖错误。 mondwan@mondwan-All-Series:~/Documents/git/py-cli_build_tools$ sudo npm -g list | grep eslint ├─┬ babel-eslint@7.1.1 ├─┬ eslint@3.12.2 ├─┬ eslint-config-airbnb@13.0.0 │ └── eslint-config-airbnb-base@10.0.1 ├─┬ eslint-config-eslint@3.0.0 ├─┬ eslint-plugin-import@2.2.0 │ ├─┬ eslint-import-resolver-node@0.2.3 │ ├─┬ eslint-module-utils@2.0.0 ├─┬ UNMET PEER DEPENDENCY eslint-plugin-jsx-a11y@3.0.2 ├─┬ eslint-plugin-react@6.8.0 npm ERR! peer dep missing: eslint-plugin-jsx-a11y@^2.2.3, required by eslint-config-airbnb@13.0.0 如您所见,我已经安装了eslint-plugin-jsx-a11y@3.0.2这绝对满足^2.2.3要求