vscode 使用Prettier插件格式化配置使用代码详解


Posted in Javascript onAugust 10, 2020

参考

问题描述

  1. 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然还有其他许多…
  2. 第一反应就是反感,后面冷静一想,还是自己做事的态度有问题,做完了功能已经完成了95%,为什么不到最后一步一键格式化,做到百分百呢?反思中

为了让以后代码美观,不让别人吐槽,自己整理了vscode + prettier

1.使用vscode 安装 prettier 插件

vscode 使用Prettier插件格式化配置使用代码详解

2.创建一个 .prettierrc.js 文件

module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, // 使用单引号
 "printWidth": 200, // 超过最大值换行
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, // 结尾不用分号
 "disableLanguages": ["vue"] // 不格式化vue文件,vue文件的格式化单独设置
};

在网上查了在vscode中配置 prettier的,感觉不生效,就不做过多演示了

why prettier?

我说一下个人的理解

  • 格式化的范围更广,HTML、CSS、JavaScript、ES6(Class的写法)、JSX、typescript;prettier 应用更广泛点
  • eslint 的eslint fix all auto-fixable problems也比较方便自动修改符合eslint规范的代码,差异不大
  • vetur 适合vue文件,使用比较局限

工具符合自己的习惯,顺手就好

Prettier 的配置文件类型

  1. 根目录创建.prettierrc 文件,能够写入YML、JSON的配置格式,并且支持.yaml/.yml/.json/.js后缀;
  2. 根目录创建.prettierrc.js文件,并对外export一个对象
module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, // 使用单引号
 "printWidth": 200, // 超过最大值换行
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, // 结尾不用分号
 "disableLanguages": ["vue"] // 不格式化vue文件,vue文件的格式化单独设置
 "trailingComma": "none" // 函数最后不需要逗号
};

推荐使用js文件作为配置文件,这样可以在配置文件中写注释,方便理解

3.在.prettierrc.json中新建prettier属性。

{
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true,
 "semi": false
}

不能在json文件中写注释

Prettier 的配置文件属性说明

{
 // 使能每一种语言默认格式化规则
 "[html]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[css]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[less]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },

 /* prettier的配置 */
 "prettier.printWidth": 100, // 超过最大值换行
 "prettier.tabWidth": 4, // 缩进字节数
 "prettier.useTabs": false, // 缩进不使用tab,使用空格
 "prettier.semi": true, // 句尾添加分号
 "prettier.singleQuote": true, // 使用单引号代替双引号
 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
 "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
 "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
 "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": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
 "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

问题整理

Vue 文件格式化之后报space-before-function-paren错误?

在网上想找prettier直接修改解决的办法,发现没有,只能另辟蹊径,下面是我整理的

1.安装eslint插件

vscode 使用Prettier插件格式化配置使用代码详解

2.先用 prettier 插件格式化

3.鼠标放到script代码中,右键 -> 源代码操作 -> eslint fix all auto-fixable problems 格式化

Vue文件中的HTML>结尾符号换行?

1.将配置文件.prettierrc.js的printWidth属性设置最大长度,尽量让html在同一行,如果html过长,换行的也是存在的,可以针对极少的手动去修改

module.exports = {
 "printWidth": 200, // 超过最大值换行
};

格式化函数的最后一个参数后面有逗号?

尾随逗号 Trailing Commas
多行时尽可能打印尾随逗号。(例如,单行数组永远不会得到尾随逗号。)

module.exports = {
	"trailingComma": "none" // 函数最后不需要逗号
};

有效选项:

“none” - 没有尾随逗号。

“es5” - 在ES5中有效的尾随逗号(对象,数组等)

“all” - 尽可能使用尾随逗号(包括函数参数)。这需要 nodejs 8。

JSX>结尾符号换行?— JSX Brackets

将 > 多行 JSX 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)。
默认CLIAPI/.prettierrc/prettier.config.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:

module.exports = {
	"jsxBracketSameLine": true, // 在jsx中把'>' 不单独放一行
};

有效选项:

true - 示例:

<button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}>
 Click Here
</button>

false - 示例:

<button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}
>
 Click Here
</button>

总结

到此这篇关于vscode 使用Prettier插件格式化配置使用的文章就介绍到这了,更多相关vscode 使用Prettier插件格式化配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
详解JavaScript 的变量
Mar 08 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 #Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 #Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 #Javascript
js实现计算器功能
Aug 10 #Javascript
You might like
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python通过文件头判断文件类型
2015/10/30 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
python 获取字符串MD5值方法
2018/05/29 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python中 * 的用法详解
2019/07/10 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2015年保管员工作总结
2015/04/30 职场文书