做网页引用别的网站的视频,做网站用什么后台,如何推广一个app,网站推广如何做的前言
前段时间#xff0c;因为项目的prettier的配置和eslint格式检查有些冲突#xff0c;在其prettier官网和百度了一些配置相关的资料#xff0c;在此做一些总结#xff0c;以备不时之需。 Prettier官网
Prettier
Prettier 是一种前端代码格式化工具#xff0c;支持ja…前言
前段时间因为项目的prettier的配置和eslint格式检查有些冲突在其prettier官网和百度了一些配置相关的资料在此做一些总结以备不时之需。 Prettier官网
Prettier
Prettier 是一种前端代码格式化工具支持javascript、jsx、typescript、css,less和scss、html、vue、angular、json、markdown等多种前端技术语言格式化。 使用prettier的原因有很多我认为大部分是因为它可以将项目代码格式统一还有格式化后的代码较美观和易于理解。
使用 Prettier
vscode 使用
要充分利用 Prettier建议在编辑器中运行它。在vscode的扩展中可以直接查找prettier插件。 安装成功后在你打开支持的文件时下方文件信息状态栏会有prettier标致 双击它或者直接在输出命令窗口那里查看prettier的日志信息 从日志这里可以看出它是优先使用项目中的prettier配置的。 另外一般你下载代码格式化插件都是搭配vscode的文件自动保存格式的这样方便但是注意这个自动保存格式化使用的是文件的默认格式化配置。
有的时候你发现prettier配置保存时格式化规则不起作用可能就是默认格式化配置没切换到prettier。所以记得将格式化的默认配置修改为prettier。 开启格式化自动保存。 修改prettier插件配置设置-》扩展-》prettier 即可改变配置
设置好后就可以使用prettier格式化代码了。
项目中使用
如果你想使用prettier建议项目中一定要安装prettier和统一好格式化规则。 首先下载prettier依赖为你的项目添加格式化依赖。例如
npm install --save-dev prettier然后添加prettier配置文件。配置文件写法有点多我选择以 JSON 或 YAML 编写的 .prettierrc 文件。 多种配置文件风格可参考prettier-configuration File .prettierrc文件json
{experimentalTernaries: false,printWidth: 80,tabWidth: 2,useTabs: false,semi: true,singleQuote: false,quoteProps: as-needed,jsxSingleQuote: false,trailingComma: all,bracketSpacing: true,bracketSameLine: false,arrowParens: always,rangeStart: 0,proseWrap: preserve,htmlWhitespaceSensitivity: css,vueIndentScriptAndStyle: false,endOfLine: lf,embeddedLanguageFormatting: auto,singleAttributePerLine: false,plugins: []
}默认情况下Prettier 会忽略版本控制系统目录“.git”、“.sl”、“.svn “和”.hg”和 node_modules 中的文件除非指定了 CLI 选项 --with-node-modules 。如果.gitignore 文件存在于运行 Prettier 的同一目录中Prettier 也会遵循该文件中指定的规则。
**/.git
**/.svn
**/.hg
**/node_modules另外要排除指定的格式化文件请在项目根目录下创建 .prettierignore 文件。.prettierignore 使用 gitignore 语法。
格式该目录及子目录下的文件
npx prettier . --write检查目录及子目录文件格式化情况
npx prettier . --checknpx 随 npm 提供可让你运行本地安装的工具。在执行命令前记得先安装prettier依赖包不然npx会下载最新版的prettier格式化代码。 Prettier 配置
简单介绍下prettier的格式化配置。 建议使用.prettierrc配置虽然它不能写注释但优先级比较高不容易被覆盖。
export default {// 三元符 ?experimentalTernaries: false,// 单引号singleQuote: true,trailingComma: all,endOfLine: auto,bracketSpacing: true,
};
Experimental Ternaries 三元符
默认为false。
// 三元符 ?experimentalTernaries: false,参数
true ——三元符在条件后加上问号。false—— 默认值保留三元组的默认行为将问号与结果保留在同一行。 在 prettier 的新三元格式成为默认行为之前请先试用一下。 Print Width 一行代码宽度
指定编辑器换行的行长。默认80,上图格式化后就被换行了。
// 行打印长度printWidth: 80,在 .editorconfig 文件中设置 max_line_length 将配置 Prettier 的打印宽度除非被覆盖。
(如果在格式化 Markdown 时不想换行可以设置 Prose Wrap 选项来禁用。
Tab Width Tab缩进宽度
指定每个缩进级的空格数。默认一个Tab制表符两个空格。 // 制表符空格数默认2tabWidth: 2,在 .editorconfig 文件中设置 indent_size 或 tab_width 将配置 Prettier 的制表符宽度除非被覆盖。
Tabs 制表符
用制表符代替空格缩进行间距。 // 用制表符代替空格缩进行间距。useTab: true,在 .editorconfig 文件中设置 indent_style 将配置 Prettier 的制表符用法除非被覆盖。
(制表符将用于缩进但 Prettier 会使用空格对齐例如在三元组中。这种行为被称为 SmartTabs。
Semicolons 行尾分号
在语句末尾打印分号。默认值为true 参数
true —— 在每条语句末尾加上分号。false —— 只在有可能出错的地方行尾添加分号。
// 行尾分号semi:true,Quotes 引号
使用单引号而不是双引号。默认false。jsx不受此影响。 // 单引号singleQuote: false,Quote Props 属性的引号
在引用对象中的属性时进行更改。默认值为 as-needed。 参数
as-needed —— 仅在需要时在对象属性前加上引号。如果它判断不需要引号则会把你自己加的引号去掉。consistent —— 如果对象中至少有一个属性需要引号则引用所有属性。只要有一个加其他属性都加preserve——尊重对象属性中引号的输入使用。你想加就加它不改你的
quoteProps: as-needed,consistent 效果
JSX Quotes JSX的引号
在 JSX 中使用单引号而不是双引号。默认值为false。
Trailing Commas 尾部逗号
在多行逗号分隔的语法结构中尽可能打印尾逗号默认值all。(例如单行数组永远不会有尾逗号。 参数
all —— 尽可能使用逗号包括函数参数和调用。要运行这种格式的 JavaScript 代码需要一个支持 ES2017 的引擎Node.js 8 或现代浏览器或降级编译。这也能在 TypeScript 的类型参数中使用尾部逗号自 2018 年 1 月发布的 TypeScript 2.7 起支持。es5 —— ES5 中有效的尾逗号对象、数组等。TypeScript 和 Flow 中类型参数中的尾逗号。none—— 无尾逗号。
trailingComma: all,all的情况
Bracket Spacing 空格间隔
打印对象字面量中括号之间的空格。默认值为true 参数 -true —— 开启示例{ foo: bar }。 -false—— 关闭示例{foo: bar}。
bracketSpacing: true,true的情况
Bracket Line
将多行 HTMLHTML、JSX、Vue、Angular元素的 放在最后一行的末尾而不是单独放在下一行不适用于自关闭元素。默认值false。 bracketSameLine: false,Arrow Function Parentheses 箭头函数括号
在唯一的箭头函数参数周围加上括号。默认值always。 参数
always—— 一定要包括括号。例如 (x) x。avoid—— 尽可能省略括号。例如x x。 arrowParens: alwaysRange 文件格式化范围
只格式化文件的一个片段
这两个选项可用于格式化以给定字符偏移分别为包含和不包含为起点和终点的代码。范围将扩展
后退至包含所选语句的第一行的起始位置。向前到所选语句的末尾。
前后由rangeStart和rangeEnd控制rangeStart默认为0rangeEnd默认Infinity在不指定具体末尾值时不配置rangeEnd即可。
rangeStart: 0,Parser 解析器
指定要使用的解析器。
Prettier 会根据输入文件路径自动推断解析器因此无需更改此设置。
Prose Wrap 折行
默认情况下Prettier会因为使用了一些折行敏感型的渲染器如GitHub comment 和 BitBucket而按照markdown文本样式进行折行。 但在某些情况下可能只是希望这个文本在编译器或查看器中当屏幕放不下时发生软折行所以这一参数允许设置为 never。 参数
always—— 当超出print width上面有这个参数时就折行。perserve—— 按照原有文本进行折行。never——不折行。
HTML Whitespace Sensitivity 模板留白
默认值css。 为 HTML、Vue、Angular 和 Handlebars 指定全局空白敏感度。更多信息请参见空白敏感格式。 参数
“css” - 尊重 CSS 显示属性的默认值。对于 Handlebars与 strict 相同。“strict” - 所有标记周围的空格或没有空格都被视为重要标记。“ignore”- 所有标记周围的空格或没有空格都不重要。 htmlWhitespaceSensitivity: cssVue files script and style tags indentation Vue 文件脚本和样式标签缩进
是否缩进 Vue 文件中 script 和 style 标记内的代码。默认值false。 参数
false - 在 Vue 文件中不缩进脚本和样式标记。true - 在 Vue 文件中缩进脚本和样式标记。 vueIndentScriptAndStyle: falseEnd of Line 行尾换行符
默认值lf。 参数
“lf” - 仅换行符\n常见于 Linux 和 macOS 以及 git 仓库中“crlf” - 回车换行字符\r/n常见于 Windows 系统“cr” - 仅回车字符\r很少使用“auto” - 保持现有的行结束符一个文件中的混合值通过查看第一行之后的内容进行规范化处理 endOfLine: lf由于历史原因文本文件中有两种常见的行结束符。即 \n或 LF表示换行和 \r\n或 CRLF表示回车换行。前者常见于 Linux 和 macOS而后者则在 Windows 中很普遍。维基百科上有一些详细的解释。 当不同操作系统的人合作开发一个项目时很容易在共享的 git 仓库中出现混合行尾。Windows 用户也有可能不小心把以前提交过的文件的行尾从 LF 改成了 CRLF。这样做会产生很大的 git diff从而使文件的逐行历史记录git blame更难查看。 如果您想确保整个 git 仓库在 Prettier 覆盖的文件中只包含 Linux 风格的行结束符:
确保 Prettier 的 endOfLine 选项设置为 lf这是自 2.0.0 版起的默认值配置运行 Prettier 的预提交钩子使用 --check 标志配置 Prettier 在 CI 管道中运行。如果使用 Travis CI请在 .travis.yml 中将 autocrlf 选项设置为输入。在 repo 的 .gitattributes 文件中添加 * textauto eollf。更改后您可能需要让 Windows 用户重新克隆您的 repo以确保 git 在签出时未将 LF 转换为 CRLF。
当使用 \n (LF) 时所有操作系统中的所有现代文本编辑器都能正确显示行结束符。但是Windows 的旧版本记事本只能处理 \r\n (CRLF)因此会在视觉上把这些行压成一行。
Embedded Language Formatting 嵌入语言格式
控制 Prettier 是否格式化文件中嵌入的引号代码。默认值auto。 参数
“auto” - 如果 Prettier 能够自动识别嵌入代码则格式化嵌入代码。“off” - 永远不自动格式化嵌入代码。
embeddedLanguageFormatting: auto当 Prettier 发现你在另一个文件的字符串中放置了一些它知道如何格式化的代码时比如在 JavaScript 的标记模板中使用名为 html 的标记或者在 Markdown 的代码块中它默认会尝试格式化这些代码。
有时这种行为并不可取尤其是在你可能无意将字符串解释为代码的情况下。通过该选项您可以在默认行为自动和完全禁用该功能关闭之间进行切换。
Single Attribute Per Line 单行一属性
在 HTML、Vue 和 JSX 中每行强制使用一个属性。默认值false。 参数
false - 每行不执行单一属性。true - 每行执行单一属性。
singleAttributePerLine: falseplugins 插件
prettier的插件配置。 plugins: []结语
结束了。
