1. 简介
prettier-config-fisker 是一个 prettier 的配置包，它提供了一套在前端开发中实用的代码格式规范，可以让你的代码更加易于阅读和维护。相比于直接在配置文件中编写 prettier 配置，使用 prettier-config-fisker 可以更加快捷地设置 prettier 的配置。
2. 安装
你可以通过以下命令安装 prettier-config-fisker:
npm install --save-dev prettier prettier-config-fisker
3. 使用
使用 prettier-config-fisker 只需要在项目根目录下创建一个 .prettierrc.js 文件，并将以下配置复制到文件中即可：
module.exports = require('prettier-config-fisker');这里我们将 prettier-config-fisker 导出的配置对象作为 .prettierrc.js 文件的内容。
然后，在你的代码中使用 prettier 进行格式化即可：
prettier --write "src/**/*.js"
这个命令将按照 prettier-config-fisker 的配置对 src 目录下的所有 .js 文件进行格式化。
4. 配置项
prettier-config-fisker 的配置项如下：
- printWidth: 单行代码长度的最大值。默认值为 100。
- tabWidth: 缩进空格数。默认值为 2。
- useTabs: 是否使用制表符进行缩进。默认值为 false。
- semi: 是否在语句结尾打印分号。默认值为 true。
- singleQuote: 是否使用单引号。默认值为 true。
- quoteProps: 对象字面量中的属性名是否使用引号。可选值为 'as-needed'，'consistent'，'preserve'。默认值为 'as-needed'。
- jsxSingleQuote: JSX 中是否使用单引号。默认值为 false。
- trailingComma: 是否使用尾部逗号。可选值为 'es5'，'none'，'all'。默认值为 'none'。
- bracketSpacing: 对象字面量括号内是否使用空格。默认值为 true。
- jsxBracketSameLine: 多行 JSX 元素是否将最后一个 > 放在末尾行的末尾。默认值为 false。
- arrowParens: 箭头函数的参数是否使用括号。可选值为 'avoid'，'always'。默认值为 'avoid'。
- rangeStart: 打印的第一个字符的索引。默认值为 0。
- rangeEnd: 要打印的最后一个字符的索引。默认值为 Infinity。
- proseWrap: 是否在 markdown 文件中插入折行。可选值为 'preserve'，'always'，'never'。默认值为 'preserve'。
- htmlWhitespaceSensitivity: HTML 中空格敏感性的配置。可选值为 'css'，'strict'，'ignore'。默认值为 'css'。
- vueIndentScriptAndStyle: 是否缩进 Vue 单文件中的 <script> 和 <style> 标签的内容。默认值为 false。</li> </ul> <h2>5. 示例代码</h2> <p>你可以在你的代码中运用 prettier-config-fisker，如下例：</p> <pre class="prettyprint login js">const hello = ({ name, age }) => { console.log(`Hello, I'm ${name}, ${age} years old.`); };</pre><p>在使用 prettier-config-fisker 后，上面的代码将会被格式化成以下形式：</p> <pre class="prettyprint login js">const hello = ({ name, age }) => { console.log(`Hello, I'm ${name}, ${age} years old.`); };</pre><h2>6. 总结</h2> <p>通过使用 prettier-config-fisker，你可以快速地为你的前端项目设置 prettier 的格式化规则。它提供了一套合理的默认规则，可以帮助你的代码更加易于阅读和维护。同时，在 prettier-config-fisker 的基础上，你也可以制定自己的格式化规则，满足你项目的各种需求。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/5f09b1f6403f2923b035c05e">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/5f09b1f6403f2923b035c05e">https://www.javascriptcn.com/post/5f09b1f6403f2923b035c05e</a></p> </blockquote>