VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突

千千梦丶琪  金牌会员 | 2024-6-14 23:27:30 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 656|帖子 656|积分 1968

VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突

近来在做vue项目，需要配置代码规范，看了网上很多的配置案例，发现如出一辙，都有问题，不是Eslint冲突就是Vetur冲突，最后查阅官方文档解决这次问题，注：本案例通用Vscode配置setting.json
起首给出官方文档地址，按照官方文档说明编写项目的配置文件以及vscode的setting.json文件，链接如下：
Eslint:  https://eslint.vuejs.org/rules/
根据需要配置.eslintrc.cjs
Prettier: https://prettier.io/docs/en/options
根据需要配置.eslintrc.cjs
Vetur: https://vuejs.github.io/vetur/guide/formatting.html#formatters
Vetur需要在VsCode的setting.json中配置
本次案例主要解决Eslint和Vetur自动保存后多属性换行冲突问题，其他问题也可参考这个配置
Eslint文档查看和修改规则：

以官方文档为主，因为Eslint检测到Vetur自动保存后属性换行报错，修改Prettier无济于事，于是想到查看官方文档，搜索如下：
step1：起首快速欣赏下规则简要

在这里插入代码片

setp2: ctrl+F 搜索你要配置规则的英文名，比方attribute

最后找到这两个规则：
‘vue/first-attribute-linebreak’:
‘vue/html-closing-bracket-newline’:
利用Edge翻译后意思很明白，官方文档也给出了示例，如下图所示：


setp3: 修改配置文件

  1. 'vue/first-attribute-linebreak': [
  2.       'error',
  3.       {
  4.         singleline: 'ignore',
  5.         multiline: 'ignore',
  6.       },
  7.     ],
  8.     'vue/html-closing-bracket-newline': [
  9.       'error',
  10.       {
  11.         singleline: 'never',
  12.         multiline: 'always',
  13.         selfClosingTag: {
  14.           singleline: 'never',
  15.           multiline: 'always',
  16.         },
  17.       },
  18.     ],
复制代码
将这两个规则插入到.eslintrc.cjs，这样VsCode可以屏蔽属性换行和标签换行的规范检测
Prettier修改项目配置文件和Vscode设置

step1: 查看官方文档：


主要看options这一栏,明白规则的详情后，我们就知道如何配置Vscode和项目中的.prettierrc.json 文件
setp2: 修改配置文件

这里建议先修改vscode的setting.json，将官方Options中建议的设置添加上去。快捷键Ctrl+shift+P

我选的是打开用户设置，针对当前用户有效
这里给出我自己的设置项： （部门修改prettier的默认项）
  1.   //====== prettier格式化,能使每一种语言默认格式化规则 ======
  2.   "editor.defaultFormatter": "esbenp.prettier-vscode",
  3.   "eslint.alwaysShowStatus": true, // 总是显示eslint状态
  4.   "prettier.printWidth": 120, // 超过最大值换行
  5.   "prettier.tabWidth": 2, // 缩进字节数
  6.   "prettier.useTabs": false, // 缩进不使用tab，使用空格
  7.   "prettier.semi": false, // 句尾添加分号
  8.   "prettier.singleQuote": true, // 使用单引号代替双引号
  9.   "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  10.   "prettier.arrowParens": "always", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  11.   "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  12.   "prettier.endOfLine": "lf", // 结尾是 \n \r \n\r auto
  13.   // "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  14.   "prettier.htmlWhitespaceSensitivity": "ignore",
  15.   "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  16.   "prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行 true--不会单独占一行，false--折行
  17.   "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  18.   // "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  19.   "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  20.   // "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  21.   "prettier.trailingComma": "all", // 属性值es5表示在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  22.   "prettier.vueIndentScriptAndStyle": false,
  23.   "prettier.singleAttributePerLine": false,
  24.   // "prettier.tslintIntegration": false,
  25.   "notebook.codeActionsOnSave": {}, // 不让prettier使用tslint的代码格式进行校验
