vscode vue3开发常用插件(附Prettier格式化配置)

这篇具有很好参考价值的文章主要介绍了vscode vue3开发常用插件(附Prettier格式化配置)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

必不可少插件(名称可能不全):

1、Chinese (Simplified) (简体中文) Language
2、Prettier - Code formatter
3、Vue 3 Snippets
4、Vue Language Features (Volar)
5、git graph

可选插件:

5、Auto Close Tag
6、Vue Theme

Prettier格式化配置:

按ctrl+shift+p,搜索setting进入用户设置(全局),添加下面规则:

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.enable": true,
  "prettier.semi": false, // 句尾添加分号
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.printWidth": 100, // 超过最大值换行
  "prettier.tabWidth": 4, // 缩进字节数
  "prettier.useTabs": false, // 缩进不使用tab,使用空格

需要注意的是,prtttier格式化可以配置在很多文件上,配置字段也不太一样,需要注意的文件如下:
.prettierrc.js.prettierignore.vscode文件夹里的settings.json文章来源地址https://www.toymoban.com/news/detail-620116.html

到了这里,关于vscode vue3开发常用插件(附Prettier格式化配置)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vscode 格式化】prettier 格式化之后添加逗号,与eslint冲突

    最近格式化文件的时候老是添加逗号,保存的时候会eslint在格式化一遍,将逗号删掉;就感觉不是很舒服; 有两种方法, 一、配置 .prettierrc 文件; 文件配置,可直接用,配合eslint使用足够了 JSON文件是不支持备注的,cv过去时要删掉注释 2.就是在设置的搜索框中输入“vet

    2024年02月12日
    浏览(83)
  • vscode配置Volar对vue3的格式化支持

    在浏览vue的官方文档时,看到了一句Volar VSCode 插件为 Vue SFC 提供了开箱即用的格式化功能,官方推荐的,立马试试 在vscode中启用volar时,鼠标右键会显示使用…进行格式化 选择volar 通过项目vscode编辑器配置来保存时自动进行格式化 在项目根目录下创建以下文件并配置 .vsco

    2024年02月13日
    浏览(58)
  • VsCode中Vue代码格式插件,Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置

    Vetur是一款Vue代码高亮显示的一款插件,在没有使用此插件前,以 .vue的文件名代码是没有颜色的!!! 安装步骤:在扩展商店中搜索(  Vetur  )点击安装  ESLint插件主要用来检测代码的语法格式,以便我们规范书写,避免因编译所发生的错误 。 安装步骤:在扩展商店中搜

    2024年02月16日
    浏览(39)
  • 无插件,简单配置prettier,将微信小程序的wxml和wxss当作html和css进行格式化

    使用prettier的项目、安装了prettier扩展的vscode和微信开发者工具。 prettier是根据默认的解析器对相应的文件进行处理,我们可以自定义什么格式的文件用什么解析器。具体看 documentSelectors。 只列出有关的配置 编辑器的配置 设置wxml和wxss文件的默认格式化工具为prettier 配置pre

    2024年02月09日
    浏览(65)
  • VSCODE-Verilog开发插件/(代码格式化+Verilog文件树显示+一键例化+UCF转XDC+代码错误检查+语法高亮)

    VSCODE插件,可实现功能: 变量对齐 逗号对齐 括号对齐 快捷键:CTRL + L 例化的代码自动复制到剪切板 快捷键:ctrl+shift+p :输入 Convert_instance 正常顺序转换 可实现序号的从小到大的排列 快捷键:ctrl+shift+p :输入 Convert UCF to XDC NORMAL ORDER 或 Convert UCF to XDC SORT ORDER ucf, xdc, do, tcl 语法

    2024年03月10日
    浏览(50)
  • VScode自动格式化代码(tab缩进、符号空格)配置beautify插件使用

    安装插件 在插件库搜索beautify,会弹出很多插件 你需要根据你自己的语言选择对应的插件安装,尽量选择在维护中的插件 我是做前端的,所以选择的是beautify blade,格式化语言:javascript, JSON, CSS, Sass, and HTML ![在这里插入图片描述](https://img-blog.csdnimg.cn/cc42b7d4f0b549a78d16c69e7d33

    2024年02月12日
    浏览(55)
  • 分享 Vue3 开发必备的 VSCode 插件

    分享 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用 1. Volar  🔥 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。 而随着 Vu

    2024年02月13日
    浏览(43)
  • VSCode开发 Vue3 建议必备的插件

    在使用 Visual Studio Code (VSCode) 开发 Vue 3 项目时,有一些插件可以提高开发效率、代码质量和工作流程。以下是一些常用的插件,它们可以被视为 Vue 3 开发的必备插件:  提供 Vue 文件的语法高亮。 支持 Vue 文件的智能感知和自动完成。 提供了 Vue 文件的格式化工具。 Vetur 插件

    2024年02月04日
    浏览(46)
  • 使用vscode格式化文档无效(vue代码格式化文档无效)

    问题: 最近在写代码的时候,vscode使用格式化文档不管用。 原因: 单页面使用大量element组件和html代码导致,vscode识别不了。 解决方案: 1、 打开设置,点击右侧的图标打开settings.json文件,在文件中注入代码。 settings.json文件位置,vscode左下角:  设置页面右上角:  在

    2024年02月16日
    浏览(76)
  • vscode 2023格式化vue文件设置

    2024年02月10日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包