vscode-prettier-config

前端 prettier 配置

任何团队，规范都是怎么也绕不开的话题，我们有太多的理由去做规范。代码规范是软件开发领域经久不衰的话题，几乎所有工程师在开发过程中都会遇到，并或多或少会思考过这一问题。 无规矩不成方圆，无规范难以协同，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。

安装

# yarn 安装
yarn add vscode-prettier-config --dev

# 或 mpm 安装
npm install vscode-prettier-config --dev

配置

在项目跟目录下创建 .prettierrc.js 配置文件，并设置内容如下

// 默认配置
const defaultConfit = require('prettier-config');

module.exports = {
  ...defaultConfit,

  // 如果需要覆盖某个配置，则在下面配置
  // printWidth: 140,
}

options

// 全部默认配置项
module.exports = {
    enable: true, // default: true，是否开启 prettier
    requireConfig: false, // default: false 需要prettier配置文件来格式化文件,如果在setting.json中设置 "prettier.requireConfig": true,则必须创建一个prettier配置文件【.prettier 或 .prettier.js 等】才能格式化代码
    resolveGlobalModules: false, // default: false 全局匹配，此设置可能会对性能产生负面影响
    packageManager: 'npm', // default: 'npm' 用于安装节点模块的包管理器
    useEditorConfig: true, // default: true 解析配置时是否考虑 .editorconfig
    ignorePath: '.prettierignore', // default: '.prettierignore'，不使用prettier格式化的文件填写在项目的.prettierignore文件中
    prettierPath: '', // 提供自定义模块的prettier路径。
    configPath: '', // 为prettier的配置文件提供自定义路径，全局默认值在主目录中放置一个~/.prettierrc文件。需要在 setting.json 中配置
    withNodeModules: false, // default: false，是否处理node_modules文件夹中的文件
    enableDebugLogs: false, // default: false，false: 禁用，true:启用 调试日志以进行故障排除
    printWidth: 140, // default: 80 超出140换行
    tabWidth: 4, // default: 2 tab 缩进4个空格
    singleQuote: true, // default: false 采用单引号
    trailingComma: 'all', // default: 'es5' 尾随逗号
    bracketSpacing: true, // default: true 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    jsxBracketSameLine: false, // default false 在jsx中把'>' 单独放一行，true 接在末尾
    semi: true, // default: true 封号结尾
    requirePragma: false, // default: false
    insertPragma: false, // default: false 件顶部插入一个特殊的 @format 标记
    useTabs: false, // default: false 使用tab缩进
    proseWrap: 'preserve', // default: preserve 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    arrowParens: 'always', // default: 'always' (x) => {} 箭头函数参数只有一个时是否要有小括号
    jsxSingleQuote: true, // default: false // 在jsx中使用单引号代替双引号
    htmlWhitespaceSensitivity: 'css', // default: 'css' 指定 HTML 文件的全局空白敏感度
    vueIndentScriptAndStyle: false, // default: false 是否缩进 Vue 文件中 <script> 和 <style> 标签内的代码
    endOfLine: 'lf', // default: 'lf' 结尾是 \n \r \n\r auto
    quoteProps: 'as-needed', // default: 'as-needed' 对象key仅在需要时用引号
    embeddedLanguageFormatting: 'auto', // default: 'auto' 控制 Prettier 是否格式化文件中嵌入的引用代码
}