prettier eslint

更漂亮的Eslint

使用prettier加上JavaScript的格式，然后是eslint --fix

问题

eslint的fix功能非常出色，可以根据您的ESLINT配置自动使用大部分代码。 prettier是一个更强大的自动格式化器。关于漂亮的好处之一是它的自以为是。不幸的是，它不够自以为是，/或某些意见与我自己不同。因此，在格式化代码之后，我开始遇到绒毛错误。

这个解决方案

这是通过prettier格式化您的代码，然后将其结果传递给eslint --fix 。这样，您就可以获得prettier优质格式化功能的好处，但也从eslint的配置功能中受益。

对于具有.css的扩展为.less ， .scss或.json的文件，仅由于eslint无法处理这些文件，因此该文件prettier 。

安装

该模块是通过NPM分发的，该模块与节点捆绑在一起，应作为您项目的devDependencies之一安装：

 npm install --save-dev prettier-eslint

用法

例子

 const format = require ( 'prettier-eslint' ) ;

// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;

const options = {
  text : sourceCode ,
  eslintConfig : {
    parserOptions : {
      ecmaVersion : 7
    } ,
    rules : {
      semi : [ 'error' , 'never' ]
    }
  } ,
  prettierOptions : {
    bracketSpacing : true
  } ,
  fallbackPrettierOptions : {
    singleQuote : false
  }
} ;

const formatted = await format ( options ) ;

// notice no semicolon in the formatted text
formatted ; // const { foo } = bar

选项

文本（字符串）

格式的源代码。

filepath（？字符串）

要格式化的文件的路径可用于覆盖eslintConfig （ESLINT将用于查找文件的相关配置）。

eslintconfig（？object）

用于使用ESLINT格式化的配置。可以用filePath覆盖。

PrettierOptions（？对象）

通过prettier格式化的选项。如果没有提供， prettier-eslint将尝试根据eslintConfig （无论是通过filePath提供的还是派生的）来创建选项。您还可以提供一些选项，并通过您的ESLINT配置派生剩余的选项。这对于诸如parser类的选项很有用。

注意：这些选项覆盖ESLINT配置。如果仅在无法从ESLINT中推断出规则的情况下使用后备选项，请参见下面的“ HalldbackPrettierOptions”。

shoultbackPrettierOptions（？object）

如果prettier-eslint无法基于eslintConfig创建选项（无论是通过Filepath提供的还是通过filePath得出），则使用prettier格式化选项。这些选项仅在找不到相应的ESLINT规则的情况下使用，并且未在prettierOptions中手动定义更漂亮的选项。如果未给出后备， prettier-eslint将在此情况下仅使用默认的prettier值。

loglevel（？

如果您愿意的话prettier-eslint可以进行很多记录。传递此操作以设置您要查看的日志数。默认值为process.env.LOG_LEVEL || 'warn' 。

EslintPath（？字符串）

默认情况下， prettier-eslint将尝试基于filePath找到相关的eslint （且更prettier ）模块。如果找不到一个，那么它将使用prettier-eslint在本地安装的版本。如果您想指定要使用prettier-eslint使用eslint模块的路径，则可以使用eslintPath选项提供完整的路径。

PrettierPath（？字符串）

除了prettier模块外，这基本上与eslintPath相同。

FrettierLast（？布尔）

默认情况下， prettier-eslint将首先运行prettier ，然后是eslint --fix 。如果您想使用prettier ，但要覆盖您不喜欢使用eslint --fix ，这真是太好了。

另一种方法是将不同的工具用于不同的问题。如果您提供了prettierLast: true ，它将运行eslint --fix ，然后prettier 。这使您可以使用eslint来寻找错误和/或不良实践，并使用prettier代码代码样式。

扔

prettier-eslint只有在prettier或eslint失败时才会传播解析错误。除了传播错误外，它还还将记录一条特定的消息，以指示其在失败时所做的事情。

注意： format不会在prettier或eslint中显示有关损坏规则的任何消息。

捕获Eslint消息

 const { analyze } = require ( "prettier-eslint" ) ;

const text = 'var x = 0;' ;
const result = await analyze ( {
  text ,
  eslintConfig : {
    rules : { 'no-var' : 'error' }
  }
} )    
console . log ( result . messages ) ;

在控制台上生产

 [{
  ruleId: 'no-var',
  severity: 2,
  message: 'Unexpected var, use let or const instead.',
  line: 1,
  column: 1,
  nodeType: 'VariableDeclaration',
  messageId: 'unexpectedVar',
  endLine: 1,
  endColumn: 11
}]

附加的导出analyze与format相同，只是它返回一个简单的对象，其中具有属性output ，使format将返回的确切messages ，以及赋予代码eslint分析产生的消息描述数组（带有上面显示的结构）。如果您想执行格式，则可以使用analyze代替format ，但还可以捕获eslint可能会注意到的任何错误。

