webstorm 开发vue设置code style

最新推荐文章于 2024-06-13 17:24:57 发布
最新推荐文章于 2024-06-13 17:24:57 发布
阅读量3k 收藏
点赞数
分类专栏： 学习记录 webstorm vue 分享 mac 文章标签： webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012436704/article/details/89200454
版权
学习记录 同时被 3 个专栏收录
53 篇文章 1 订阅
订阅专栏
分享
19 篇文章 0 订阅
订阅专栏
vue
9 篇文章 0 订阅
订阅专栏

webstorm开发vue的时候，第一次提交的时候发现eslint 的校验，一一修复之后，在commit代码之后，发现依然报错，在js代码中一直给我刷新成缩紧两个空格的形式，最后才发现是代码本身的style设置有坑，下面是解决办法。

1.打开webstorm的设置页面 快捷键操作

在这里插入图片描述
可以看到这是配置javascript风格的设置区域，可以参考eslint的需求进行默认设置，左边勾选，右边可以直接看到效果很方便。
我开始只是在这个区域内进行的设置，导致每次vue里面的script标签内的代码都是默认缩进了两个空格

查看html的style

在这里插入图片描述
这里设置html文件内，不需要缩紧的子标签，我们只要点击那个小文件标志打开下个界面
在这里插入图片描述
点击添加，把script标签加入即可啦

