程序生涯:你必须知道的操作:WebStorm配置代码格式化
WebStorm配置代码格式化配置WebStorm的代码格式化功能,使自动代码格式后符合ESLint+Prettier代码检测规范。 通过vue-cli脚手架工具搭建vue项目时,会让我们选择是否配置ESLint(代码检测工具),很多人会选择No,因为一旦有了检测,会降低开发效率(经常报错)。 但我在实际工作中会选择配置它。 因为一方面可以养成良好的代码习惯,写出来的代码可读性高, 另一方
配置WebStorm的代码格式化功能,使自动代码格式后符合ESLint+Prettier代码检测规范。
通过vue-cli脚手架工具搭建vue项目时,会让我们选择是否配置ESLint(代码检测工具),很多人会选择No,因为一旦有了检测,会降低开发效率(经常报错)。
但我在实际工作中会选择配置它。
因为一方面可以养成良好的代码习惯,写出来的代码可读性高,
另一方面可以使团队协作的项目中代码风格一致,便于维护。
在使用脚手架创建项目时,我选择了 ESLint + Prettier。这也是使用比较多的一个组合。
而一旦配置了代码检测工具,我们在使用WebStorm的Reformat Code功能时,就会出现下图这样的警告,甚至报错。
![](https://img-blog.csdnimg.cn/20200710172705150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200710172705125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020071017270536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)
这是因为WebStorm的默认格式化标准不同造成的,一些玩家选择修改.eslintrc.js
文件中的规则(rules)来让检测工具“迎合”IDE,我不太喜欢这样,而且也不能解决一些问题(比如eslint不报错了,但Vue却还是会报错等等)。
下面记录下我的最终解决办法。
一、修改代码缩进
依次进入WebStorm的
File => Settings => Editor => Code Style
将缩进设置为2(个空格),其中包括Style Sheets中的各种css语言文件、html文件、JavaScript文件和其它类型文件(根据实际情况),如下图所示。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200710172836638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)
二、修改标签后换行不缩进
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项目》
更多推荐
所有评论(0)