-
2022-06-09 14:43:24更多相关内容
-
Webstorm 代码格式化空格不一致问题
2018-07-12 10:35:27问题背景:vue开发,使用ESLlint作为代码格式校验问题描述:webstorm for windows和for mac os,使用快捷键代码格式化结果不一致,导致有些格式需要自己手动修改的问题。问题图述:mac环境-格式化前:mac环境-...问题背景:
vue开发,使用ESLlint作为代码格式校验
问题描述:
webstorm for windows和for mac os,使用快捷键代码格式化结果不一致,导致有些格式需要自己手动修改的问题。
问题图述:
mac环境-格式化前:
mac环境-格式化后:
windows环境-格式化后
问题就在于,在windows环境下data后面的空格消失了,如何与mac os保持一直?
解决方法:
1.将webstorm升级至2017.3及以上版本
2.在
.eslintrc.js
上右键,菜单底部有一个 "Apply ESLint Code Style Rule" 点它,之后自动格式化就会按照 eslint 的规则了3.重新使用代码格式化快捷键,查看问题是不是解决了
补充:如果想要快捷修复ESLint校验问题,也可以点击“Fix ESLint Problems”解决
关于进一步的个性化编码配置,请参考"setting" -->"Editor" --> "Code Style" --> "JavaScript",然后在tab栏,切换到spaces,通过勾选完成你想要的空格配置。
图解:
希望能够帮到大家!
-
webstorm 代码格式化后,rpx出现空格问题
2021-08-16 09:27:19在进行小程序开发时,我们可能不希望使用微信开发平台的代码编辑器,会选择自己常用的编辑器,在更熟练...在使用webstorm开发小程序中,当我Ctrl+alt+l进行格式化时,发现样式rpx和数值之前多了一个空格,如下: ...写在前面
我是一个webstorm的忠实粉丝,主要就是觉得编辑器好看,哈哈,但是最近公司要开发小程序,下载了微信开发工具,觉得那编辑器界面实在太丑了,果断放弃!
踩坑经历
正当我开发的一路畅通时,一键格式化后,发现样式的rpx前面出现了一个空格,我天儿,怎么回事???样式全部乱了!!!
看到样式乱了第一反应肯定是rpx语法无法识别导致,所以百度了一番,主要借鉴了以下两篇文章- https://blog.csdn.net/qq_42339350/article/details/117361243?utm_source=app&app_version=4.13.0
- https://www.wodecun.com/blog/7945.html
解决方案
网上文章基本上千篇一律,总结一下,主要以下两种方法,选择自己觉得方便的就行!
方案一
windows下载sed(自行百度下载或关注公众号:‘百家券’,发送‘sed’,即可获取)
配置Tools->File Watchers->+
//windows系统配置规则如下 -i s/"\ rpx"/rpx/g $FilePath$ //MacOS系统配置规则如下 -i "" s/"\ rpx"/rpx/g $FilePath$ 注意:File type 如果使用了scss请选择scss文件,否则选择css
方案二(推荐)
1、安装插件:
WeChat weapp Support
WeChat mini program support/2、安装完成以后去setting->Languages & Frameworks->Wechat Mini Program-启用,然后重启webstorm就可以了
外卖红包优惠券在哪里领,那些天天都可以领外卖优惠券的公众号是真的吗?
给大家透露一个消息,美团饿了么每天都会放出一些隐藏的大额红包,对于经常点外卖的你,不领红包直接原价付款,那就太亏了!!!!!!!!!
每天免费领的外卖优惠券,还买什么15块月会员!!!!!!!!
使用微信扫一扫,一起来撸羊毛吧↓↓↓
-
程序生涯:你必须知道的操作:WebStorm配置代码格式化
2020-07-10 17:31:58WebStorm配置代码格式化 配置WebStorm的代码格式化功能,使自动代码格式后符合ESLint+Prettier代码检测规范。 通过vue-cli脚手架工具搭建vue项目时,会让我们选择是否配置ESLint(代码检测工具),很多人会选择...配置WebStorm的代码格式化功能,使自动代码格式后符合ESLint+Prettier代码检测规范。
通过vue-cli脚手架工具搭建vue项目时,会让我们选择是否配置ESLint(代码检测工具),很多人会选择No,因为一旦有了检测,会降低开发效率(经常报错)。
但我在实际工作中会选择配置它。
因为一方面可以养成良好的代码习惯,写出来的代码可读性高,
另一方面可以使团队协作的项目中代码风格一致,便于维护。在使用脚手架创建项目时,我选择了 ESLint + Prettier。这也是使用比较多的一个组合。
而一旦配置了代码检测工具,我们在使用WebStorm的Reformat Code功能时,就会出现下图这样的警告,甚至报错。
 这是因为WebStorm的默认格式化标准不同造成的,一些玩家选择修改
