【发布时间】：2018-04-22 17:33:45
【问题描述】：
我在变得更漂亮时遇到问题，eslint 和 Visual Studio 代码可以很好地配合使用。我一直在 VSCode 中看到类似这样的红色错误：
[eslint] Replace `↹` with `··` (prettier/prettier)
我安装了 VSCode 插件 eslint 和 prettier。
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"
]
}
}
开发依赖包.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"
}
【问题讨论】：
-
我对此也很感兴趣......目前我正在使用 Vetur 扩展（用于 Vue.js）并且这个扩展使用更漂亮......所以格式化的 .vue 文件删除了空格，和额外的分号，用单引号替换双引号......这真的很好，但问题在于 .js 扩展名；我不知道如何使它们工作相同。所以如果你找到了，请分享。
-
你找到解决办法了吗？
标签： visual-studio-code eslint prettier