VS Code .vue文件代码缩进以及格式化代码

最新推荐文章于 2024-04-26 15:32:35 发布
最新推荐文章于 2024-04-26 15:32:35 发布
阅读量6.3w 收藏 7
点赞数 4
分类专栏： VS Code 文章标签： Vetur 格式化 缩进 VSCode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangletao/article/details/78799459
版权

首先在应用商店中搜索“Vetur”插件安装，然后进行下面操作：

  • 文件->首选项->设置，然后在右边编辑框输入以下设置：
{
    "prettier.tabWidth": 4,
    "vetur.format.defaultFormatter.html": "prettier"
}

然后通过快捷键 Alt+Shift+F 进行格式化


☆☆☆可能遇到的问题☆☆☆

经测试，win7通过以上设置，可以正常格式化代码。在win10，格式化JS代码无效，CSS和HTML格式化均正常。下面提供单独格式化JS代码的方法步骤：

  • 在应用商店搜索“Beautify”插件安装
  • 鼠标选中待格式化的JS代码
  • 按下快捷键 Ctrl+B，然后选择 JS does JavaScript and JSON
完蛋闹
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue文件格式化
qq_35601066的博客
11-30 3928
1.格式化vue文件需要安装以下插件： ESLint Prettier Vetur 2.添加.prettierrc文件： { "semi": false, //格式化时不加分号 "singleQuote": true, //用单引号替换双引号 "prettier.spaceBeforeFunctionParen": true, //让函数(名)和后面的括号之间加个空格 "trailingComma": "none" //对象后面默认添加逗号 } 3.eslintrc.js添加以下规则
VSCode 设置vue 保存自动格式化代码
weixin_30723433的博客
08-22 4090
设置保存自动格式化代码，开发效率大大提升！ 操作如下： 安装VSCodeeslint插件 如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...
VSCode格式化Vue文件缩进
Maximus_ckp的博客
03-23 5178
1.下载安装Vetur插件 2.打开配置json文件 【File】-【Preference】-【Settings】-【Extensions】-【Vetur】-【Edit in settings.json】 3.将下列内容追加到 settings.json 文件中： "vetur.format.defaultFormatterOptions": { "prettyhtml"...
2024 vscode 代码格式化
最新发布
qq_39753664的博客
04-26 528
/ 选择 vue 文件中 template 的格式化工具。// 显示 markdown 中英文切换时产生的特殊字符。// #每次保存的时候将代码按eslint格式进行修复。// prettier 设置语句末尾不加分号。// 设置 eslint 保存时自动修复。// 开启 vscode 文件路径导航。// prettier 设置强制单引号。// eslint 检测文件类型。// vetur 的自定义设置。// tab 大小为4个空格。// 100 列后换行。
vue2、vue3代码格式化
weixin_45849354的博客
02-08 2465
vue2,vue3格式化工具
VS Code Vue代码格式化
邱新磊的博客
09-20 1104
{     // 工作区颜色主题(Vue Theme)     "workbench.colorTheme": "Vue Theme",     // 工作区图标主题(vscode-icons)     "workbench.iconTheme": "vscode-icons",     // vetur使用格式化插件:js-beautify-html     "vetur.format...
vscode中vue代码格式相关设置,(个人观点)
github_66624340的博客
05-26 2844
设置完在文件夹中新建xxx.vue,打开后在第一行写vue就可以快速生成 效果如下: 设置: 点击左下角的设置,选择设置在设置中搜索tab size,设置成2,这样tab就改为默认的2个空格 生成代码格式设置: 点击用户代码片段 选择下面的vue.json(vue) 把下面的代码复制到其中 { "Print to console": { "prefix": "vue" , "body": [ "<template>" ...
VUEFormatter-Sublime文本代码格式-Vue.js开发
05-27
通过node.js Sublime Text 3用于Sublime Text 2和3的vue代码格式化程序JS-美化Node.js下载关于这是通过node.js Sublime Text 3用于Sublime Text 2和3的Sublime Text 2和3插件allowi vue代码格式化程序。 JS-美化Node...
详解如何在vue项目中使用eslint+prettier格式化代码
10-17
现在，每当保存Vue文件时，Prettier会自动格式化代码，而运行`npm run lint`则会自动修复一些可以通过ESLint解决的问题。如果项目遵循`standard`或`airbnb`等特定风格指南，你可能需要进一步调整配置，以确保`eslint...
prettier自动格式化去换行的实现代码
10-14
总的来说，通过创建`.prettierrc`配置文件，调整VSCode的`settings.json`，以及正确配置相关扩展，你可以实现Prettier自动格式化去换行的功能，从而提升代码质量和开发效率。记得根据你的项目需求和团队规范进行适当...
vscode配置vue下的es6规范自动格式化详解
10-17
Visual Studio Code (VSCode) 是一款强大的源代码编辑器，它提供了丰富的插件系统，可以帮助我们实现Vue项目的ES6规范自动格式化。下面将详细介绍如何在VSCode中配置Vue项目的自动格式化。 首先，我们需要安装一些...
awesome-code-formatters:精选的代码格式化工具和库的精选清单
05-03
Artistic Styler -C，C ++，C＃和Java编程语言的源代码缩进器，格式化程序和美化器。 Atom-Beautify-在Atom编辑器中美化HTML，CSS，JavaScript，PHP，Python，Ruby，Java，C，C ++，C＃，Objective-C，CoffeeScript...
vue-cli4项目开启eslint保存时自动格式问题
10-15
在 Vue CLI 4 项目中开启 ESLint 并配置保存时自动格式化，可以帮助开发者保持代码一致性，提高团队合作效率。 首先，你需要在 Visual Studio Code (VSCode) 中安装 ESLint 插件。在 VSCode 扩展市场搜索 `eslint`...
自己的vscode-settings.json配置详解
10-15
- `"prettier.eslintIntegration": true`：使Prettier使用ESLint的规则进行代码格式化。 3. **界面与行为**： - `"window.zoomLevel": 0`：设置窗口的缩放级别为原始大小。 - `"editor.renderWhitespace": ...
forchange-snippets:一个基于vscode的适用于公司内部的代码片段扩展
04-18
格式化工具Prettier - Code formatter 文档 适用于forchange公司内部的snippets Vscode扩展 1.为了代码开发更加便捷且规范开发了适用于apis.js vue routes.js ts的代码片段 forchange-snippets的使用说明 使用方法在...
VSCode提高 Node 和 Vue 开发效率的插件推荐
10-15
此外，VSCode的首选项配置也非常重要，例如设置Tab大小、关联文件类型、开启ESLint自动修复、自定义搜索排除规则、Emmet语法配置、自动更新插件、显示空格以及代码格式化等。这些配置可以根据个人习惯进行调整，以...
VsCode中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置
热门推荐
qq_51081700的博客
05-13 1万+
Vetur是一款Vue代码高亮显示的一款插件，在没有使用此插件前，以 .vue的文件名代码是没有颜色的！！！安装步骤：在扩展商店中搜索（）点击安装。
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
全栈程序猿的专栏
02-11 2439
简而言之，Prettier的代码格式化功能比ESLint更强大，配置更简单，通过配置，ESLint可以使用Prettier的代码规则进行校验，如果不配置好，会出现冲突，导致二者不能配合使用。3、在 VSCode中插件安装中搜索 ESLint、Prettier - Code formatter、Vetur(因为Prettier不能格式化vue文件的template，所以使用Vetur)、这三个插件并安装。.eslintrc.js：代码检查规则的配置文件。.prettierrc：代码格式化的配置文件。
vscode 格式化代码双引号
不看一的博客
03-02 1170
{ "workbench.startupEditor": "newUntitledFile", "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "vetur.format.defaultFormatterOptions": { "js-beautify-html":...
vue中codemirror怎么格式化代码
05-30
在 Vue 中使用 CodeMirror 可以通过两种方式：使用官方的 Vue 组件或者手动在 Vue 中创建 CodeMirror 实例。 无论哪种方式，都可以通过 CodeMirror 提供的 `autoFormatRange` 函数对文本进行格式化。下面以使用官方的 Vue 组件为例来说明如何在 Vue 中使用 CodeMirror 并格式化代码。 首先，在 Vue 项目中安装 CodeMirror 和 CodeMirror 的 Vue 组件： ``` npm install codemirror vue-codemirror --save ``` 然后，在 Vue 中注册 CodeMirror 组件： ```javascript import Vue from 'vue' import VueCodemirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' // 引入 CodeMirror 样式文件 import 'codemirror/theme/material.css' // 引入 CodeMirror 主题文件 import 'codemirror/mode/javascript/javascript.js' // 引入 JavaScript 语法模式文件 Vue.use(VueCodemirror) ``` 在组件中使用 CodeMirror： ```html <template> <div> <codemirror v-model="code" :options="options"></codemirror> </div> </template> <script> export default { data () { return { code: '', options: { tabSize: 2, // Tab 缩进大小为 2 mode: 'javascript', // 指定语言为 JavaScript theme: 'material' // 指定主题为 Material } } }, methods: { format () { const editor = this.$refs.myCodeMirror.getCodeMirror() const from = editor.getCursor(true) const to = editor.getCursor(false) editor.autoFormatRange(from, to) } } } </script> ``` 以上代码中，`options` 是 CodeMirror 的配置项，`format` 方法中调用了 `autoFormatRange` 函数对文本进行格式化。需要注意的是，需要通过 `this.$refs.myCodeMirror.getCodeMirror()` 获取 CodeMirror 实例才能调用 `autoFormatRange` 函数。 当然，以上只是一个简单的示例，实际使用中可能需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值