标签: prettier-eslint

我使用 Prettier 作为格式化程序，所以我配置了eslint-plugin-prettier. 我按照本指南做了所有事情，但是当我尝试运行 ng lint 时，出现此错误：

An unhandled exception occurred: Failed to load config "prettier" to extend from.
Referenced from: ...\node_modules\eslint-plugin-prettier\eslint-plugin-prettier.js

这是我的.eslintrc.json：

An unhandled exception occurred: Failed to load config "prettier" to extend from.
Referenced from: ...\node_modules\eslint-plugin-prettier\eslint-plugin-prettier.js

从我的package.json：

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json", "e2e/tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": …

似乎有一些规则让我的配置让系统知道使用 ESLint 并不总是有效。我在 VSCode 中启用了保存时的“自动格式”。

例如，ESLint 错误为no-confusing-arrow：

getOptionSelected={option =>
   typeof option === 'string' ? option : option.description
}

如果我运行eslint --fix它，它会更新以将括号括起来作为表达式：

getOptionSelected={option =>
   (typeof option === 'string' ? option : option.description)
}

但是，如果我保存，它会撤消更改并返回错误。

我的 ESLint 如下：

{
  "root": true,
  "parser": "@babel/eslint-parser",
  "extends": [
    "plugin:prettier/recommended",
    "plugin:jest/recommended",
    "plugin:testing-library/react",
    "airbnb",
    "eslint:recommended",
    "next"
  ],
  "plugins": ["prettier", "simple-import-sort"],
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": …

我刚刚使用 eslint-plugin-prettier 将我的应用程序从 prettier 1.19.1 升级到 2.5.1。但我面临着巨大的变化。我希望之前的行为符合此规则：

// prettier v1
const [
  currentRouteName,
  currentParams
] = getActiveRoute(currentState);

// prettier v2 - note line break after "="
const [currentRouteName, currentParams] =
  getActiveRoute(currentState);

是否可以覆盖此更改换行符的规则（似乎与 printWith 有关，但此设置在我的 .prettierrc 中没有更改）？

我正在使用这些软件包的最新版本：

• ESLint：8.11.0
• 更漂亮：2.6.0
• eslint-插件-更漂亮：4.0.0
• eslint-config-prettier：8.5.0

npm run lint 179.28s user 2.19s system 108% cpu 2:47.58 total

Prettier 占用了总时间的 98.3%。

有什么方法可以优化它（通过传递参数、使用一些额外的包、禁用特定规则……）？

There was trouble creating the ESLint CLIEngine. -
 'basePath' should be an absolute path

尝试使用 eslint

$ npx prettier-eslint **/*.js

但得到：

prettier-eslint [ERROR]: There was trouble creating the ESLint CLIEngine.
prettier-eslint-cli [ERROR]: There was an error formatting "test/fizzBuzz.test.js":
    AssertionError [ERR_ASSERTION]: 'basePath' should be an absolute path.

我有一个使用 vue cli 创建的 vue 应用程序，我使用的版本是 vue2（带有 eslint 和 prettier）。

我可以运行npm run serve并加载我的页面。但是在 Visual Studio Code 中，我注意到这个错误：

{
    "resource": "/c:/vue/app2/public/index.html",
    "owner": "eslint",
    "code": {
        "value": "prettier/prettier",
        "target": {
            "$mid": 1,
            "external": "https://github.com/prettier/eslint-plugin-prettier#options",
            "path": "/prettier/eslint-plugin-prettier",
            "scheme": "https",
            "authority": "github.com",
            "fragment": "options"
        }
    },
    "severity": 4,
    "message": "Parsing error: Unexpected token",
    "source": "eslint",
    "startLineNumber": 1,
    "startColumn": 2,
    "endLineNumber": 1,
    "endColumn": 2
}

这是我.eslintrc.js创建应用程序时自动生成的，此后我没有对其进行任何更改。

module.exports = {  
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: …

我遇到一个问题，当试图遵循它的尾随逗号规则时， prettier 似乎会破坏自身。这是我所看到的示例：

我的 prettierrc.js 文件：

module.exports = {\n  semi: true,\n  trailingComma: "all",\n  avoidEscape: true,\n  printWidth: 120,\n  tabWidth: 3\n};\n

我的问题代码：

import {\n   Button,\n   ButtonGroup,\n   CardContent,\n   CircularProgress,\n   Divider,\n   TextField,\n   useMediaQuery\n} from "@material-ui/core";\n

发生的情况是 prettier 建议在useMediaQuery之后添加一个尾随逗号。\n我添加它，然后在保存文件时，prettier 会删除导致错误的尾随逗号。

截图：

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 在保存 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\ 之前保存后 xa0 \xc2\xa0 \xc2\xa0 & \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0

[\n

如果单独导入它们，它就可以工作。只有当我在一行导入 6+ 时才会出现这种情况。

是否有 ESLint 或 Prettier 规则不允许没有占位符的模板文字？我想用标准引号替换没有占位符的模板文字中的反引号''；

允许

const templateLiteral = `Some ${string}`;

不允许

const templateLiteral = `Some string`;

转换成

const templateLiteral = 'Some string';

这个项目是别人写的，我需要从这里开始处理。我认为第一步应该是修复格式。通常，我只是在 vscode 中使用 .prettierrc，然后运行 ​​alt-shift-f 或 ctrl-s 来格式化每个文件中的代码。我尝试使用 eslint，但遇到了各种错误，所以我摆脱了它（卸载了项目中的所有 eslint 开发依赖项，就像我开始处理它之前的情况一样）。我在 vscode 中安装了 prettier 和 eslint 扩展。

错误

["ERROR" - 1:45:44 pm] Error formatting document.
["ERROR" - 1:45:44 pm] `import` can only be used in `import()` or `import.meta`. (1:1)
> 1 | import { subMonths, isSameDay, format, isYesterday, isToday, subDays, subYears } from 'date-fns';
    | ^
  2 |
  3 | export const today = new Date();
  4 | export const last7Day = {
SyntaxError: `import` can only be used in …

some.JS.Code;

//ignore this line from linting etc.
##Software will do some stuff here, but for JS it's an Error##

hereGoesJs();

是否有可能从 Visual Studio Code 中的 linting 和格式化中排除一行？因为我需要该行，但还需要代码其他部分的 Linting 和格式化...

// I Tried

// eslint-disable-next-line no-use-before-define

// eslint-disable-line no-use-before-define

/*eslint-disable */

//suppress all warnings between comments
alert('foo');

/*eslint-enable */

// @ts-ignore