暗影刀客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webstorm 相关的设置
01-20
10. **检查与代码质量**：WebStorm提供了代码检查工具，如ESLint、Prettier等，可在`Editor` > `Inspections`和`Code Style`中配置，以确保代码质量和遵循编码规范。 11. **自动保存与重构**：你可以设置自动保存的...
webStorm的代码换行自动缩进设置
w506667090的博客
04-26 9723
我们写代码的时候，一般代码缩进都是4个空格，但是在前端开发中，建议使用2个空格来进行代码缩进。 1.设置HTML页面代码缩进 点击Webstorm中File->Settings->Editor->Code Style->HTML(也可以使用快捷键Ctrl+Alt+S进入Settings，搜索HTML)。来设置HTML的代码缩进。 2.设置JavaScript代码缩进 和上面一样，点击Webstorm中File->Settings->Editor...
webstorm（2019）配置eslint规范
siyi_blog的博客
04-24 2万+
在项目中我们为了代码书写更规范，在项目中安装ESlint帮助我们检查语法，那么下面介绍下在webstorm中如何配置ESlint规范 步骤如下： 1.快捷键:ctrl+alt+s打开设置，找到Code Style，将Indents Detection和EditorConfig下的去掉勾选，具体看下图 2.在Code Style子文件下找到你想修改的文件类型，将缩进全部改为2 ...
webstorm自定义vue模板
最新发布
qq_48403611的博客
06-13 304
【代码】webstorm自定义vue模板。
Vue（3）webstorm代码格式规范设置与vue模板配置
weixin_43880991的博客
06-25 1965
编译器代码格式规范设置 通常我们写代码时，代码缩进都是4个空格，但是在前端中，据全球投票统计，建议使用2个空格来进行代码缩进。 首先我们打开webstorm中的设置，如果使用的是mac的同学直接使用command + ,快捷方式，来到Editor-->Code Style-->HTML，将Tab size和Indent的值改为2，同理在JavaScript中也改为2 vue模板配置 ...
webstorm配置vue文件模板和代码样式
江湖行骗老中医
11-02 1621
vue文件模板 preference -> Editor -> File and Code Templates 红色箭头的选项是在这个模板的基础上再格式化一遍，去掉勾选就会按照上面的原样呈现 这里的模板语言使用的是Apache Velocity 其他类型文件配置同理 webstorm的内置变量：${PROJECT_NAME}- 项目名称${NAME} - 新建文件名称（不包括后缀名）${USER} - 用户名${DATE} - 当前日期YYYY/MM/DD${TIME} - 当前系统时间
解决vue在webstrom中的代码格式化问题
plan_jok的博客
11-03 5543
vue 项目 webstrom IDE格式化代码规则遵循eslint设置 首先vue-cli生成了一个项目，开启了eslint的检测， 但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。 解决办法一： 编辑器打开文件 首先，在编辑器里面要启用eslint 插件 在 .eslintrc.js 上右键，菜单底部有一个 “Apply ESLint Code Style Rule” 点它，之后自动格式化就会按照 eslint 的规则了 解决办法二： webstorm 设置页面-&
webstorm-config:Webstorm 配置 - 实时模板、键盘映射、颜色、代码样式
06-04
代码样式（Code Style）定义了代码的格式规范，如缩进方式、空格数量、命名规则等。WebStorm 允许你为每种语言设置独立的代码风格，并可以应用到整个项目或者特定文件。遵循一定的代码风格能保持代码整洁，提高团队...
eslintpluginvue一个自定义的eslintparser可以直接处理vue文件并检查模板里的语法错误
08-08
6. **集成开发环境（IDE）支持**：许多流行的 IDE 和代码编辑器（如 Visual Studio Code、WebStorm 等）都有 ESLint 集成，配合 `eslint-plugin-vue` 可实现实时的代码检查和错误高亮。 7. **与其他工具的兼容性**...
webstorm settings 配置
11-16
webstorm settings 配置已配好。黑色主题风格；适用于web前端程序员code style风格，vue，js，html，css，node 的代码使用配置；模板等；
webstorm-config
03-07
4. **editor.codeStyle**：包含了代码风格和格式化规则，比如缩进大小、换行处理等。 5. **inspection**：配置了代码检查和静态分析的规则，帮助开发者发现潜在的问题。 6. **keymap**：自定义的快捷键绑定，使...
webstorm code style
11-16
使用方式打开webstorm ，点击setting-Editor-》code style - 》manage import；
WebStorm默认配置
03-14
配置ide文件内容 https://blog.csdn.net/GameCocos2dx/article/details/88545180
webstorm 默认代码格式化更改，webstorm设置prettier规则
飞翔的熊blabla
10-11 7530
一.webstorm 设置界面=>Editor=>Code Style 可以设置各种文件类型的格式化规则 设置默认为单引号 二.webstorm中配置prettier 　　1.安装prettier 　　　　npm i --save-dev prettier　　或者　　npm i -g prettier　　或者　　下载插件就行 　　2.先配置prettier，然后在文件中右键就出现prettier格式化代码了 ...
webstorm 默认代码格式化更改
qq_43549745的博客
09-08 3358
webstorm 默认代码格式化更改，webstorm设置prettier规则 一.webstorm 设置界面=>Editor=>Code Style 可以设置各种文件类型的格式化规则 设置默认为单引号 二.webstorm中配置prettier 　　1.安装prettier 　　　　npm i --save-dev prettier　　或者　　npm i -g prettier　　或者　　下载插件就行 　　2.先配置prettier，然...
关于webstorm 对 vue的设置
LeachZhou的博客
03-28 3573
首先安装vue插件，安装方法：　　setting –> plugin ，点击plugin，在内容部分的左侧输入框输入vue，会出现两个关于vue的插件，点击安装即可。安装完成后，就可以看到，新建文件时，会有vue文件的提示。　　如下图所示： 　　 设置vue新建文件模板。　　步骤： settings –> file and code templates .在内容区域左侧点击vue f
webstorm格式化配置
tianlin0203的博客
05-07 1563
本文采用个人认为比较合理的格式化配置。打开webstorm的 Editor > Code Style。
webstorm设置模板和设置缩进长度
水果623的博客
02-08 2620
webstorm设置模板和设置缩进长度1、设置缩进长度进入File->setting->Editor->Code Style进行设置2、设置模板进入ile->setting->Editor->Live Templates 1、设置缩进长度 进入File->setting->Editor->Code Style进行设置 如下图(这里我设置成两个空...
webStorm修改缩进排版
热门推荐
逸尘的专栏
07-07 2万+
**菜单选项入口：**File->Setting->Editor->Code Style->JavaScript页面中选择 tabs and indents标签： cnnode源代码，用webstorm打开，indent缩排时2，而webstorm默认时4，在换行的时候总是多出两个空格，将webstorm中的indent修改成2。
webstorm开发vue项目常用插件
03-14
当开发Vue项目时，WebStorm是一个非常强大的IDE工具，它提供了许多常用的插件来提高开发效率和便捷性。以下是一些常用的WebStorm插件： 1. Vue.js插件：这是WebStorm官方提供的插件，它为Vue.js开发提供了丰富的功能支持，包括语法高亮、代码补全、组件导航等。 2. Vetur：这是一个由Vue.js核心团队开发的插件，它提供了更全面的Vue.js开发支持，包括语法检查、代码片段、模板预览等功能。 3. ESLint：这是一个非常流行的JavaScript代码检查工具，可以帮助你保持代码风格的一致性，并发现潜在的错误。在WebStorm中使用ESLint插件可以方便地进行代码检查和修复。 4. Prettier：这是一个代码格式化工具，可以帮助你自动格式化代码，使其符合统一的风格。在WebStorm中使用Prettier插件可以轻松地格式化Vue文件和JavaScript代码。 5. Git Integration：WebStorm内置了Git集成功能，可以方便地进行版本控制操作。你可以使用Git插件来更好地管理和提交代码。 6. Live Server：这是一个简单而强大的本地服务器插件，可以帮助你在开发过程中实时预览网页。它支持自动刷新和热重载，非常适合前端开发。 7. Material Theme UI：这是一个主题插件，可以为WebStorm提供漂亮的外观和更好的用户体验。你可以根据自己的喜好选择不同的主题风格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值