首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何防止Vetur/Prettier在逗号后添加新行(TS/Vue3)

在Vue 3项目中,使用Vetur和Prettier进行代码格式化时,有时会遇到在逗号后自动添加新行的问题。如果你想防止这种情况发生,可以按照以下步骤进行操作:

  1. 在项目根目录下创建一个.prettierrc文件,用于配置Prettier的规则。如果已经存在该文件,则直接打开。
  2. .prettierrc文件中添加以下配置:
代码语言:txt
复制
{
  "overrides": [
    {
      "files": "*.vue",
      "options": {
        "vueIndentScriptAndStyle": false
      }
    }
  ]
}

这个配置的作用是禁用在Vue单文件组件的<script><style>标签中的代码中添加新行。

  1. 保存.prettierrc文件。

这样,当你使用Vetur和Prettier进行代码格式化时,逗号后将不会自动添加新行。

对于以上问题,腾讯云没有特定的产品或服务与之相关。但腾讯云提供了一系列云计算产品和解决方案,可以帮助开发者构建和部署各种应用。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多详情。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【前端财富】前端工程师装机指南 (windows10)

    谷歌浏览器 电脑自带一个 edge,虽说也是和谷歌一样的内核,但我更习惯用谷歌 安装后进行下列操作 设置浏览器显示最小字体,防止开发移动端时小字体显示出问题 把浏览器首页设置为 流莺起始页 安装插件..."editor.formatOnSave": true, // 控制编辑器键入一是否自动格式化该行。..."[shellscript]": { "files.eol": "\n" }, //控制如何处理受信任的工作区中打开不受信任的文件 open: 始终允许不受信任的文件引入受信任的工作区...": 2, //在对象或数组最后一个元素后面是否加逗号 "prettier.trailingComma": "all", // prettier-在对象,数组括号与文字之间加空格 "{ foo...": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.sass

    1.5K20

    2022代码规范最佳实践(附web和小程序最优配置示例)

    eslint --init 执行检查和修复命令 检查代码规范命令,--ext选项用于指定一个逗号分隔的扩展名列表,例如:.js,.ts,最后一个参数表示待检查的文件路径。...根目录下新增.vscode目录,目录下新建setting.json文件,添加如下的设置。这里为了避免关闭vetur和eslint配置的冲突,关闭vetur一些格式化的选项。...// js/ts程序用eslint,防止vetur中的prettier与eslint格式化冲突 "vetur.format.defaultFormatter.html": "none",..."vetur.format.defaultFormatter.js": "none", "vetur.format.defaultFormatter.ts": "none", // 开启...配置husky-防止提交不规范的代码 有了前面的三道保障,我们的代码已经被规范得差不多了,但是依然存在把不规范代码提交到git的可能,比如没装vscode的eslint插件,又没跑eslint的命令。

    1.8K30

    你的代码好看吗

    prettier 的优势也很明显,它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式。...": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab,使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote..., // jsx中把'>' 是否单独放一 "prettier.jsxSingleQuote": false, // jsx中使用单引号代替双引号 "prettier.parser": "babylon...es5", // 在对象或数组最后一个元素后面是否加逗号ES5中加尾逗号) "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验...相信每个vscode上编写vue的都会下载 Vetur 插件,它目前是 vscode 上面最好用的一款vue插件。现在要说的是,如何使用prettier格式化vue的代码。

    1.3K20

    一款超人气代码格式化工具prettier

    "prettier.useTabs": false, // 缩进不使用tab,使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote...因为使用了一些折敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折 "prettier.arrowParens": "avoid", // (x) =>..."prettier.jsxBracketSameLine": false, // jsx中把'>' 是否单独放一 "prettier.jsxSingleQuote": false,..., //不让prettier使用stylelint的代码格式进行校验 "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号ES5中加尾逗号...相信每个vscode上编写vue的都会下载 Vetur 插件,它目前是 vscode 上面最好用的一款vue插件。现在要说的是,如何使用prettier格式化vue的代码。

    3.9K20

    Vue 基于VSCode结合Vetur+ESlint+Prettier统一Vue代码风格

    "prettier.semi": false, // 设置是否每行末尾添加分号,默认为 true "prettier.singleQuote": true, // 设置格式化时,保持单引号,如果设置为...": true, // 设置jsx中,是否把'>' 单独放一,默认为false,即单独放一 // 设置各种代码的默认格式化器//以下为默认配置 "[html]": { "editor.defaultFormatter...": "prettier-eslint", // 设置js代码包含的代码块)默认格式化器 "vetur.format.defaultFormatter.ts": "prettier"...: "prettier", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.sass...jsxBracketSameLine配置项 该配置项主要用于控制 jsx中,是否把'>' 单独放一,默认为false,即单独放一 prettier.jsxBracketSameLine:true -

    6.8K20

    我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss】

    项目背景 最近一直忙一个EPR系统的开发,新项目之前团队的技术栈基本停留于Vue2 + Js + Webpack + Vuex 上,但是Vue生态其实已经可以说进入了次时代,虽然我个人其实不是很倡议盲目的去追赶的框架...但是学习还是有必要的,那么学习就需要一个成熟的项目,体系完整的项目来巩固一下自己学的知识,借此机会,向部门CTO提出使用Vue3 + TS + Vite + Pinia + Windicss + NavieUI...设计 团队协作 Plugin 有效利用esLint、prettier、husky以及commitizen,因为使用了TypeScript+ esLint所以对代码的书写规范、类型、接口的使用必须有很高的要求...Editor 编辑器集体更换为VSCode,团队中有使用webstorm的同学,也强制更换编辑器,如果进行Vue3的开发,一定要记得禁用vetur插件,使用volar进行开发。...但是之前都是自己去弄,这次因为比较着急,而且工作内容比较多,所以必须得拉上小伙伴一起了,就面临了一个问题,那就是如何统一设计风格的问题,于是想到了tailwindcss,调研的过程中,又发现了windicss

    58440

    【推荐】1408- 分享 6 个 Vue3 开发必备的 VSCode 插件

    而随着 Vue3 正式版发布,Vue 团队官方推荐 Volar 插件来代替 Vetur 插件,不仅支持 Vue3 语言高亮、语法检测,还支持 TypeScript 和基于 vue-tsc 的类型检查功能...,而官方的 ESLint 和 Prettier 扩展支持 Vue,所以需要自行安装。...简直是 Vue3 开发必备神器。 该插件支持:Volar、Vue2 和 Vue3。...顾名思义,当我们结束标记中键入结束括号时,它将添加结束标记。它支持HTML,Handlebars,XML,PHP,Vue,JavaScript,Typescript,JSX等。 4....Vite 下载数 8.9 万+ Vite 插件可以让我们打开项目,就能自动启动开发服务器,允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

    2.7K10

    vscode html注释快捷键_史上最全vscode配置使用教程

    " //ts编译后生成的js文件将不会显示工作空中 }, "**/node_modules": true }, // #让vue中的js按"prettier"格式进行格式化..."vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier...7、stylelint CSS / SCSS / Less 语法检查 8、Import Cost 引入包大小计算,对于项目打包体积掌握很有帮助 9、Prettier 比Beautify更好用的代码格式化插件...Vue插件 vetur 语法高亮、智能感知、Emmet等 其它插件 1、Turbo Console Log 快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log...Git 重度使用者必备,尤其是多人协作时:哪一代码,何时、何人提交都有记录。 妈妈再也不用担心我背锅了! 3、css-auto-prefix 自动添加 CSS 私有前缀。

    1.5K20

    使用这些配置规范并格式化你的代码

    tab_width = 2; ## 设置为 lf、cr 或 crlf 以控制如何表示换行符。...": false, "vetur.validation.script": false, "vetur.validation.style": false, 无需将 vue 添加进 eslint.validate...如果是 Vue cli 创建的项目,并且没有使用 ts,需要在项目根目录添加 jsconfig.json 文件。...想让 prettier 生效,需要我们 VSCode 里配置: // 所有文件都使用 prettier 格式化 "editor.defaultFormatter": "esbenp.prettier-vscode...团队日常的业务对接之外,还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战,推动并落地了一系列的内部技术产品,持续探索前端技术体系的边界。

    2.4K30

    TypeScript Vue 3 上手教程

    当然,实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点,这里就针对 Vue3 和 TypeScript 展开一些交流。 ?...想要预装TypeScript,就需要选择手动配置,并check好TypeScript 忘记使用选择 TypeScript 也没事,加一cli命令就行了 vue add typescript 最后,别忘了...,所以这种曲线救国的方案 vue3 里面肯定是行不通的。...Composition API风格 vue3 的 Composition API 代码风格中,比较有代表性的api就是 ref 和 reactive ,我们看看这两个是如何做类型声明的: ref import...Vetur vetur 代码检查工具写vue代码的时候会非常有用,就像构建 vue 项目少不了 vue-cli 一样,vetur 提供了 vscode 的插件支持,赶着升级 vue3 这一波工作,顺带也把

    3.5K20

    今天来带大家抢先看VueConf 2021,一起聊聊 Vue 的未来?

    Nuxt 3 Vuetify Quasar Element Plus Ant Design Vue 用户体验 持续探索中: 的构建工具 更棒的语法 IDE/TS 支持 构建工具 Vite,不用说了,今年的明星项目...更好的 IDE/TS 支持 多个探索中的项目 Vetur VueDX Volar 获得了: 类型检查,语法提示和 SFC templates 的自动重构 接下来: 把这些努力整合成更推荐的链路 提供 CLI...工具来利用 TS 校验 SFC 计划: 基于 Volar 的的官方 VSCode 插件,从 Vetur 和 VueDX 上汲取很多灵感。...RFC[4] 讨论[5] 笔者对这个 RFC 也进行了翻译: Vue3 考虑彻底放弃 IE 浏览器 Vue 2.7 会成为坚持留守 IE11 人群的选择,它会提供更多的 Vue3 特性和 TS 支持。...(估计 2021 第三季度) Vue3 的集成构建也要来了! 估计四月末 可单独配置来兼容 v2 Vue3 会在 2021 二季度末尾,变成的默认版本!

    1.1K10

    webpack5 + webpack-chain 构建一个大型应用系列 2(附 vscode 跟 prettier 配置)

    您安装了 eslint 插件,需要在设置中设置 "eslint.autoFixOnSave": true,这样就可以保存时自动修复 eslint 的错误了 当然您可能只在这个项目中使用了 eslint...配置 */ "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatterOptions...配置 */ "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatterOptions...= { // ES5中有效的结尾逗号(对象,数组等) trailingComma: "es5", // 不使用缩进符,而使用空格 useTabs: false, // tab 用两个空格代替...requirePragma: false, // 不需要自动文件开头插入 @prettier insertPragma: false, // 使用默认的折标准 proseWrap

    3.9K51

    VueConf 2021 抢先看,Evan You 和你聊聊 Vue 的未来

    Nuxt 3 Vuetify Quasar Element Plus Ant Design Vue 用户体验 持续探索中: 的构建工具 更棒的语法 IDE/TS 支持 构建工具 Vite,不用说了...更好的 IDE/TS 支持 多个探索中的项目 Vetur VueDX Volar 获得了: 类型检查,语法提示和 SFC templates 的自动重构 接下来: 把这些努力整合成更推荐的链路 提供...CLI 工具来利用 TS 校验 SFC 计划: 基于 Volar 的的官方 VSCode 插件,从 Vetur 和 VueDX 上汲取很多灵感。...RFC 讨论 笔者对这个 RFC 也进行了翻译: Vue3 考虑彻底放弃 IE 浏览器 Vue 2.7 会成为坚持留守 IE11 人群的选择,它会提供更多的 Vue3 特性和 TS 支持。...(估计 2021 第三季度) Vue3 的集成构建也要来了! 估计四月末 可单独配置来兼容 v2 Vue3 会在 2021 二季度末尾,变成的默认版本!

    72610
    领券