使用prettier统一编码风格
最近由于项目参与的人越来越多来,但是每个人的编码风格又是不一样的,所以研究来一下Prettier来统一风格。(本文配置部分基于create-react-app生成的的项目,mac系统)
一、配置prettier
1、安装VScode插件:Prettire - Code formatter
2、按Shift + CMD + P,搜索Prettier并选择Prettier: Create Config File
3、然后选择你要适用Prettier的项目,然后就会在项目根目录下生成一个:.prettierrc
文件
4、配置 .prettierrc
{printWidth: 120,// 每行最多显示120个字符tabWidth: 4, // 缩进4个字符semi: true, // 每行结束都加上分号singleQuote: false // 不适用单引号,适用双引号trailingComma: "all", // 所有可能的地方都加上逗号,比如数组、对象最后一个元素
}
当然,上面这些配置可以根据项目需求调整。
5、使用:在需要格式化的文件按快捷键: Shift + Option + F
格式化代码即可。
二、prettier 配置选项说明
1、Print Width : 单行代码的最大宽度
默认值 | 命令行参数 | 配置格式 |
---|---|---|
80 |
--print-width <int>
|
printWidth: <int>
|
指定代码换行的行长度。单行代码宽度超过指定的最大宽度,将会换行。
如果在格式化 Markdown 时不想要换行,可以设置 Prose Wrap (是否换行) 选项以禁用它。
2、Tab Width : 设置代码每一个水平缩进的空格数
默认值 | 命令行参数 | 配置格式 |
---|---|---|
2 |
--tab-width <int>
|
tabWidth: <int>
|
3、Tabs :使用tab(制表位)缩进而非空格
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--use-tabs
|
useTabs: <bool>
|
4、Semicolons : 在语句末尾添加分号
默认值 | 命令行参数 | 配置格式 |
---|---|---|
true |
--no-semi
|
semi: <bool>
|
参数含义:
true - 在每一条语句后面添加分号
false - 只在有可能导致ASI错误的行首添加分号
5、Quotes: 使用单引号而非双引号
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--single-quote
|
singleQuote: <bool>
|
在JSX语法中,所有引号均为双引号,该设置在JSX中被自动忽略
在字符串中,如果一种引号在数量上超过另一种引号,数量少的引号,将被用于格式化字符串;示例:"I 'm double quoted " 被格式化后是:"I 'm double quoted "
6、Quote Props:
默认值 | 命令行参数 | 配置格式 |
---|---|---|
"as-needed"
|
--quote-props <as-needed|consistent|preserve>
|
quoteProps: "<as-needed|consistent|preserve>"
|
参数含义:
“as-needed” - 仅在需要时在对象属性周围添加引号
“consistent” - 如果对象中的至少一个属性需要加引号,就对所有属性加引号
“preserve” - 按照对象属性中引号的输入用法
7、JSX Quotes:在JSX中使用单引号
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--jsx-single-quote
|
jsxSingleQuote: <bool>
|
8、Trailing Commas:在任何可能的多行中输入尾逗号
默认值 | 命令行参数 | 配置格式 |
---|---|---|
"es5"
|
--trailing-comma <es5|none|all>
|
trailingComma: "<es5|none|all>"
|
参数:
- none - 无尾逗号
- es5 - 添加es5中被支持的尾逗号
- all - 所有可能的地方都被添加尾逗号
9、Bracket Spacing: 括号空格
默认值 | 命令行参数 | 配置格式 |
---|---|---|
true |
--no-bracket-spacing
|
bracketSpacing: <bool>
|
有效参数:
- true - 格式化结果为 :
{ foo: bar }
- false - 格式化结果为 :
{foo: bar}
10、JSX Brackets: 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行(不适用于自闭和元素)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--jsx-bracket-same-line
|
jsxBracketSameLine: <bool>
|
有效参数:
- true - 格式化结果为 :
<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here
</button>
- false - 格式化结果为 :
<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}
>Click Here
</button>
11、Arrow Function Parentheses:为单行箭头函数的参数添加圆括号 (适用于v1.9.0+)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
"always"
|
--arrow-parens <always|avoid>
|
arrowParens: "<always|avoid>"
|
有效参数:
- true - 格式化结果为 :
x => x
- false - 格式化结果为 :
(x) => x
12、Range:只格式化某个文件的一部分
默认值 | 命令行参数 | 配置格式 |
---|---|---|
0 |
--range-start <int>
|
rangeStart: <int>
|
Infinity |
--range-end<int>
|
rangeEnd: <int>
|
这两个参数可以用于从指定起止偏移字符(单独指定开始或结束、两者同时指定、分别指定)格式化代码。
以下情况,范围将会扩展:
- 回退至包含选中语句的第一行的开始
- 向前直到选中语句的末尾
- 注意:这些参数不可以同cursorOffset共用;
13、Parser:指定使用哪一种解析器
默认值 | 命令行参数 | 配置格式 |
---|---|---|
None |
--parser < string> ./my-parser
|
parser: "<string>" parser: require("./my-parser")
|
Prettier会自动从输入文件路径推断出解析器,因此不必更改此设置。
babel和flow解析器都支持相同的JavaScript功能集(包括Flow类型注释)。
在某些情况下它们可能会有所不同,因此,如果遇到其中一种情况,可以尝试使用flow代替babel。
typescript和babel-ts几乎相同。 babel-ts可能支持TypeScript尚不支持的JavaScript功能(建议),但与无效的代码相比,它的宽松性较低,并且比typescript分析器少了经过测试的考验。
参数及支持的版本:
"babel"
v1.16.0+"babel-flow"
v1.16.0+"babel-ts"
v2.0.0+"flow"
"typescript"
v1.4.0+"css"
v1.7.1+"scss"
v1.7.1+"less"
v1.7.1+"json"
v1.5.0+"json5"
v1.13.0+"json-stringify"
v1.13.0+"graphql"
v1.5.0+"markdown"
v1.8.0+"mdx"
v1.15.0+"html"
v1.15.0+"vue"
v1.10.0+"angular"
v1.15.0+"lwc"
v1.17.0+"yaml"
v1.14.0+
14、File Path: 指定文件的输入路径,这将被用于解析器参照
默认值 | 命令行参数 | 配置格式 |
---|---|---|
None |
--stdin-filepath <string>
|
filepath: "<string>"
|
示例:使用postcss解析器
cat foo | prettier --stdin-filepath foo.css
15、Require pragma:严格按照文件顶部的一些特殊的注释格式化代码 (适用于v1.7.0+)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--require-pragma
|
requirePragma: <bool>
|
例如,当提供了--require-pragma
时,具有以下内容作为其第一注释的文件将被格式化
/*** @prettier*/
/*** @format*/
16、Insert Pragma:在文件的顶部插入一个 @format的特殊注释,以表明改文件已经被Prettier格式化过了 (适用于v1.8.0+)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--insert-pragma
|
insertPragma: <bool>
|
在使用 --require-pragma参数处理一连串的文件时这个功能将十分有用。
如果文件顶部已经有一个doclock,这个选项将新建一行注释,并打上@format标记。
17、Prose Wrap:文本样式进行折行(使用于v1.8.2+)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--insert-pragma
|
insertPragma: <bool>
|
默认情况下,Prettier会因为使用了一些折行敏感型的渲染器(如GitHub comment 和 BitBucket)而按照markdown文本样式进行折行。
但在某些情况下,可能只是希望这个文本在编译器或查看器中当屏幕放不下时发生软折行,所以这一参数允许设置为 "never"
有效参数:
"always"
- 当超出print width(上面有这个参数)时就折行"never"
- 不折行"perserve"
- 按照文件原样折行 (v1.9.0+)
18、HTML Whitespace Sensitivity:(适用于v1.15.0+)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
"css"
|
--html-whitespace-sensitivity <css|strict|ignore>
|
htmlWhitespaceSensitivity: "<css|strict|ignore>"
|
有效参数:
"css"
- 遵守CSS显示属性的默认值"strict"
- 空格被认为是敏感的"ignore"
- 空格被认为是不敏感的
关于这个字段的配置,更多请参考:https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
19、Vue files script and style tags indentation:缩进Vue文件中
默认值 | 命令行参数 | 配置格式 |
---|---|---|
false |
--vue-indent-script-and-style
|
vueIndentScriptAndStyle: <bool>
|
有效参数:
- false - 不缩进Vue文件中的脚本和样式标签
- true - 缩进Vue文件中的脚本和样式标签
20、End of Line:设置统一的行结尾样式(适用于v1.15.0+)
默认值 | 命令行参数 | 配置格式 |
---|---|---|
"lf"
|
--end-of-line <lf|crlf|cr|auto>
|
endOfLine: "<lf|crlf|cr|auto>"
|
有效参数:
"lf"
– 仅换行(\ n),在Linux和macOS以及git repos内部通用"crlf"
- 回车符+换行符(\ r \ n),在Windows上很常见"cr"
- 仅回车符(\ r),很少使用"auto"
- 保持现有的行尾(通过查看第一行后的内容对一个文件中的混合值进行归一化)
由于历史原因,文本文件中存在两种常见的行尾样式。 即\ n(对于换行,为LF)和\ r \ n(对于回车+换行,为CRLF)。前者在Linux和macOS上很常见,而后者在Windows上很普遍。
当人们使用不同的操作系统在一个项目上进行协作时,很容易在共享的git存储库中以混合的行结尾来结束。 Windows用户也可能会意外地将先前提交的文件中的行尾从LF更改为CRLF。 这样做会产生较大的git diff,从而使文件(git blame)的逐行历史记录更加难以浏览。
使用\ n(LF)时,所有操作系统中的所有现代文本编辑器均能够正确显示行尾。 但是,用于Windows的旧版本的记事本会在视觉上将此类行压缩为一条,因为它们只能处理\ r \ n(CRLF)。
文章参考
https://prettier.io/docs/en/options.html#prose-wrap
使用prettier统一编码风格相关推荐
- idea设置统一编码风格
1.代码模板:Code Templates设置 现在的项目一般都是一个团队共同开发,而每个人都有自己的编码习惯,为了统一格式,项目组在项目开发之前都会制定一系列的规范.俗话说约定优于配置,但是在 ...
- 在vscode中统一vue编码风格的方法
vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .v ...
- 在 vscode 中统一 vue 编码风格,解决代码报错不能启动问题
原文:http://www.itboth.com/d/bmA3ym/eslint-vue 推荐:VUEJS 实战教程第三章,利用laypage插件实现分页 [VUEJS 实战教程第三章,利用laypa ...
- 前端通过eslint+prettier+husky统一代码风格
背景 多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
- JavaScript编码风格指南
首次发表在个人博客 前言 程序语言的编码风格指南对于一个长期维护的软件而言是非常重要的;好的编程风格有助于写出质量更高.错误更少.更易于 维护的程序. 团队合作需要制定一些代码规范还有利用一些工具来强 ...
- 一些达成共识的JavaScript编码风格约定
如果你的代码易于阅读,那么代码中bug也将会很少,因为一些bug可以很容被调试,并且,其他开发者参与你项目时的门槛也会比较低.因此,如果项目中有多人参与,采取一个有共识的编码风格约定非常有必要.与其他 ...
- Google C++ 编码风格精简
Google C++ 编码风格精简 头文件: 1.头文件防多重定义define格式:<PROJECT>_<PATH>_<FILE>_H_ 2.能使用前置声明尽量不用 ...
- Python 编码风格参考
2019独角兽企业重金招聘Python工程师标准>>> 代码除了用来运行外,更多的是用来读.为了是代码的可读性更强,很多编程语言都有自己的编码规范.规范的制定是为了保持代码的一致性, ...
- 良好的JavaScript编码风格(语法规则)
编码风格 1.概述 "编程风格"(programming style)指的是编写代码的样式规则.不同的程序员,往往有不同的编程风格. 有人说,编译器的规范叫做"语法规则& ...
- c语言编码风格,讲嵌入式C语言编码风格.ppt
讲嵌入式C语言编码风格 目 录 简介及说明 语言规则 1.基础 2.数据 3.说明与表达式 4.函数 5.内存及资源 6.源文件 风格指导 7.程序书写 8.命名 9.文档 简介及说明 正确性 易维护 ...
最新文章
- webkit入门准备
- Python进程池,线程池,协程池
- python 爬虫源代码-从零开始学Python网络爬虫_源代码.rar
- IOS开发之GCD的基本知识
- Echarts --- 各个省份的坐标
- Jeecg-P3 1.0.1版本发布,轻量级微服务框架
- 【转】Word 2010 取消拼写/语法检查,隐藏红线/绿线
- 计算机中 amp 是什么符号,这里面的amp;amp;,||是什么意思,相当与数学里面的什么符号?...
- 04-Redis 数据持久化实践
- 求一个只包含0、1的矩阵中只包含1的最大子矩阵大小
- Unity Mesh(一) 初步使用Mesh画平面图形
- 给代币添加高级功能-代币管理、增发、兑换、冻结等
- memcpy函数优化及DMA对比
- java开发中购物车问题,困扰一天的购物车有关问题
- rwby游戏 linux,《RWBY:戮兽之蚀》PC官方中文整合版下载发布!
- flyway使用--基础
- 单调队列————[USACO09MAR]向右看齐Look Up
- 性格色彩测试android程序开发之九--sqlite数据库
- python爬虫有什么好处_python为什么叫爬虫 python有什么优势
- Spring基础复习总结