解决vue在webstrom中的代码格式化问题

最新推荐文章于 2024-06-04 08:54:53 发布
最新推荐文章于 2024-06-04 08:54:53 发布
阅读量5.4k 收藏 4
点赞数 1
分类专栏： 工具箱 文章标签： vue
原文链接：https://www.cnblogs.com/kongge/p/11122250.html
版权

vue 项目 webstrom IDE格式化代码规则遵循eslint设置
首先vue-cli生成了一个项目，开启了eslint的检测，

但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。

解决办法一：

编辑器打开文件

首先，在编辑器里面要启用eslint 插件

在 .eslintrc.js 上右键，菜单底部有一个 “Apply ESLint Code Style Rule” 点它，之后自动格式化就会按照 eslint 的规则了

解决办法二：

webstorm 设置页面->Editor->Code Style
里面的JavaScript右上有一个set from ,

我设置成了我想要的Standard风格,

然后HTML里面Other选项卡里面有个Do not indent children of ,加一个script,然后保存格式化

在这里插入图片描述

plan_ b
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite 创建vue3项目，使用 Prettier 统一格式化代码，集成 ESLint、Stylelint 代码校验规范
时光有伱，记忆成花~
04-08 2315
在团队开发中，保持代码风格的一致性和代码质量的高度，对于项目的可维护性和可读性非常重要。为了实现这一目标，我们可以使用工具来自动格式化代码并进行代码校验，在开发过程中捕获潜在的问题，并提供修复建议。本示例中，我们将使用 Vite 来创建一个新的 Vue 3 项目。我们将使用 Prettier 来统一格式化代码，并集成 ESLint 和 Stylelint 进行代码校验规范。
在webstom中对vue代码格式化
k393393的博客
11-15 3015
1、在webstom中格式化vue代码的时候会出现报错 格式化快捷键ctrl+alt+L 其实是因为js代码缩进问题 1、第一种方式 此方法请测有效果，组织script代码缩进 2、第二种方式 此方法是我自己摸索出来的，通过eslint修正 先通过ctrl+alt+L修正代码格式，但是这时候script代码会报错 然后在通过ctrl+alt+k,通过ESLint对script进行修正 ...
【前端 - Vue】关于ESlint代码规范及格式化插件
最新发布
前端菜鸟的自我修养
06-04 1266
主要讲解ESlint代码规范及手动修复，以及如何通过eslint插件来实现自动修正
Vue3: webstorm格式化绑定prettier
西魏陶渊明的博客
03-07 1312
webstorm格式化时候可能没有按照prettier的规则进行格式化,导致当我们使用webstorm自带的格式化。但是每次都使用右键格式化是比较麻烦的，这个时候我们就可以下面这样配置。让webstorm按照prettier的配置来进行格式化。
Webstorm和VsCode 统一格式化配置
QS8945的博客
08-28 2235
6.根目录新建lint-staged.config.js。5.根目录新建.prettierrc.js。4.根目录新建.eslintrc.js。
WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
一方湖泊
03-12 6137
参考
webstorm配置eslint一键格式化代码
专注
12-19 4401
【代码】webstorm配置eslint一键格式化代码。
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中格式化时间过滤器代码实例
01-21
本文实例为大家分享了vue格式化时间过滤器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> ...
详解VS Code使用之Vue工程配置format代码格式化
10-17
主要介绍了详解VS Code使用之Vue工程配置format代码格式化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解如何在vue项目中使用eslint+prettier格式化代码
10-17
现在，每当保存Vue文件时，Prettier会自动格式化代码，而运行`npm run lint`则会自动修复一些可以通过ESLint解决的问题。如果项目遵循`standard`或`airbnb`等特定风格指南，你可能需要进一步调整配置，以确保`eslint...
vue时间格式化实例代码
08-30
示例代码中，首先引入了formatDate函数，然后在Vue组件中使用该函数来格式化时间戳。时间戳是1469281964000，formatDate函数将其格式化为yyyy-MM-dd hh:mm的格式，即2016-07-23 21:52。 七、结论 本文提供的Vue...
webstorm - 配置ESLint 格式化代码
面朝大海，春暖花开
05-27 1134
webstorm - 配置ESLint 格式化代码 设置 点击 File -> Languages & Frameworks -> EsLint -> Manual EsLintConfiguration 使用 在需要格式化的文件中右击, 选择 Fix ESLint Problem: good luck !
webstorm vscode vue项目使用eslint+prettier自动格式化代码
qq_38669001的博客
03-28 7657
eslint+prettier自动格式化代码 1.两个依赖 需要你的vue项目已经使用了eslint+prettier，你可以在创建项目的时候选择eslint+prettier，如下图： 当然，对于老项目，你也可以选择自己安装相关依赖，就是稍微繁琐一些… 2.eslint eslint：JavaScript 代码检测工具 js相当随意，对于字符串，你可以使用'',""；在语句的最后，你可以使用;...
[效率提升]webstorm配置Prettier：代码自动格式，格式化时清除空行，修改使用代码模板
南北极之间
03-28 7131
全局安装prettier 配置：默认是没有包含Vue的，我们手动加上即可： 每次保存的时候，就会自动格式化了。
webstorm 保存运行 vue-cli 格式化（代码格式以 ESlint 为准）
Wang_make的博客
07-08 1305
webstorm 保存运行 vue-cli 格式化（代码格式以 ESlint 为准）
webstorm格式化代码_vue 3学习：6. 使用Prettier统一代码风格
weixin_39683144的博客
12-12 644
什么是PrettierPrettier 是一个 “有主见”的代码格式化工具，支持在日常开发中很多场景使用：Prettier 官网地址： https://prettier.io/安装在这里，我们的包管理工具依然选择yarn。$ yarn add prettier --dev安装完成后，查看package.json文件{ "name": "vue3-meteor", "version": "0.0...
webstorm 默认代码格式化更改，webstorm设置prettier规则
飞翔的熊blabla
10-11 7384
一.webstorm 设置界面=>Editor=>Code Style 可以设置各种文件类型的格式化规则 设置默认为单引号 二.webstorm中配置prettier 　　1.安装prettier 　　　　npm i --save-dev prettier　　或者　　npm i -g prettier　　或者　　下载插件就行 　　2.先配置prettier，然后在文件中右键就出现prettier格式化代码了 ...
WebStorm 保存时自动格式化代码 eslint修复
xn999999的博客
03-18 1052
WebStorm 保存时自动格式化代码 eslint修复
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、付费专栏及课程。

余额充值