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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
js的逻辑运算符 ||
May 31 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 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的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
javascript 闭包详解
2015/02/15 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
利用python修改json文件的value方法
2018/12/31 Python
详解python播放音频的三种方法
2019/09/23 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
请介绍一下WSDL的文档结构
2013/03/17 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
工资收入证明
2014/10/07 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015年科室工作总结
2015/04/10 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
一文搞懂php的垃圾回收机制
2021/06/18 PHP