[英]VSCode: How to configure formatter with vue and eslint
I want to have the option to "Format Document" according to the rules in my .eslintrc
file.我想根据我的
.eslintrc
文件中的规则选择“格式化文档”。
I have the ESLint and Vetur extensions.我有 ESLint 和 Vetur 扩展。
Currently the project is configured without semicolons.目前该项目配置为不带分号。 But whenever I use the "Format Document" function it adds a bunch of semicolons, which tells me that it's not following my lint config.
但是,每当我使用“格式文档”function 时,它都会添加一堆分号,这告诉我它没有遵循我的 lint 配置。
I tried tweaking a bunch of settings of both ESLint and Vetur, but nothing I do seems to make it follow the config.我尝试调整 ESLint 和 Vetur 的一系列设置,但我所做的似乎没有让它遵循配置。 I am lost as to how the whole thing works, what takes precedence, etc...
我不知道整个事情是如何运作的,什么优先,等等......
Relevant ones:相关的:
"eslint.format.enable": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.enable": true,
I had created an issue with vetur earlier last week, and this specific prettier-eslint
issue has been fixed by the upstream.上周早些时候我在 vetur 上创建了一个问题,上游已经修复了这个特定
prettier-eslint
问题。
https://github.com/vuejs/vetur/issues/2480 https://github.com/vuejs/vetur/issues/2480
https://github.com/vuejs/vetur/commit/005669957593f2d862b9c4057e6cbc2163340b30 https://github.com/vuejs/vetur/commit/005669957593f2d862b9c4057e6cbc2163340b30
Install modules to your project folder:将模块安装到您的项目文件夹:
yarn add --dev eslint prettier prettier-eslint
Make sure to set your settings.json
to:确保将您的
settings.json
为:
"vetur.useWorkspaceDependencies": true
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.html": "prettier",
set vue
extension to use vetur for default formatting:将
vue
扩展设置为使用 vetur 进行默认格式设置:
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "octref.vetur",
}
You don't need "eslint.format.enable": true,
unless you use eslint
for other things, since the vetur is handling the formatting:您不需要
"eslint.format.enable": true,
除非您将eslint
用于其他事情,因为 vetur 正在处理格式:
I using this in vscode settings.json for vscode version 1.52我在 vscode 设置中使用这个。json 用于 vscode 版本 1.52
{
// 窗口失去焦点自动保存
"files.autoSave": "onFocusChange",
// 编辑粘贴自动格式化
"editor.formatOnPaste": true,
// 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
"editor.mouseWheelZoom": false,
// 行太长自动换行
"editor.wordWrap": "on",
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"dart.flutterSdkPath": "/Users/macbeans/flutter",
"dart.debugExternalLibraries": false,
"dart.debugSdkLibraries": false,
"workbench.editorAssociations": [],
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
}
},
"vetur.format.defaultFormatter.js": "none",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatter.ts": "vscode-typescript"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.