VSCode中使用vetur插件格式化vue文件时，js代码会被添加上分号且单引号会转变为双引号...

最新推荐文章于 2025-10-04 08:46:40 发布
转载 最新推荐文章于 2025-10-04 08:46:40 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5d0046caf265da1bb277279d
文章标签：

#开发工具 #javascript #ViewUI

本文详细介绍了Vetur中默认格式化选项的配置方法，包括如何设置prettier的semi和singleQuote属性，帮助开发者更好地进行代码美化。 
"vetur.format.defaultFormatterOptions": {
  "prettier": {
      "semi": false,
      "singleQuote": true
  }
}
复制代码

segmentfault.com/q/101000001…

转载于:https://juejin.im/post/5d0046caf265da1bb277279d

VSCode中编写Vue项目使用Eslint+Prettier格式化，会自动加上分号 空格 单引号变双引号问题
Tiziano_的博客
02-29 6071
近期在使用Vue写项目使用Prettier格式文档时发现格式过后会自动加上分号 空格 单引号变双引号问题，这样一保存ESlint就会出现报错！ 网上找了好多教程各种改配置并不能解决问题！！！ 一.在VSCode设置中搜索prettier更改其中的Semi 和Single Quote之后也不能生效。如下图： 二.搜网上的更改setting.json配置还是不能解决问题 ![在这里插入图片描述](h...
VScode vue项目 自动 规范 格式化
weixin_44523517的博客
08-08 6087
代码】VScode vue项目 自动 规范 格式化。
vscode使用vetur格式化代码
OriginalSword的博客
02-09 1070
vscode代码格式化vetur
vscode设置vetur格式化代码(双引号变单引号 去除分号等)前端小白教程
weixin_44383533的博客
05-25 5889
这个时候我们就可以 格式化的时候直接将双引号变成单引号了。找到formatter js 选择prettier。找到设置settings.json的地方。根据需要设置 再点击使用..格式化文档。第一步设置 vetur。
第2章：项目框架搭建
最新发布
guslegend的博客
10-04 458
Vetur是Vue自带的插件，但是随着ts在项目开发中占比更大，我们发现Vetur在规范ts代码是并不严格。我们有检查以下代码，发现tsconfig.app.json的compilerOptions项，发现原来的配置被覆盖。发现@报错，于是要创建src\shims-vue.d.ts，编写以下代码，才可以让ts识别.vue类型的文件。这个项目我们选用的是代码检测宽松的Vetur插件，首先我们需要配置相对路径路径path。首先我们需要在main.ts注册基本需要的组件。然后配置vite.config.ts。
vscode 配置vue+vetur+eslint+prettier自动格式化功能
10-15
主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能，本文通过实例代码图文的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vscode集成Vetur实现代码格式化，解决代码标签换行的问题
qq_39564710的博客
08-27 1803
vscode集成Vetur实现代码格式化，解决代码标签换行的问题
VueCLI使用VSCode开发结合ESLint与Vetur格式化代码
weixin_43736435的博客
11-06 455
1、在使用VueCLI创建项目时选择ESLint校验 2、VSCode安装Vetur和ESLint插件 3、在setting.json中添加下面几行配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, 4、对Vetur进行配置，让其不对js代码格式化 5、检查ESLint是否启用 6、最后，我们可以在项目根目录下的.eslintrc.js中自定义eslint规则 ...
解决vscode进行vue格式化,会自动补分号和双引号的问题
01-18
安装完 vetur 后确实是可以对 vue文件进行高亮显示了，但是当你按下 shift+alt+f 进行格式化时，发现本来没有错误的代码却变成了一堆错误，莫名加上了分号，单引号也成功变成双引号了。在vue的严格检查中这些是最烦...
VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““
i_am_a_div的博客
03-15 1万+
1.必须安装的三个插件eslint， prettier-Code formatter ，vetur 2.配置setting.json 3.直接将下方代码复制，黏贴在setting.json文件中 { "editor.quickSuggestions": { "strings": true }, "window.zoomLevel": 1, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-
vscode格式话后会自动转化双引号和加分号
qq_38868959的博客
12-08 1079
vscode格式话后会自动转化双引号和加分号
VSCode 使用 Vetur Format格式化的配置项
weixin_45871977的博客
10-11 1154
VSCode使用vetur Format格式化的配置项
编辑器eslint格式_ESlint 代码格式大坑vscode vetur，eslint 冲突
weixin_39850981的博客
12-20 488
解决冲突：① vscode 设置页面设置需要使用 ESlint 的格式化，就要将 vscode 编辑器默认的格式化去掉、把 vetur 插件的格式化改写```JSON"vetur.validation.template": false // 把 vetur 扩展的 template 格式化去掉"editor.formatOnSave": false, // 去掉 vscode ...
VSCode中格式化vue文件时，js代码会被自动添加上分号，单引号转为双引号
AdleyTales的技术博客
07-25 3653
在VSCode设置文件（settings.json）中，添加如下规则： "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true } }
vscode实现自动格式化功能-配置vue+vetur+eslint+prettier
weixin_42283818的博客
04-06 820
1、vetur vetur的插件主要作用和特性： 语法高亮 片段 Emmet 整理/错误检查 格式设定 智能感知 调试 组件数据：流行的Vue框架和您自己的自定义组件的自动完成和悬停信息 实验插值功能：自动完成，悬停信息和Vue模板中的类型检查 VTI：CLI上的表面模板类型检查错误 全局组件：支持定义全局组件。 2、eslint eslint ...
vsCode代码格式化（理解eslint、vetur、prettier，实现格式化文档以及ctrl+s保存自动格式化文档，保证代码格式的统一，相对规范，以及一些常见问题实战解决）
qq_45796592的博客
04-20 1万+
vsCode代码格式化，解决格式化中常见的问题，让大家能知根知底，不用盲目在网上查询多种配置（包括理解eslint、vetur、prettier，实现格式化文档以及ctrl+s保存自动格式化文档，保证代码格式的统一，相对规范，以及一些常见问题实战解决）
VSCode格式化JS自动添加或去掉分号
热门推荐
60rzvvbj的博客
10-10 1万+
引言 js代码句尾的分号加不加都可以，一般团队开发时需要统一规范，要么都加分号，要么都不加分号 但是有些时候我们能想起来加分号，有的时候想不起来加，这样就会导致我们的代码有的有分号有的没有，就会比较乱 为了解决这个问题，我们可以使用格式化程序来帮助我们自动添加或去掉句尾分号 具体操作方法 先随便敲点js代码，一会用来看效果 如果你下了很多插件，有一堆的js格式化程序，那么你需要配置一下默认使用的格式化程序 选择配置默认格式化程序 选择这个VSCode自带的js格式化程序 打开设置 打开设置的json
VScode 结局插件prettier和vetur格式化冲突
m0_70647189的博客
05-10 909
}, /* prettier 相关 */ “prettier.jsxSingleQuote”: true, “prettier.semi”: false, // #去掉代码结尾的分号 “prettier.singleQuote”: true, // #使用带引号替代双引号 “prettier.requireConfig”: true, /* javascript 相关 */ “javascript.preferences.quoteStyle”: “single”, // “javascript
vue代码格式化，vetur的代码格式化设置,保存时（ctrl+s）格式化代码，不加；和将 ‘ (单引号) ,改为 “ (双引号)
2302_77492264的博客
06-24 2631
在Vue开发中，代码格式化是提高代码可读性和可维护性的重要环节。使用合适的代码格式化工具，可以确保团队中的每位成员都遵循统一的代码风格，减少不必要的风格冲突。其中，Vetur是一个为Vue提供丰富开发体验的VSCode插件，它内置了代码格式化功能，使得Vue代码的格式化变得简单易行。
如何使用vscode根据vue文件中的.eslintrc文件 来格式化
04-28
<think>好的，我现在需要帮用户解决如何配置VSCode根据Vue项目中的.eslintrc文件进行代码格式化的问题。首先，我得回忆一下相关的配置步骤，可能需要结合用户提供的引用内容。 用户提到了两个引用，引用[1]和引用[2]。引用[1]中提到了在settings.json里配置editor.codeActionsOnSave和eslint.validate，还有项目根目录的.eslintrc.js文件。引用[2]则讨论了Vetur插件和如何设置格式化选项，比如函数名后的空格、分号、引号等。不过用户现在想用的是.eslintrc文件来配置，而不是通过Vetur的单独设置。 首先，我需要确定VSCode如何让ESLint来处理Vue文件的格式化。通常，这需要确保ESLint扩展已安装并正确配置。然后，在settings.json中启用保存时自动修复，并指定ESLint校验的文件类型，包括Vue。引用[1]中的配置可能是一个基础，但需要补充Vue到eslint.validate的数组中。 另外，用户可能之前遇到过Vetur的配置冲突，因为引用[2]中使用了Vetur的格式化方式。这时候需要确保VSCode优先使用ESLint而不是Vetur或Prettier进行格式化。可能需要调整默认格式化工具，将Vue文件的格式化器设置为ESLint，或者禁用Vetur的格式化功能。 还有，项目中的.eslintrc.js文件需要包含Vue相关的规则，比如使用vue/essential插件，或者扩展一些预设配置如@vue/standard。这样才能确保ESLint正确识别Vue的语法并应用规则。 用户可能遇到的问题包括：配置后保存不自动修复、Vue文件未被ESLint处理、与现有插件冲突等。所以，在回答中需要包含验证配置是否生效的步骤，比如查看问题面板、运行ESLint命令，以及检查是否有其他格式化插件干扰。 最后，生成相关问题时要围绕配置ESLint、解决冲突、优化规则等方面，帮助用户进一步了解相关主题。</think>### 配置VSCode使用.eslintrc格式化Vue代码的步骤 #### 一、基础环境准备 1. 安装必要扩展： - **ESLint**（必装，Microsoft官方扩展） - **Vetur**（Vue语法支持） 2. 创建项目级配置文件： - 项目根目录新建 `.eslintrc.js` 文件（示例配置）： ```javascript module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'semi': ['error', 'never'], 'quotes': ['error', 'single'] } } ``` #### 二、VSCode关键配置 修改 `settings.json`（可通过 `Ctrl+,` 打开设置，点击右上角图标进入）： ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript", "javascriptreact", "vue", "html" ], "editor.formatOnSave": false, // 关闭默认格式化 "[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } } ``` #### 三、解决插件冲突 1. **禁用Vetur格式化**（避免与ESLint冲突）： ```json "vetur.format.enable": false ``` 2. **关闭Prettier自动格式化**（若已安装）： ```json "prettier.disableLanguages": ["vue"] ``` #### 四、验证配置生效 1. 在Vue文件中故意制造格式错误（如添加分号/双引号） 2. 保存文件时观察是否自动修正 3. 按 `Ctrl+Shift+U` 打开输出面板，选择ESLint查看日志 #### 五、典型配置问题排查 | 现象 | 解决方案 | |-------|----------| | 保存无反应 | 检查`eslint.validate`是否包含"vue" | | 部分规则不生效 | 运行`npx eslint --fix src/`验证规则有效性 | | 与Prettier冲突 | 安装`eslint-config-prettier`并在.eslintrc扩展 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值