.eslintrc.js
文件中的规则(rules)来让检测工具“迎合”IDE,我不太喜欢这样,而且也不能解决一些问题(比如eslint不报错了,但Vue却还是会报错等等)。下面记录下我的最终解决办法。
一、修改代码缩进
依次进入WebStorm的
File => Settings => Editor => Code Style
将缩进设置为2(个空格),其中包括Style Sheets中的各种css语言文件、html文件、JavaScript文件和其它类型文件(根据实际情况),如下图所示。
二、修改标签后换行不缩进
ESLint + Prettier 约定了
<script>
标签和<style>
标签后的首行代码不缩进,我们也要配置一下。
进入
File => Settings => Editor => Code Style => HTML => Other
在 Do not indent children of 一栏中加入script标签和style标签,如下图所示。三、设置函数名和花括号的空格
ESLint + Prettier 约定了:
● 函数声明时,函数名后不加括号;
● 在函数表达式中function后面括号前不加空格;
● 花括号中(插值表达式/解构赋值)首尾要增加空格。
我们在
File => Settings => Editor => Code Style => JavaScript => Spaces
做如下配置(见下图):现在,就可以愉快地使用WebStorm的 Code => Reformat Code 来自动格式化代码,而不用担心格式完后一堆报错了。
四、相关:vue-cli脚手架工具
如果想了解vue-cli脚手架工具搭建vue项目的相关内容,可以阅读我的另外两篇笔记:
《Vue CLI 2.x搭建Vue项目》
《Vue CLI 3.x搭建Vue项目》 -
webStorm的代码换行自动缩进设置
2022-04-26 22:26:04我们写代码的时候,一般代码缩进都是4个空格,但是在前端开发中,建议使用2个空格来进行代码缩进。 1.设置HTML页面代码缩进 点击Webstorm中File->Settings->Editor->Code Style->HTML(也可以使用... -
webstorm禁止自动去除空行空格的方法
2020-05-21 10:38:44webstorm会自动去除空行里的空格,或者一行代码末尾的多余空格。 但是在项目中,没有明确空格的代码规范,所以webstorm的自动去除空格有时候会在git时造成不必要的冲突,干脆就忽视这一功能。 将这两处设置好就... -
webstorm缩进两个空格设置
2020-07-24 14:48:44webstorm缩进两个空格设置 -
webstorm格式化 rpx前有空格
2022-03-27 19:40:39sed.exe下载地址 链接:...提取码:vy8a 在 设置–>工具–>File Watchers 配置 D:\Program Files\JetBrains\WebStorm 2019.1\bin\sed -i s/"\ rpx"/rpx/g $FilePath$ $FilePath$ -
Webstorm 代码格式化 es6语法支持
2018-11-03 19:59:08空格不一致,比如:data() ,es6应该是data (),少了个空格 解决方法: 1.将webstorm升级至2017.3及以上版本 2.在 .eslintrc.js 上右键,菜单底部有一个 "Apply ESLint Code Style Rule" 点它,之后... -
解决webstorm代码格式化与eslint-vue 缩进规则冲突
2021-04-24 22:15:32webstorm 设置Vue中 Script 标签首层不缩进解决方法1(放弃缩进):解决方法2(仍要缩进): webstorm 的缩进规则与 eslint-vue 冲突, webstorm格式化后如下: <script> exports default { } </script&... -
格式化代码失效webstorm
2021-06-13 05:12:53标签(空格分隔): 格式化代码 webstorm我是前端开发,使用的编译器是webstorm最近,想换一个主题,喜欢sublime的干净清晰,于是把sublime的主题jar包导入。发现一个问题出现就是:格式化代码的快捷键失效。查阅网上... -
微信小程序、uni的 rpx 在 webstorm 中格式化代码时出现多余空格的解决办法
2021-04-30 22:41:10安装一个插件,并关闭检查即可解决。 安装插件 关闭检查 -
webStorm:即使正确的代码也会提示绿色波浪线的解决方法
2020-05-25 16:53:57(代码提示:Typo: In word ‘onreadystatechange’ less… (Ctr|+F1) Spellchecker inspection helps locate typos and misspelling in your code, comments and literals, and fix them in one click.) 如下情况... -
Vue(3)webstorm代码格式规范设置与vue模板配置
2021-06-25 09:00:01通常我们写代码时,代码缩进都是4个空格,但是在前端中,据全球投票统计,建议使用2个空格来进行代码缩进。 首先我们打开webstorm中的设置,如果使用的是mac的同学直接使用command + ,快捷方式,来到Editor-->... -
Webstorm格式化代码用VScode的配置
2020-08-29 09:54:13我在使用webstorm做开发几年后,碰见了喜欢使用vscode的同事一起开发,但是出现了代码格式化不一致问题,这里我记录了我解决webstorm格式化适用vscode 禁用script标签后export缩进问题 在 webstorm 配置中 找到... -
webstorm打开代码显示异常
2020-04-27 10:07:00webstorm昨天匆忙改了代码,今天打开该部分代码提示Cannot identify version of git executable: no response,打开代码显示异常,全是空格 setting里测试GIT是好的. ![图片说明]... -
WebStorm VUE代码格式化后ESLINT报错缩进问题,重新配置代码格式化的方法
2020-03-02 16:05:51WebStorm配置代码格式化 配置WebStorm的代码格式化功能,使自动代码格式后符合ESLint+Prettier代码检测规范。 通过vue-cli脚手架工具搭建vue项目时,会让我们选择是否配置ESLint(代码检测工具),很多人会选择No... -
Webstorm 格式化代码快捷键
2021-02-27 22:35:32写代码忘记加空格,有的时候还需要一个一个去补,直到解锁了一键格式化代码的快捷键,简单做一下分享 Ctrl + Alt + L -
webstorm 开发vue.js项目总提示空格报错
2018-11-29 16:43:55webstorm总是提示空格报错,然后怎么删除都不行 看了下网上的 方法,修改.eslintrc.js // https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: '... -
vscode和webstorm中如何显示隐藏的tab和空格
2020-05-25 10:07:52近期由于老项目之前代码规范没有统一,导致代码的缩进是用tab 还是 空格键没有一个统一的规范! 但是在代码提交合并的时候,就出问题了,没有修改的文件也会显示有更改,对于这种情况,我们可以使用sublime去codeview我们... -
WebStorm下将vue的代码缩进由2个空格改为4个空格
2018-02-01 14:59:46最近刚接触vue,发现按tab缩进代码时缩进一直是2格而不是4格,检查了一下WebStorm的配置: File > Settings > Editor > Code Style > JavaScript的设置,发现Indent的键值为4: 这样配置是没有错的,于是找了下... -
【分享】webstorm 配置Prettier 配置.prettierrc自动格式化代码
2022-05-13 11:32:16"trailingComma":"none", "arrowParens": "avoid" } semi: 是否使用分号,默认true,使用分号 singleQuote: 是否使用单引号,默认为false,不使用单引号,使用双引号 bracketSpacing: 字面量对象括号中的空格,... -
WebStorm与VSCode的代码格式化冲突
2020-07-08 18:00:15自闭合的标签,闭合前补充空格 Settings > Editor > Code Style > HTML > Other(Tab页) > 勾选 in empty tag 句尾冒号分割,永远使用单引号,多行保留最后一项的逗号 Settings > Editor > ... -
WebStorm 代码很长自动换行
2020-08-29 13:47:51webstorm 的格式化代码只是对代码的缩进、空格进行了调整,完整的一行代码并不会换行,但是我们可以自行的对代码进行换行设置,具体操作如下: 在代码编辑窗口的左半部分,右击鼠标,如下图。出现以下几个选项,... -
解决WebStorm与VSCode的代码格式化冲突
2020-06-09 10:38:03到了新公司发现同事用的都是VSCode,而VSCode的格式化代码与WebStorm的不一致。 因为前后端都做,用惯了JetBrains全家桶,导致不太适应VSCode,最后所以打算调整一下代码的格式化,继续用webstorm开发。 自闭合的... -
解决webStorm中终端使用Git无法使用空格, 以及中文乱码问题
2021-03-08 10:38:25解决webStorm中终端使用Git无法使用空格, 以及中文乱码问题原因解决1: git的空格问题解决2:git的中文问题 原因 电脑: windows系统 webstrom 默认的终端是使用cmd终端, 而非官方git终端. 而 webStorm对cmd终端编码的... -
webstorm 2019版本,Ctrl+/ 去除html注释默认加空格并以行开始位置对齐
2020-12-11 13:55:12webstorm 2019版本,去除html注释默认加空格并以行开始位置对齐 File =>Settings =>Editor=>Code Style =>HTML=> Code Genneration 把以下两项的√取消即可 -
WebStorm格式化代码,微信小程序rpx出现空格问题
2018-08-14 19:32:31格式化 rpx出现空格问题 //windows系统 sed -i s/"\ rpx"/rpx/g $FilePath$ //MacOS系统 sed -i "" s/"\ rpx"/rpx/g $FilePath$ windows系统如图所示配置 苹果系统如图所示配置 注意:windows系统需要下载sed这个... -
webstorm vue 向内缩进4个空格
2020-03-23 15:12:10创建一个vue新工程后,在webstorm等ide里面打开项目,发现每行的缩进是2个空格,但是个人觉得看着整体页面实在怪怪的,强迫性的希望能向内缩进4个空格。 首先想到的就是设置webstorm的CodeStyle配置: File > ... -
webstorm格式化代码与eslint冲突的问题
2020-06-29 10:40:11升级webstorm版本后,格式化代码后,代码风格可能与之前会有区别,导致看着别扭,eslint还飘红。 解决方式是启用自定义的code style设置。截图如下: 如果设置里没有这个选项,则可以在项目根目录下添加....