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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
VuePress 中如何增加用户登录功能
Nov 29 Javascript
js实现翻牌小游戏
Jul 31 Javascript
详解CocosCreator消息分发机制
Apr 16 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
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python爬虫框架talonspider简单介绍
2017/06/09 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
美术毕业生求职信
2014/02/25 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
初一英语教学反思
2016/02/15 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python