复制代码
以上配置可以在.prettierrc.json中添加，但是没须要，只需要给出你想覆盖的几项就可以，一般脚手架会自动填充几项，我自己手动添加printWidth和sigleAttributePerLine
.prettierrc.json
  1. {
  2.   "printWidth": 120,
  3.   "singleQuote": true,
  4.   "semi": false,
  5.   "bracketSpacing": true,
  6.   "htmlWhitespaceSensitivity": "ignore",
  7.   "endOfLine": "auto",
  8.   "trailingComma": "all",
  9.   "tabWidth": 2,
  10.   "singleAttributePerLine": false
  11. }
复制代码
如果你配置了Vscode的自动保存设置，项目会优先读取工程的prettier设置，然后才是vscode的设置来对代码格式化
Vetur的Vscode配置

该步调比较关键，是解决Vetur和prettier格式化代码冲突的问题所在，能影响到Eslint语法查抄
setp1：Vetur官方文档

猛烈建议阅读Formatting栏，具体内容不做描述

setp2: 配置Vetur

先在setting.json中添加vetur的默认配置：
  1. {
  2.   "vetur.format.defaultFormatter.html": "prettier",
  3.   "vetur.format.defaultFormatter.pug": "prettier",
  4.   "vetur.format.defaultFormatter.css": "prettier",
  5.   "vetur.format.defaultFormatter.postcss": "prettier",
  6.   "vetur.format.defaultFormatter.scss": "prettier",
  7.   "vetur.format.defaultFormatter.less": "prettier",
  8.   "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  9.   "vetur.format.defaultFormatter.js": "prettier",
  10.   "vetur.format.defaultFormatter.ts": "prettier",
  11.   "vetur.format.defaultFormatter.sass": "sass-formatter"
  12. }
复制代码
然后修改vetur的默认格式化操作：
比方：
  1. "vetur.format.defaultFormatterOptions": {
  2. “js-beautify-html”: {
  4. },
  5. "prettyhtml": {
  7. },
  8.   "prettier": {
  9.     // Prettier option here
  10.     "semi": false
  11.   }
  12.   
  13. }
复制代码
注意：


  • 1.prettyhtml已经弃用了，可以不消配置
  • 2.prettier配置表示vetur格式化会按照prettier规则进行格式化，前提是本地没有提供.prettiercs.json文件，具体查看官方文档说明
  • 3.js-beautify-html很关键，vetur和prettier以及eslint格式化产生冲突，缘故原由是在一项默认配置中
    “vetur.format.defaultFormatter.html”: “prettier”, 这个参数可以写成js-beautify-html。
改成“js-beautify-html”之后， vetur按照js-beautify-html的规则进行格式化，导致eslint检测非常。如何解决： 一本万利，直接用prettier。如果对峙使用js-beautify-html，要确保js-beautify-html的配置项不被Eslint告诫，这是关键，如果因为js-beautify-html自动格式化后被Eslint告诫，可以配置项目中的Eslint规则。
怎么查看js-beautify-html的默认配置项 ，官方文档表明了，阅读git-hub的源代码：

将这个默认配置值复制到vscode中，如下：
  1.   "vetur.format.defaultFormatterOptions": {
  2.     "js-beautify-html": {
  3.       "end_with_newline": false, // End output with newline
  4.       "indent_char": " ", // Indentation character
  5.       "indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
  6.       "indent_inner_html": false, // Indent <head> and <body> sections
  7.       "indent_scripts": "keep", // [keep|separate|normal]
  8.       "indent_size": 2, // Indentation size
  9.       "indent_with_tabs": false,
  10.       "max_preserve_newlines": 1, // Maximum number of line breaks to be preserved in one chunk (0 disables)
  11.       "preserve_newlines": true, // Whether existing line breaks before elements should be preserved
  12.       "unformatted": [], // Tags that shouldn't be formatted. Causes mis-alignment
  13.       "wrap_line_length": 120, // Lines should wrap at next opportunity after this number of characters (0 disables)
  14.       "wrap_attributes": "auto"
  15.       // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
  16.     },
  17.     }
复制代码
此中我们只需要关注wrap_line_lengt和wrap_attributes这两个属性，wrap_attributes确保你的标签属性是否换行，auto表示不换行，wrap_line_length表示一行的最大长度，超过之后搭配auto可自动换行,其他换行可自行实验。
最后给VsCode的配置，供参考：

