雖然服務器正在運行，但 eslint 沒有 linting

Question

我在線下載了一個前端模板，yarn 安裝了所有包，並且一個.eslint.json 文件確實存在，並且擴展安裝在 Visual Studio Code 中，但它沒有顯示任何 linting 錯誤。

這是 my.eslint.json 文件

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react",
    "plugin:flowtype/recommended"
  ],
  "plugins": ["flowtype", "react"],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": ["Link"],
        "specialLink": ["to"]
      }
    ]
  }
}

這是我的 package.json 文件

{
  "name": "reactjs-template",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "eslint-plugin-prettier": "^3.1.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:auto": "mocha test",
    "eject": "react-scripts eject",
    "lint": "eslint src --ext .js,.jsx",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-flow": "^6.23.0",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^6.6.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "flow-bin": "0.83.0",
    "flow-typed": "^2.5.1",
    "mocha": "^5.2.0",
    "prettier": "^1.19.1",
    "selenium-webdriver": "^4.0.0-alpha.1"
  }
}

這是我的設置。json 文件

{
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
  "eslint.packageManager": "yarn",
  "javascript.autoClosingTags": false,
  "javascript.format.enable": false,
  "javascript.format.insertSpaceAfterCommaDelimiter": false,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
  "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false,
  "typescript.tsc.autoDetect": "off",
  "files.eol": "\n",
  "prettier.endOfLine": "lf",
  "prettier.jsxSingleQuote": true,

  "prettier.singleQuote": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "eslint.alwaysShowStatus": true,
  "eslint.lintTask.enable": true,

  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true



}

我下載的模板是公司的個人模板，但這里是 package.json 看看它需要什么

Answer 1

如果並且沒有遺漏某些內容，請按照以下步驟操作或檢查您是否執行了以下步驟：

• 如果沒有，請下載 VSCode 的 ESLint 和 Prettier 擴展
• 在你的項目中安裝 ESlint 和 Prettier 庫npm install -D eslint prettier (或者使用yarn)
• 安裝 eslint-config-prettier（禁用 ESLint 格式化）和 eslint-plugin-prettier（允許 ESLint 在我們鍵入時顯示格式化錯誤） npm install -D eslint-config-prettier eslint-plugin-prettier

之后，如果考慮到您的 eslintrc 文件安裝了所有依賴項，您應該能夠重新啟動 vscode 並直接在編輯器中查看錯誤。

請注意，這是“通用”的東西，您可能需要安裝更多包以添加更多驗證。