标签: prettier

最近,我开始在我的编辑器中使用Visual Studio Code,并找到了Prettier - JavaScript格式化程序.我认为这是一个很棒的插件,因为它可以帮助我保持代码看起来不错.

我设置了Airbnb的ESLint配置,并发现它非常有用.

这是捕获.我正在运行的Airbnb ESLint配置与Prettier不太搭配.例如,对于JavaScript字符串,Prettier被格式化为包含双重刻度和Airbnb的ESLint,如单个刻度.当我使用Prettier格式化代码时,Airbnb的ESLint不同意.

我知道Kent Dodds已经完成了ESLint配置的一些工作,其中包括这里的例子.

但我似乎无法找到一种解决方案,让我使用Prettier的魔力将我的代码格式化为Airbnb的ESLint.

我在Prettier 1.7.2和Eslint 1.7.0中使用vscode。每换行后，我得到：

[eslint] Delete 'cr' [prettier/prettier]

这是.eslintrc.json：

{
"extends": ["airbnb", "plugin:prettier/recommended"],
"env": {
"jest": true,
"browser": true
},
"rules": {
"import/no-extraneous-dependencies": "off",
"import/prefer-default-export": "off",
"no-confusing-arrow": "off",
"linebreak-style": "off",
"arrow-parens": ["error", "as-needed"],
"comma-dangle": [
"error",
{
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "ignore"
}
],
"no-plusplus": "off"
},
"parser": "babel-eslint",
"plugins": ["react"],
"globals": {
"browser": true,
"$": true,
"before": true,
"document": true
}
}

.prettierrc

{
    "printWidth": 80,
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": …

我不知道发生了什么

我克隆了一个 github存储库，实际上只是尝试像一行一样进行更改，但我遇到了这个 prettier 错误，这对我来说毫无意义（我从未使用过 prettier）。

替换\xe2\x86\xb9return\xc2\xb7(\xe2\x8f\x8e\xe2\x86\xb9\xe2\x86\xb9<img\xc2\xb7alt=\'logo\'\xc2\xb7src=\'./Logo.png\'\xc2\xb7/>\xe2\x8f\x8e\xe2\x86\xb9);为\xc2\xb7\xc2\xb7return\xc2\xb7<img\xc2\xb7alt="logo"\xc2\xb7src="./Logo.png"\xc2\xb7/> 更漂亮/更漂亮

此时任何事情都可能有帮助，我正在使用 MacOS 并在 VSCode 上工作

在处理.vue文件时使用ESLint和Prettier的Visual Studio代码中,我似乎无法正确地自动修复vue/max-attributes-per-line.

例如,将vue/max-attributes-per-line设置为'off',并且我尝试手动添加换行符,它会将其更正为始终使每个元素不超过一行,无论它是否为81,120 ,200或更多字符宽. 我怎样才能弄清楚什么是强制我的标记元素到一行？

我正在使用ESLint版本5.1.0和Visual Studio代码(没有Prettier扩展),Prettier 1.14.2.

这是.vue文件中的示例 - 无论我做什么,什么时候,我都无法使用多行 'vue/max-attributes-per-line': 'off'.每次我保存,它都会强制标记的长行全部在一行上.

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

如果我设置'vue/max-attributes-per-line': 2,它的格式如此,有一个换行符(这也是非常错误的).

      <font-awesome-icon v-if="statusOptions.icon" 
:icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />

如果我尝试手动重新格式化,那么当我保存时它只会恢复到上面的状态.

另外,当我按下Ctrl + S时,它似乎重新格式化了两次:首先它重新格式化以将其全部放在一行上,然后半秒后,上面的格式化结果. 有什么想法？造成这种奇怪的原因是 - 有多个重组器正在运行吗？我怎么弄清楚第一个禁用它的是什么？

VS Code工作区设置:

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.tabSize": 2
  },
  "[csharp]": {
    "editor.tabSize": 4
  },
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "vetur.validation.script": false,
  "vetur.validation.template": false, …

我在 Visual Studio 代码编辑器中使用 Prettier 扩展已经很长时间了，但最近我正在用 Typescript 写 React。所以我需要配置 Prettier 来格式化 .tsx 文件。

我的 VS 代码上的漂亮扩展无法格式化 HTML。

在加载 VS 代码时，我在控制台中收到此错误 -

在尝试格式化时，我在底部看到此消息 -

注 - TS 文件和 SCSS 文件的格式正确。它仅适用于 HTML 文件。

以下是我基于 HTML 语言的设置 -

{
  "tslint.rulesDirectory": "./node_modules/codelyzer",
  "typescript.tsdk": "node_modules/typescript/lib",
  "window.zoomLevel": 0,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.html": "html"
  }
}

这些是安装和启用的扩展 -

更漂亮的版本—— 2.2.2

VS Code 版本（来自关于 VS 代码部分）：

Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 …

保存文件时，我在 VSCode 上的 Prettier Eslint 输出中收到以下错误。

Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- c:\Users\vtnor\.vscode\extensions\rvest.vs-code-prettier-eslint-0.4.1\dist\extension.js
- c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-fork.js

我的包 json 是：

[...]
"typescript": "^4.2.2",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"eslint": "^7.21.0",
"prettier": "^2.2.1",
"prettier-eslint": "^12.0.0",
[...]

我有一个 Expo React Native 应用程序，其中有大量未使用的导入组件。

我有 Prettier 设置用于代码格式化，是否可以配置 Prettier 以删除项目中任何未使用的导入？

我在文档中看不到任何内容，也不知道是否有办法向 Prettier 添加额外的 eslint 插件。

我正在设置基于 vim 的打字稿开发环境，但在缩进管理方面存在问题。

可能 'eslint' 说：重新格式化indent: Expected indentation of 2 spaces but found 4.后prettier。

我的.eslintrc.js：

module.exports = { 
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [ 
    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions: { 
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: { 
      jsx: true, // Allows …

大约一个月以来，我的 Prettier 扩展已停止正常工作。最值得注意的是 - 保存格式不起作用。其他注意事项：

• 打字;作品格式

• 我在 Prettier 按钮旁边的状态栏中收到此错误类型符号 - 我在 Google 上找不到任何与 Prettier 相关的参考：

  ]

• 我在设置中检查了我的保存格式：

  

• 'Format Document ,Format Selection andFormat Document with` 命令面板选项都不起作用

• 休息时间与从 Prettier 2-3 转会一致

• 我已按照迁移步骤进行操作，并认为一切正常。我拥有的 eslint 和 prettier 之间的一些配置片段：

  1. 根据更漂亮的文档，我的 VS Code 设置有：

"eslint.autoFixOnSave": true, // (even though VSCode has this as deprecated), have tried with and without this line
"editor.codeActionsOnSave": {
  "source.organizeImports": true,
  "source.fixAll.eslint": true
},

2. 我的开发依赖项包括：

    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier-eslint": "^9.0.0",

3. 我有一个 prettier.config.js 文件
4. 我的 .eslintrc.js …