[英]Inconsistencies with Prettier
我有一个 Vue 项目,它的 linting 有一些不一致。
我正在使用最新版本的 VS Code。
例如,这是我收到的一个 linting 错误:
保存文件后,VS Code 自动修复,使代码看起来像这样
但是,当我尝试运行npm run serve
我收到一个错误,要求将其更改回来。
error: Replace `(h)·=>·h(App),` with `h·=>·h(App)` (prettier/prettier) at src/main.js:91:11:
89 | router,
90 | store,
> 91 | render: (h) => h(App),
| ^
92 | }).$mount("#app");
93 |
my.eslintrc.json 文件是
{
"env": {
"browser": true,
"es6": true,
"jest/globals": true
},
"extends": [
"plugin:vue/essential",
"airbnb-base",
"plugin:prettier/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": "babel-eslint"
// "ecmaVersion": 2018,
// "sourceType": "module"
},
"plugins": [
"vue",
"jest"
],
"rules": {},
"overrides": [
{
"files": [
"*.js",
"*.vue"
],
"rules": {
"sort-imports": "off",
"spaced-comment": "off",
"import/prefer-default-export": "off",
"import/no-unresolved": "off",
"import/extensions": "off",
"func-names": "off",
"object-shorthand": "off",
"eqeqeq": "warn",
"prefer-const": "off",
"camelcase": "off",
"no-plusplus": "off",
"no-else-return": "off",
"consistent-return": "off",
"no-restricted-syntax": "off",
"no-shadow": "off",
"prefer-destructuring": "off",
"no-return-assign": "off",
"guard-for-in": "off",
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error"
}
}
]
}
我的 VSCode settings.json 文件是
{
"eslint.codeAction.showDocumentation": {
"enable": true
},
"explorer.confirmDelete": false,
"remote.extensionKind": {
"pub.name": ["ui"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "vue", "html"],
"editor.formatOnPaste": true,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.run": "onSave",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.format.defaultFormatter.html": "prettier",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.stylus": "none",
"editor.formatOnType": true,
"workbench.colorTheme": "Community Material Theme Darker",
"window.zoomLevel": 1
}
我猜肯定有一个项目与 vs 代码不一致,但我可以找到它。
使用npm run serve
自动修复文件,但是,如果我再次保存有问题的文件,它会突然再次弹出 linting 错误(这会导致 Vue 应用程序在开发中崩溃)。
我试过npm cache clear --force
和更改节点模块的权限,并重新安装它们,但没有运气。
我想我需要告诉我的本地规则来覆盖更漂亮,但我不确定该怎么做
需要使用eslint-config-prettier
prettier 来关闭与 prettier 冲突的 eslint 规则。 确保还包括prettier/vue
规则
https://github.com/prettier/eslint-config-prettier
"extends": [
"plugin:vue/essential",
"airbnb-base",
"plugin:prettier/recommended",
“prettier”,
“prettier/vue”
],
您可以通过安装更漂亮的 eslint 配置来使 eslint 接受所有更漂亮的格式
npm install eslint-config-prettier
并将其包含在文件.eslintrc.js
的extends
选项中
extends: [
...,
"prettier",
],
现在它不会抱怨更漂亮的格式偏好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.