setting.json:
  1. {  //====== 通用选项 ======  // "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",  "npm.packageManager": "npm",  "workbench.statusBar.visible": true,  "window.zoomLevel": 0,  "window.newWindowDimensions": "inherit",  "window.openFoldersInNewWindow": "on",  // "workbench.iconTheme": "vscode-icons",  //"workbench.colorTheme": "Solarized Dark"      //暗阴  //"workbench.colorTheme": "Monokai Dimmed"      //暗暖  //"workbench.colorTheme": "Monokai"             //暗凉  //"workbench.colorTheme": "Visual Studio Light" //亮  //====== vscode自带格式化功能配置 ======  "editor.mouseWheelZoom": true,  "editor.cursorWidth": 3,  "editor.renderLineHighlight": "all",  // "editor.renderWhitespace": "selection",  //文本自动换行  "editor.fontSize": 16,  "editor.wordWrap": "on",  "editor.renderWhitespace": "all",  "search.followSymlinks": false,  "editor.formatOnSave": true,  "editor.formatOnType": true,  "editor.formatOnPaste": true,  "editor.detectIndentation": false, //关闭检测第一个tab后面就tab  "editor.renderControlCharacters": true, //制表符显示->  "editor.insertSpaces": true, //转为空格  "editor.tabSize": 2, //tab为四个空格  "typescript.updateImportsOnFileMove.enabled": "always",  "javascript.format.semicolons": "ignore", //格式化时不删除也不添加 ,默认有三种: ignore, insert, remove  "typescript.format.semicolons": "ignore",  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //函数名与()间加空隔  "javascript.preferences.quoteStyle": "single",  "typescript.preferences.quoteStyle": "single",  "javascript.format.enable": true, //自带默认javascript格式化  "typescript.format.enable": true, //自带默认typescript格式化  "json.format.enable": true, //自带默认json格式化  "html.format.indentInnerHtml": false, //自带默认html格式化  //====== prettier格式化,能使每一种语言默认格式化规则 ======
  2.   "editor.defaultFormatter": "esbenp.prettier-vscode",
  3.   "eslint.alwaysShowStatus": true, // 总是显示eslint状态
  4.   "prettier.printWidth": 120, // 超过最大值换行
  5.   "prettier.tabWidth": 2, // 缩进字节数
  6.   "prettier.useTabs": false, // 缩进不使用tab，使用空格
  7.   "prettier.semi": false, // 句尾添加分号
  8.   "prettier.singleQuote": true, // 使用单引号代替双引号
  9.   "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  10.   "prettier.arrowParens": "always", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  11.   "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  12.   "prettier.endOfLine": "lf", // 结尾是 \n \r \n\r auto
  13.   // "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  14.   "prettier.htmlWhitespaceSensitivity": "ignore",
  15.   "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  16.   "prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行 true--不会单独占一行，false--折行
  17.   "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  18.   // "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  19.   "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  20.   // "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  21.   "prettier.trailingComma": "all", // 属性值es5表示在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  22.   "prettier.vueIndentScriptAndStyle": false,
  23.   "prettier.singleAttributePerLine": false,
  24.   // "prettier.tslintIntegration": false,
  25.   "notebook.codeActionsOnSave": {}, // 不让prettier使用tslint的代码格式进行校验
  26.   // // --- 部门文件格式化在后面单独设置 ---  // "prettier.disableLanguages": [  //   "vue",  //   "typescript",  //   "javascript",  //   "jsonc"  // ],  //====== 单独设置文件格式化 ======  "[jsonc]": {    "editor.defaultFormatter": "vscode.json-language-features"  },  "[javascript]": {    // "editor.defaultFormatter": "vscode.typescript-language-features"    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[typescript]": {    // "editor.defaultFormatter": "vscode.typescript-language-features"    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[html]": {    // "editor.defaultFormatter": "vscode.html-language-features"    // "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"    "editor.defaultFormatter": "vscode.html-language-features"  },  "[less]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[scss]": {    // "editor.defaultFormatter": "vscode.css-language-features"    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  // ------ 用vetur格式化vue文件配置 ------  "[vue]": {    "editor.defaultFormatter": "octref.vetur"  },  "vetur.format.defaultFormatter.html": "js-beautify-html", //默认是prettier  "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.js": "vscode-typescript", //解决不了 双引号需要自动转单引号的需求, 不外通过eslint插件保存时自动修复  "vetur.format.defaultFormatter.ts": "vscode-typescript", //同上  //vetur的自定义设置  "vetur.format.defaultFormatterOptions": {    "js-beautify-html": {      "end_with_newline": false, // End output with newline      "indent_char": " ", // Indentation character      "indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}      "indent_inner_html": false, // Indent <head> and <body> sections      "indent_scripts": "keep", // [keep|separate|normal]      "indent_size": 2, // Indentation size      "indent_with_tabs": false,      "max_preserve_newlines": 1, // Maximum number of line breaks to be preserved in one chunk (0 disables)      "preserve_newlines": true, // Whether existing line breaks before elements should be preserved      "unformatted": [], // Tags that shouldn't be formatted. Causes mis-alignment      "wrap_line_length": 120, // Lines should wrap at next opportunity after this number of characters (0 disables)      "wrap_attributes": "auto"      // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]    },    // "prettyhtml": { 已经被弃用了    //   // "printWidth": 100, //使用不同的最大行长度    //   "singleQuote": true,    //   // "wrapAttributes": false, //强制换行属性（当它有多个时，默认值为false）    //   "sortAttributes": false //按字母次序排序属性（默认值：false）    // },    "prettier": {      "printWidth": 120,      "semi": false, //代码行后面需不需要天生分号      "singleQuote": true, //需不需要把双引号格式化成单引号      "trailingComma": "all" //在任何可能的多行中输入尾逗号。    }  },  // "html.format.wrapAttributes": "auto",  // ====== eslint 保存时自动修复格式配置 ======  "editor.codeActionsOnSave": {    "source.fixAll.eslint": "explicit"  },  "eslint.validate": [    "javascript",    "javascriptreact",    "typescript",    "typescriptreact",    "html",    "vue",    "less"    // "scss",  ],  "eslint.format.enable": true,  "eslint.run": "onType",  "git.ignoreMissingGitWarning": true,  "explorer.confirmDelete": false,  "files.autoSave": "onFocusChange",  "vetur.validation.template": false,  "vetur.validation.script": false,  "vetur.validation.style": false,  "files.associations": {    "*.vue": "vue"  },  "cssrem.rootFontSize": 80,  "open-in-browser.default": "Chrome",}
复制代码
.prettierc.json
  1. {
  2.   "printWidth": 120,
  3.   "singleQuote": true,
  4.   "semi": false,
  5.   "bracketSpacing": true,
  6.   "htmlWhitespaceSensitivity": "ignore",
  7.   "endOfLine": "auto",
  8.   "trailingComma": "all",
  9.   "tabWidth": 2,
  10.   "singleAttributePerLine": false
  11. }
复制代码
.eslintrc.cjs
  1. { ......  rules: {    // eslint（https://eslint.bootcss.com/docs/rules/）    'no-var': 'error', // 要求使用 let 或 const 而不是 var    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允很多个空行    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',    'no-unexpected-multiline': 'error', // 克制空余的多行    'no-useless-escape': 'off', // 克制不须要的转义字符    // typeScript (https://typescript-eslint.io/rules)    '@typescript-eslint/no-unused-vars': 'error', // 克制定义未使用的变量    '@typescript-eslint/prefer-ts-expect-error': 'error', // 克制使用 @ts-ignore    '@typescript-eslint/no-explicit-any': 'off', // 克制使用 any 类型    '@typescript-eslint/no-non-null-assertion': 'off',    '@typescript-eslint/no-namespace': 'off', // 克制使用自定义 TypeScript 模块和命名空间。    '@typescript-eslint/semi': 'off',    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式    'vue/first-attribute-linebreak': [
  2.       'error',
  3.       {
  4.         singleline: 'ignore',
  5.         multiline: 'ignore',
  6.       },
  7.     ],
  8.     'vue/html-closing-bracket-newline': [
  9.       'error',
  10.       {
  11.         singleline: 'never',
  12.         multiline: 'always',
  13.         selfClosingTag: {
  14.           singleline: 'never',
  15.           multiline: 'always',
  16.         },
  17.       },
  18.     ],
  19.   },}
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

千千梦丶琪

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表