Question

我遇到问题更漂亮，eslint和视觉工作室代码一起玩得很好。我一直在VSCode中看到这样的红色错误：

[eslint] Replace `↹` with `··` (prettier/prettier)

我有VSCode插件eslint和更漂亮的安装。

VSCode配置 { "javascript.validate.enable": false, "javascript.format.enable": false, "editor.formatOnSave": true, "prettier.singleQuote": true, "prettier.eslintIntegration": true, "window.zoomLevel": -1, "editor.fontSize": 13 } .eslintrc

    {
    "parser": "babel-eslint",
    "extends": [
        "airbnb",
        "plugin:react-native/all",
        "prettier",
        "prettier/react",
        "prettier/standard"
    ],
    "parserOptions": {
        "sourceType": "module",
        "ecmaFeatures": {
        "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "mocha": true,
        "jest": true,
        "es6": true
    },
    "globals": {
        "expect": true,
        "sinon": true,
        "Promise": true,
        "__DEV__": true
    },
    "plugins": ["babel", "react", "react-native", "prettier"],
    "settings": {
        "import/resolver": {
        "node": {
            "paths": ["app"]
        }
        }
    },
    "rules": {
        "prettier/prettier": ["error"],
        "indent": [2, "tab", { "SwitchCase": 1 }],
        "comma-dangle": [2, "only-multiline"],
        "react/jsx-indent": [0, "tab"],
        "jsx-quotes": [2, "prefer-double"],
        "react/display-name": 0,
        "react/jsx-boolean-value": 1,
        "react/jsx-no-undef": 2,
        "react/jsx-sort-prop-types": 0,
        "react/jsx-sort-props": 0,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/jsx-filename-extension": 0,
        "react/no-did-mount-set-state": 2, // [2, "allow-in-func"],
        "react/no-did-update-set-state": 2,
        "react/no-multi-comp": 0,
        "react/no-unknown-property": 2,
        "react/prop-types": 1,
        "react/react-in-jsx-scope": 2,
        "react/self-closing-comp": 1,
        "react/sort-comp": 2,
        "react/jsx-wrap-multilines": 2,
        "react-native/no-color-literals": 1,
        "quotes": [
        2,
        "single",
        "avoid-escape"
        ]
    }
    }

dev dependencies package.json

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-plugin-module-resolver": "3.0.0-beta.5",
    "babel-plugin-react-intl": "^2.3.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-preset-airbnb": "^2.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "babel-register": "^6.24.1",
    "chai": "^4.1.0",
    "chai-as-promised": "^7.1.1",
    "chai-enzyme": "^0.8.0",
    "chai-immutable": "^1.6.0",
    "commitizen": "^2.9.6",
    "cz-conventional-changelog": "^2.0.0",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.2",
    "enzyme-to-json": "^3.1.4",
    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-prettier": "^2.7.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.1.0",
    "eslint-plugin-standard": "^3.0.1",
    "expect.js": "^0.3.1",
    "flow": "^0.2.3",
    "flow-bin": "^0.56.0",
    "immutablediff": "^0.4.3",
    "jest": "^21.2.1",
    "jshint": "^2.9.5",
    "mocha": "^3.4.2",
    "prettier-eslint": "^8.2.1",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "16.0.0-beta.5",
    "react-intl-cra": "^0.2.8",
    "react-native-mock": "^0.3.1",
    "react-test-renderer": "^16.0.0",
    "redux-debounce": "^1.0.1",
    "redux-debounced": "^0.4.0",
    "redux-devtools": "^3.4.0",
    "redux-devtools-dock-monitor": "^1.1.2",
    "redux-devtools-log-monitor": "^1.3.0",
    "redux-mock-store": "^1.2.3",
    "regenerator-runtime": "^0.11.0",
    "remote-redux-devtools": "^0.5.12",
    "sinon": "^4.0.0"
}

Answer 1

您必须安装 eslint-config-prettier 包并在您的 eslint 配置文件中将 prettier 添加到 extends 数组

{
  extends: ['prettier']
}

Answer 2

我找到的解决方案是在保存 "editor.formatOnSave": true 时修改 Visual Studio Code 设置以格式化文件，并在保存文件 "eslint.run": "onSave" 时运行 ESLint。您可以在 Prettier Formatter for Visual Studio Code 找到更详细的说明。

Answer 3

当我将此部分用于 .eslintrc 文件时，这适用于我的代码。

"extends": [
    "plugin:react/essential",
],

Answer 4

" npm run lint -- --fix "

对我来说可以，但你必须停用更漂亮的扩展以避免冲突。

Answer 5

有同样的问题。

{
  "useTabs": false
}

这解决了我的问题

Answer 6

使用修复已解决

yarn run lint --fix

如何让Prettier，Eslint和Visual Studio Code一起玩得很好

6 个答案: