webstorm配置Prettier

配置好prettier发现vue文件并没有格式化代码，原因就是webstorm默认没有支持，现配置之。

1、在插件市场下载prettier

2、点击setting找到Languages&Frameworks点击打开找到Prettier，在Prettier package里选择prettier包并添加vue，最后视情况勾选On Save选项或On “Reformat Code” action选项。

{**/*,*}.{js,ts,jsx,tsx,vue}

3、写代码时用format快捷键保存即可。

一些我自己在使用的配置

.prettierrc文件

{"useTabs": false,"tabWidth": 4,"printWidth": 120,"singleQuote": true,"trailingComma": "none","semi": false
}

vs code全局配置

/*  prettier的配置 */
"prettier.printWidth": 120, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": false, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验

[效率提升]webstorm配置Prettier相关推荐

[效率提升]webstorm配置Prettier：代码自动格式，格式化时清除空行，修改使用代码模板
Prettier介绍: 一.安装方法: 方法一: 1.在webstorm的插件市场,搜索并下载prettier 方法二: 2.可以用npm全局安装,然后在webstom里面配置路径: 全局安装pret ...
webstorm配置Prettier
Prettier是代码美化工具,配置到webstorm后,可以在你保存代码的时候,自动帮你美化代码,然后配合Eslint规则,爽得不要不要的,可以节省你大量的时间,美滋滋!~废话少说,上酸菜! 一.准 ...
WebStorm 超好用的10款插件，效率提升了好多！
WebStorm 超好用的10款插件,效率提升了好多! WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.已经被广大中国JS开发者誉为"Web前端开发神器& ...
电商直播平台如何借助容器与中间件实现研发效率提升100%？
作者:鹿玄,阿里云解决方案架构师前言直播带货是近期发展非常迅猛的一种新的电商模式.构建一个电商直播平台从技术角度上大致可以分为视频直播服务.CDN.前端(H5/ 小程序).大数据.以及各种业务后台 ...
云上效率提升指南 | K8S和Serverless还能这么玩
从之前的容器到当前热门的Kubernetes.Serverless.微服务等,新技术的每一次出现,都是一场关于效率提升的革命,而效率通常包括了开发效率.运维效率和运营效率等.如果说Kubernetes ...
效率提升看得见神策 A/B 测试可视化试验能力正式上线
据了解发现,相较于产品忠诚度,用户更看重体验的愉悦感和价值感.如何围绕用户流失和留存全面"战斗"是产品能够持续发展并在行业中脱颖而出的关键.A/B 测试作为神策数据 SDAF 闭环 ...
web开发中的 emmet 效率提升工具
web开发中的 emmet 效率提升工具可以用来快速生成html 代码. 并且给各种IDE.编辑器提供了插件支持,sublime ,webstorm等. 如在webstorm中安装好emmet之后, ...
阿里测试环境运维及研发效率提升之道
摘要: 生产环境最关注的就是稳定,测试环境更关注的是研发效率,如何从一行代码最快的保证质量发到线上去,这个是我们测试环境最关注的.在全球运维大会上,阿里巴巴研发效能事业部运维中台技术专家--刘湘疆(青 ...
关于代码效率提升的方法心路历程（购物车）
关于代码效率提升的方法心路历程(购物车) 给为园友们,大家好,最近一直解决执行提速,分析老代码的逻辑并提出优化方案,在这个过程中发现了很多不好的习惯,导致很多程序逻辑执行效率低下,现在将其总结一下,如 ...

[效率提升]webstorm配置Prettier

webstorm配置Prettier

一些我自己在使用的配置

.prettierrc文件

vs code全局配置

[效率提升]webstorm配置Prettier相关推荐

最新文章

热门文章