react prettier

🧙 Questions

react prettier

☄️ Ideas

安装

npm install --global prettier

printWidth: 120 # 最大输入长度
tabWidth: 2 # 缩进长度为2
useTabs: false # 使用space缩进
semi: false # 每行结尾不加分号
singleQuote: true # 使用单引号
quoteProps: as-needed # 对属性加引号
jsxSingleQuote: true # 替换jsx的双引号
trailingComma: es5 # 结尾逗号处理方式
bracketSpacing: true # 花括号之间加空格
jsxBracketSameLine: true # jsx风格的花括号
arrowParens: always # 箭头函数加括号
parser: typescript # 自动解析ts文件
requirePragma: true # 需要注释
insertPragma: true # 自动插入注释
proseWrap: preserve #  注释样式
htmlWhitespaceSensitivity: strict # 严格要求
vueIndentScriptAndStyle: false # 支持vue脚本样式
endOfLine: lf # 结尾使用/n结束

配置文件说明

module.exports = {
  
  // 单行最长代码长度
  printWidth: 120,
  // tab键长度
  tabWidth: 2,
  // 是否使用tab键
  useTabs: false,
  // 单行结尾不加分号  
  semi: false,
  // 使用单引号
  singleQuote: true,
  // jsx文件使用单引号
  jsxSingleQuote: true,
  quoteProps: 'as-needed',
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'always',
  parser: 'typescript',
  requirePragma: true,
  insertPragma: true,
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'strict',
  vueIndentScriptAndStyle: false,
  endOfLine: 'lf',
}

prettier -c --write .

🔗 Links

• react website
• prettier config
• prettier config