什么是 Prettier

prettier是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

安装依赖到开发环境

//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier

根目录下创建.prettierrc.js

点击查看官网完整配置
举个例子1：此处的规则供参考，可以根据个人习惯改写

module.exports = {printWidth: 100, //单行长度tabWidth: 2, //缩进长度useTabs: false, //使用空格代替tab缩进semi: true, //句末使用分号singleQuote: true, //使用单引号quoteProps: 'as-needed', //仅在必需时为对象的key添加引号jsxSingleQuote: true, // jsx中使用单引号trailingComma: 'all', //多行时尽可能打印尾随逗号bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }jsxBracketSameLine: true, //多属性html标签的‘>’折行放置arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => xrequirePragma: false, //无需顶部注释即可格式化insertPragma: false, //在已被preitter格式化的文件顶部加上标注proseWrap: 'preserve', //不知道怎么翻译htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进endOfLine: 'lf', //结束行形式embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

举个例子2

module.exports = {printWidth: 200, //行宽semi: true, //分号singleQuote: true, // 使用单引号useTabs: false, //使用 tab 缩进tabWidth: 2, //缩进trailingComma: 'es5', //后置逗号，多行对象、数组在最后一行增加逗号arrowParens: 'avoid', //箭头函数只有一个参数的时候可以忽略括号bracketSpacing: true, //括号内部不要出现空格proseWrap: 'preserve', //换行方式 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行parser: 'babylon', //格式化的解析器，默认是babylonendOfLine: 'auto', // 结尾是 \n \r \n\r autojsxSingleQuote: false, // 在jsx中使用单引号代替双引号jsxBracketSameLine: false, //在jsx中把'>' 是否单独放一行stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置htmlWhitespaceSensitivity: 'ignore',ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中requireConfig: false, // Require a 'prettierconfig' to format prettier
}

根目录下创建 .prettierignore 忽略不想格式化的文件

node_modules默认被忽略，忽略其他文件可以写在 .prettierignore

build
.cache# Ignore all HTML files:
*.html
*.yml
*.yaml

命令行格式化

格式化全部文档

npx prettier --write .
//或
yarn prettier --write .

Git提交代码 Commit 前执行 Prettier

安装husky 和 lint-staged

• husky是帮助我们添加git hooks的工具
• lint-staged则是筛选那些staged的git文件执行lint

npm install husky --save-dev --save-exact
npm install lint-staged --save-dev --save-exact

配置package.json

  "husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"*.{js,css,json,md}": ["prettier --write","git add"]}

其他补充

解决和eslint的冲突

1. 安装 eslint-config-prettier 插件

npm i -D eslint-config-prettier

2. 在eslint的配置文件中写入以下内容

 extends: ['plugin:prettier/recommended'], // 避免与 prettier 冲突

待继续补充

• 今天就写到这里啦~
• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~