Vue 学习随笔三 - webstorm简单配置

本文详细介绍如何在WebStorm中配置ESLint和Prettier,实现代码风格统一及自动化格式化,包括设置JavaScript代码风格、集成ESLint规则及使用Prettier进行代码美化。

工欲善其事,必先利其器。

现在我们说一下,刚开始新建project的时候,选择的ESLint,这是一个代码规范规则,用来统一不同开发人员,不同开发工具产生的不一样的代码风格,导致公共代码的可读性不高的问题。

需要配置一下webstorm的默认设置,CTRL+ALT+S打开设置框,Editor->Code Style -> JavaScript,右上角的 set from 选择 JavaScript Standard Style。

然后,在 Languages & Frameworks -> JavaScript 中设置 版本为 ECMAScrpit 6。

同时,我们在项目中添加 prettier 工具,这是一个代码格式化的工具,可以格式化大多数ESLint中规定的代码规范。

在webstorm中安装 prettier 插件,prettier默认的快捷键 是 CTRL+ALT+SHIFT+P 按钮,在项目的根目录中添加 .prettierrc 文件,可在上篇文末的github中获取。

内容如下:

{
"semi": false,
"singleQuote": true
}
semi false 表示格式化后代码尾部不添加分号,singleQuote true 表示自动格式化所有的双引号为单引号。

ESLint规定,HTML标签的属性,除非只有一个之外,都必须新起一行,虽然看上去代码有点丑,但是我还是习惯了,如下图:

JS部分代码为:

网上很多webstorm ESLint Prettier 的介绍,其实没那么多东西,简单配置一下就好了。

 

转载于:https://www.cnblogs.com/szwangyu51/p/9822724.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值