标签: eslintrc

我对 ESLint 还很陌生，我找不到满足我要求的规则。考虑以下代码：

if(someCondition)i++;

我想在括号后强制使用一个空格，这样我们就应该有以下内容：

if(someCondition) i++;

但我就是找不到这样的规则；它不是space-before-function-paren（显然），keyword-spacing（只影响 后面的间距if）或space-before-blocks（因为这是单行 if，所以没有块）。请帮忙。谢谢！

PS 同样的规则也应该适用于单行 while。

将我的 Angular 12 项目从 TSLint 迁移到 ESLint 后，为每个项目创建了一个 eslintrc 文件，每个文件都有一行将 parseroptions.projects 设置为如下所示的路径：

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {     
      "parserOptions": {
        "project": ["apps/my-app/tsconfig.*?.json"]
      },
    ...
    ],
    ...
}

我一直在阅读 eslint 文档试图找到这个问题的答案，但没有找到任何有用的东西。

在浏览完这篇文章并尝试了这里的所有内容之后。似乎什么都不起作用。

我们尝试将节点部分添加到导入/解析器中，但这似乎不起作用。我们也在使用 monorepo，这会产生什么影响吗？尝试过的其他方法是将 a 添加project到打字稿解析器，但这也不起作用。

尝试将路径切换到 tsconfig.json 内的直接路径，但这也不起作用。

这是我的文件：

导入示例：import { colors } from "@styles"

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "lib",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "declaration": true,
    "declarationDir": "lib",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@styles/*": ["src/styles/*"],
      "@styles": ["src/styles/index.ts"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": [
    "src/*",
    "stories/*",
  ], …

尽管还有其他问题，但大多数都没有得到答复，或者给出的答复对我不起作用。

对于它给出的显然 eslint 正在 node_modules 中查找的内容，这里是给定的错误：

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/kamoraes/Workspace/node_adc/node_modules/supports-color/index.js from /home/kamoraes/Workspace/node_adc/.git/hooks/commit-msg not supported.
Instead change the require of index.js in /home/kamoraes/Workspace/node_adc/.git/hooks/commit-msg to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/kamoraes/Workspace/node_adc/.git/hooks/commit-msg:8:23) {
  code: 'ERR_REQUIRE_ESM'
}


Node v16.13.0

问题是，该项目正处于第一步，快速在同一节点和纱线、版本上的另一台机器上重做该项目，不会给出相同的错误。还请我的一个朋友尝试一下。没有给出错误。

另外，这个项目是一门课程，执行相同的步骤，这是我现在的完整代码：

https://github.com/kaiqueAMoraes/clean-node-api

此给定错误的最后一次提交是杂务：eslintignore 6250e5bdea05cc2eb413c8a57a97e4bbe4bd5bb9

我添加了哈士奇，lint-staged

yarn add -D husky lint-staged

然后添加它们各自的配置文件

.huskyrc.json：

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

.lintstagedrd.json：

{
  "*.ts": [
    "eslint 'src/**' --fix",
    "git add"
  ]
}

供参考：tsconfig：

{
  "compilerOptions": …

我的 Angular 项目（v13）的打字稿类上有以下代码片段：

import { Component } from '@angular/core';
import { MyService } from 'service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})

export class ExampleComponent {
   constructor(
       private myService: MyService  
   ) {}

   getUsers() {
      this.myService.getUsers().subscribe(response => {
      // do something;
      })
  }
}

我使用 ESlint 版本 7.26.0 运行该项目并扩展了以下插件：

"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"eslint:recommended"

运行 ng lint 时遇到的 lint 错误是：

'mySerive' is defined but never used no-unused-vars

显然，我的班级正在使用 myService。

这是预期的行为还是如何解决此问题？

PS：我不想禁用该规则。

我曾经有这个vue.config.js，但在 vue 或其 deps 最新升级后它不再工作：

chainWebpack: config => {
  // disable eslint nag screen when building for different environments
  if (!isProduction) config.module.rules.delete('eslint');
}

文档的一部分vue-cli说我可以这样做：

  devServer: {
    overlay: {
      warnings: false,
      errors: false
    },

但它说overlay这不是一个有效的选项

我想指定要在 eslintrc.js 中检查哪些文件，因此我添加了文件：...

module.exports = {
  extends: [
    'react-app',
    'react-app/jest',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  files: ['*.ts', '*.jsx', '*.ts', '*.tsx'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'testing-library/no-node-access': 'off',
  },
};

但是当我的预提交运行时出现以下错误：

precommit: BABEL_ENV=development eslint src --ext .js,.jsx,.ts,.tsx --fix'*.ts', '*.tsx'

Error: ESLint configuration in .eslintrc.js is invalid:
    - Unexpected top-level property "files".

节点版本： v6.11.0

错误信息：

无法解析模块“./coins.json”的路径。（导入/无未解决）

我还附上了错误的屏幕截图：

在这里你可以看到 App.js 和coins.json 位于同一个根目录中：

.eslintrc

{
  "extends": "airbnb",
  "settings": {
    "import/resolver": "webpack"
  },
  "rules": {
    "comma-dangle": ["error", "never"],
    "semi": ["error", "always"],
    "react/jsx-filename-extension": 0,
    "react/prop-types": 0,
    "react/no-find-dom-node": 0,
    "jsx-a11y/label-has-for": 0
  },
  "globals": {
    "document": true,
    "window": true
  },
  "env": {
    "jest": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  }
}

应用程序.js

import React from 'react';
import { connect } from 'react-redux';
import Routes from './config/Routes';
import { setSearch } from './actions';
import …

如何在 VS Code 中为 Node.js 端 Javascript 使用一个 eslint 规则集，为客户端 Javascript 使用另一个规则集？

我现在已经阅读了大约 10-15 个其他答案，但没有一个解决方案（都是负 3 或 4）对我有用。我正在使用 Prettier 和 Vetur，并且在 VSCode 中也安装了 ESLint 扩展。在过去的 3 天里，我至少查看了 10 次设置，试图触及所有内容，关闭/打开 VSC 并保存为格式，检查问题是否仍然存在，并继续对每个设置执行此操作，试图消除嫌疑人。出于绝望，我来到这里是为了能够在不破坏我的 html 标签并将代码分成难以辨认的 BS 的情况下保存我的组件。

我预期的代码格式如下所示：

<button
    class="btn btn-success"
    @click="sellStock"
    :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)"
>{{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}</button>

并且我的格式化程序导致“...isInteger(quantity)”之后的行尾的“被断行，这破坏了我整个组件的语法/主要的linter错误出现（显然）。

<button
    class="btn btn-success"
    @click="sellStock"
    :disabled="
         insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)
       "
    >
       {{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}
    </button>

正如你所看到的，即使是换行符也是不均匀的，并且在格式化程序方面使零感......我以前从未见过它这样做。这是现在下一级恼人的 Vue/Vetur/Prettier/VScode 格式错误，我很困惑为什么它本周突然出现。

我曾尝试更改自动换行长度和更漂亮的长度和缩进、字体大小和迷你地图的外观......似乎没有什么可以让这种疯狂停止，甚至没有转换 html 格式化周期。当我不想要的时候，它还将我的一些其他“.vue”组件格式化为多行，但它并没有像这里那样破坏语法/html 标签。我在任何地方都将自动换行/行长设置为 …