技术细节

代码➡️Prettier➡️ESLINT-FIX➡️格式代码

通过EslintConfig推断上美

可以将eslintConfig和prettierOptions作为参数提供。如果未提供eslintConfig ，则prettier-eslint将根据fileName寻找它们（如果没有提供fileName ，则使用process.cwd() ）。一旦prettier-eslint找到了eslintConfig ，就可以从eslintConfig推断出上prettierOptions 。如果已经提供了一些prettierOptions ，那么prettier-eslint只会推断其余选项。这种推断发生在src/utils.js中。

有关此推断的重要一件重要的事情是，它可能不支持您的特定ESLINT配置。因此，您需要检查src/utils.js以查看如何为每个选项完成推理（引用什么规则，等），并在支持您的配置时提出拉请请求。

默认值如果您禁用了所有相关的ESLINT规则（或完全通过/* eslint-disable */ ，那么漂亮的选项将返回到prettier默认值：

 {
  printWidth : 80 ,
  tabWidth : 2 ,
  singleQuote : false ,
  trailingComma : 'none' ,
  bracketSpacing : true ,
  semi : true ,
  useTabs : false ,
  // prettier-eslint doesn't currently support
  // inferring these two (Pull Requests welcome):
  parser : 'babylon' ,
  bracketSameLine : false ,
} 

故障排除

调试问题

prettier-eslint可以使用很多伐木。调试时，您可以使用其中一个logLevel S来更好地了解正在发生的事情。如果您使用的是prettier-eslint-cli ，则可以使用--log-level trace ，如果您使用的是Atom插件，则可以打开开发人员工具并在控制台中输入： process.env.LOG_LEVEL = 'trace' ，然后运行格式。您会看到一堆日志，这些日志可以帮助您确定问题是否prettier ， eslint --fix ， prettier-eslint如何渗透您的prettier选择或其他任何其他因素。在提交问题之前，您将要求您执行此操作，所以请这样做？

注意：执行此操作时，建议您仅在一个文件上运行此文件，因为有很多日志:)

Eslint-Disable线

在使用// eslint-disable-line时，有时您可能会在该模块处理代码后会遇到绒毛错误。那是因为prettier改变了这一点：

 // prettier-ignore
if ( x ) { // eslint-disable-line
}

因此：

 if ( x ) {
  // eslint-disable-line
}

eslint --fix不会将其更改。您可以注意到// eslint-disable-line已移至新线路。要解决此问题，您可以使用//eslint-disable-next-line而不是// eslint-disable-line这样：

 // eslint-disable-next-line
if ( x ) {
} 

灵感

• prettier
• eslint

其他解决方案

我没有知道。如果您知道其他解决方案，请随时提交公关。

有关的

• prettier-eslint-cli命令行接口
• prettier-atom原子插件（在设置中检查“ ESLINT集成”复选框）
• vs-code-prettier-eslint -VISUAL Studio代码插件
• eslint-plugin-prettier -ESLINT插件。虽然Prettier-Eslint使用eslint --fix来改变prettier的输出，但Eslint-Plugin-Prettier将其保持prettier输出，并将其与常规的Eslint工作流程集成在一起。
• prettier-eslint-webpack-plugin漂亮的Eslint Webpack插件

贡献者

谢谢这些人（表情符号密钥）：

肯特·多德斯（Kent C. Dodds） ？配x	Gyandeep Singh ？	igor pnev ？	本杰明·谭 ？	埃里克·麦考密克 配x	西蒙·莱德尔（Simon Lydell）	汤姆·麦凯尼
帕特里克·奥克斯特兰德	Lochlan Bunn	DaniëlTerwiel ？ ？	罗宾·恶意 ？	迈克尔·麦克德莫特（Michael McDermott）	亚当·斯坦基维奇（Adam Stankiewicz）	斯蒂芬·约翰·索伦森（Stephen John Sorensen）
布莱恩·迪·帕尔玛（Brian Di Palma） ？	罗布·怀斯	帕特里克豌豆 ？配x	Thijs Koerselman ？配x	Enrique Caballero ？	olukasz Moroz ？配x	西蒙·弗里德伦德（Simon Fridlund） ？ ？ ？ ？ ？ ？配x ？ ✅
奥利弗·约瑟夫·阿什（Oliver Joseph Ash） ？	马克·帕弗里曼	亚历克斯·泰勒（Alex Taylor） 配x	夏宗 配x	刘易斯·刘	Hamza Hamidi ？ ？ ？ ？	Rajiv Ranjan Singh
伊戈尔 ？	丽贝卡背心	克里斯·鲍比（Chris Bobbe） ？	Jounqin ？ ？ ？ ？ ？ ？ ？配x ？	乔纳森·雷姆（Jonathan Rehm）	格伦·惠特尼（Glen Whitney）

该项目遵循全企业规范。欢迎任何形式的贡献！

执照

麻省理工学院