VS Code 代码格式化（4个空格）(Vue)

最新推荐文章于 2024-04-25 20:04:39 发布
最新推荐文章于 2024-04-25 20:04:39 发布
阅读量4.4k 收藏 1
点赞数 4
分类专栏： VSCode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010763322/article/details/99585287
版权

首选项-设置-搜索tabSize

"editor.detectIndentation": false, // 改为false，这里默认是true
"vetur.format.options.tabSize": 4  // 改为4，这里默认是2

设置Vetur › Format › Default Formatter: JS为vscode-typescript

使用Alt + Shift + F 格式化vue文件后，js代码不会添加分号了

鲨鱼虾啦啦
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
01-19
在终端中运行以下命令: vue create xxx // xxx为项目名称，例如 vue-project 然后，系统会提示我们选择默认预设或手动选择功能。使用向下箭头键，我们手动选择功能，然后按Enter键。 然后，我们将看到一系列功能选项。使用向下箭头键，我们将向下移动并使用空格键选择需要的功能，然后按回车键。 Linter / Formatter 就是代码风格。 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能。 我们将选择单独的配置文件。 我们可以选择是否将这些所有的设置保存起来，下次生成项目时，直接使用。这里不需要，就选择
vscode使用官方C/C++插件无法进行代码格式化问题
12-20
在使用Visual Studio Code (VSCode) 进行C/C++开发时，官方的C/C++插件提供了一种方便的方式来格式化代码，即通过`.clang-format`配置文件自定义代码风格。然而，当尝试使用`clang-format -style=llvm -dump-config ...
vue格式化，用tab写4个空格的问题
hanker的博客
05-10 5659
强迫症的福音 环境vue脚手架+vscode 我们安装脚手架或者下载大神们的框架的时候，里面书写的格式和自己的不一致，什么空格啊，引号，对其方式啊，很折磨人 我们来统一一下 1.安装vetur+prettier 2.设置vscode 文件-》首选项-》设置 // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, /
vscode中c++代码设置运算符两边自动加入空格
最新发布
qq_41938005的博客
04-25 308
步骤一：点击左下角齿轮，打开设置界面步骤二：在搜索框中输入 format on type，勾选上format on type步骤三：重新打开vscode。
vscode代码一保存就缩进四个空格，解决vscode缩进四个空格问题
m0_59390994的博客
07-15 7248
遇到了一个非常让人头疼的问题：不管我在设置中和settings.json中怎么改以下两个地方，都不能解决保存自动格式化时只缩进四个空格的问题。 "editor.formatOnSave": true, "editor.formatOnType": true, 问题的详细说明： 这是我想要的格式，当我格式化（Shift+Alt+F）时也是这种格式。 但是当我Ctrl+S准备运行程序的时候又变成了这种格式 或者是这种 我认为，这两种格式，不管你的Tab键...
vscode强制代码缩进为4个空格
qq_42731705的博客
07-09 4105
参考：VSCode学习【4】：vscode 设置代码格式化的缩进为4个空格注意有的时候设置了是4个空格，但是格式化代码仍然是两个空格。原因是代码在之前的电脑上被格式化过，之前的电脑设置的是两个空格。而现在使用自己的电脑虽然设置的是4个空格， 但是在vscode的设置中没有去掉，导致打开的时候vscode会自动检查代码的空格风格，认为是2个空格，导致我们设置的4个空格的缩进失效。...
vscode 设置tab按键4个空格，代码规范修改缩进，保存代码自动格式化
热门推荐
zxh7770的博客
04-13 1万+
vscode 设置tab按键4个空格，代码规范修改缩进 vscode默认会根据不同的文件设置tab键的空隙，程序员一般都想要tab按键为4个空格，这样代码看着比较规范。下面就说下设置的方法。 打开vscode进入设置 1，文件 - 首选项 - 设置（快捷键：Ctrl+，） 2，打开json文件，json文件如下图 3，在json文件最后一行后面添加以下代码，保存重启即可。 注意：设置里面的数...
vim更改缩进空格数和TAB键缩进数
点滴
12-29 1万+
打开/etc/vim/vimrc 填入如下内容： "设定 Tab 键缩进的空格数 set tabstop=4 "设定编辑器将多少空格视为一个缩进 set shiftwidth=4
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
总的来说，通过集成 Eslint 和 Vetur，并正确配置 VS Code 的设置，我们可以实现 Vue CLI 项目在 VS Code 中的代码自动格式化。这不仅有助于保持代码整洁，也有利于团队成员之间的代码一致性，从而提升开发质量和...
vue文件中HTML代码格式化方法.docx
11-22
在Vue.js开发过程中，我们经常会遇到...通过安装Vetur并指定HTML的默认格式化器，你可以轻松地使用VS Code内置的格式化快捷键对Vue文件中的HTML部分进行格式化，保持代码整洁有序，从而提升开发体验和团队协作效率。
prettier自动格式化去换行的实现代码
10-14
Prettier是一款流行的代码格式化工具，它可以帮助开发者统一代码风格，提高代码可读性和团队协作效率。在本文中，我们将深入探讨如何实现Prettier自动格式化去换行的功能，以及相关的配置设置。 首先，要实现...
vscode+配置文件-自用
09-01
vscode+配置文件-自用
vscode中，vue/cli 3.x 设置代码自动格式化时的缩进问题
u010622367的博客
03-24 2793
当我们在vscode中对vue-cli脚手架进行代码规范设置时，有时候会遇到代码缩进的问题，我们可能会根据个人习惯来设置tabSize,一般是2或者4吧。 当在setting.json里添加 "editor.tabSize": 4, "editor.formatOnSave": true, "editor.detectIndentation": false,//关掉编辑器根据文件类型进行的...
vscode 设置代码格式化缩进为4个空格
文兜兜的博客
03-04 2827
vscode配置代码格式化缩进为4个空格。
vscode配置Volar对vue3的格式化支持
牧也の博客
01-12 7184
通过项目vscode编辑器配置通过volar来保存时自动进行格式化
vscode 格式化使用Tab缩进4个制表符
weixin_63135906的博客
11-18 2643
vscode显示 缩进4个空格
VSCode保存自动缩进报错
时光不负所望
10-19 834
Vue自动缩进报错处理
vscode配置使用教程
weixin_62390438的博客
04-12 599
工欲善其事，必先利其器。想要优雅且高效的编写代码，必须熟练使用一款前端开发工具。但前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。
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` 函数。 当然，以上只是一个简单的示例，实际使用中可能需要根据具体需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值