prettier

基础使用

安装

# 本体
npm i prettier -D
# or 
npm i prettier -g


# 如果配合 eslint
eslint-config-prettier eslint-plugin-prettier -D

初始化

// .prettierrc
{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

常用配置

{  
  // 使用的解析器  
  "parser": "babel", // 可以是 "babel" | "flow" | "typescript" | "json" | "markdown" | "vue" | "angular" | "graphql" | "html" | "jsx" | "typescript-eslint" | "postcss" | "less" | "scss" | "less-postcss" | "scss-postcss"  
  
  // 代码风格  
  "trailingComma": "all", // 尾随逗号的风格，可以是 "none" | "es5" | "all"  
  "tabWidth": 2, // 缩进使用的空格数  
  "semi": true, // 是否在语句末尾添加分号  
  "singleQuote": true, // 是否使用单引号代替双引号  
  "printWidth": 80, // 超过这个打印宽度的行将被包裹  
  "bracketSpacing": true, // 对象字面量的花括号间是否添加空格 {"foo": bar} vs {"foo": bar}  
  "jsxBracketSameLine": false, // 多行 JSX 元素的右尖括号是否放在最后一行的结尾，而不是新行（在 "multiline" 模式下有效）  
  "arrowParens": "avoid", // 只有一个参数的箭头函数参数是否使用圆括号。可以是 "avoid" | "always"  
  "proseWrap": "preserve", // 在需要换行的地方，是否保持原有的换行符。可以是 "never" | "always" | "preserve"  
  "htmlWhitespaceSensitivity": "css", // HTML 空白字符的敏感度。"css" 表示只有 `<style>` 和 `<script>` 标签内的空白字符会被压缩，其他标签内的空白字符会被保留。"strict" 表示所有标签内的空白字符都会被压缩，"ignore" 则表示所有标签内的空白字符都会被保留  
  "vueIndentScriptAndStyle": true, // Vue 组件中，`<script>` 和 `<style>` 标签的缩进是否基于父组件  
  "endOfLine": "auto", // 行尾字符。可以是 "auto" | "lf" | "crlf" | "cr"  
  "useTabs": false, // 是否使用制表符进行缩进  
  
  // Prettier 插件配置  
  "plugins": [], // 使用的插件列表  
  
  // 其他配置  
  "requireConfig": false, // 是否要求项目中有 .prettierrc 或 prettier.config.js 文件  
  "ignorePath": ".prettierignore", // 忽略文件的路径，默认为 ".prettierignore"  
  "editorconfig": true, // 是否使用 .editorconfig 文件中的设置，默认为 true  
}

配合 ESlint

// .eslintrc.js
{
    // 因为安装了 eslint-config-prettier，所以只需填"prettierr"
    extend:"prettierr" 
}