Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

试图在 VS Code 中获得 Vue/TypeScript/ESLint/Prettier/Vetur 格式是一场噩梦。有很多关于这个的 GitHub 问题和 StackOverflow 帖子,但我向你保证这不是重复的。我遵循了每个教程,但没有一个起作用。其中一些解决了一个问题,但引入了另一个问题。其中一些不能解决任何问题。其中一些会导致 VS Code 崩溃。大多数在他们规定的建议中相互冲突,包括多个官方来源。许多已经过时,引用了过时的配置属性。

我希望 VS Code 在我保存时整理和格式化我的 .vue 和 .ts 文件。

我花了几个小时,尝试了很多不同的帖子和教程中的许多配置,但这是我最接近有效的配置。但是,使用以下配置,无论何时保存 .vue 文件,.vue 文件中的元素都会暂时换行到新行,然后立即恢复为单行元素:

Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

然后

Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

然后

Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

以下是我当前的配置文件:

.eslintrc.js

const { resolve } = require('path');
module.exports = {
  root: true,parserOptions: {
    extraFileExtensions: ['.vue'],parser: '@typescript-eslint/parser',project: resolve(__dirname,'./tsconfig.json'),tsconfigRootDir: __dirname,ecmaVersion: 2018,// Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },env: {
    browser: true
  },extends: ['plugin:@typescript-eslint/recommended','plugin:prettier/recommended','plugin:vue/recommended'],plugins: ['@typescript-eslint','vue'],globals: {
    ga: true,// Google Analytics
    cordova: true,__statics: true,process: true,Capacitor: true,chrome: true
  },rules: {
    'prettier/prettier': ['error',{ usePrettierrc: true }],'prefer-promise-reject-errors': 'off','@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/explicit-module-boundary-types': 'off','@typescript-eslint/no-empty-function': ['error',{ allow: ['private-constructors'] }],'vue/no-v-html': 'off','vue/no-template-shadow': 'off','vue/max-attributes-per-line': 'off',quotes: ['warn','single',{ avoidEscape: true }],'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
};

.preettierrrc

{
  "singleQuote": true,"semi": true,"usetabs": false,"printWidth": 150,"arrowParens": "avoid","trailingComma": "none","endOfLine": "auto"
}

settings.json

{
  "editor.formatOnPaste": true,"editor.formatOnSave": true,"eslint.validate": [
    "javascript","javascriptreact","typescript","vue"
  ],"typescript.tsdk": "node_modules/typescript/lib","vetur.experimental.templateInterpolationService": true,"editor.codeactionsOnSave": {
    "source.fixAll": true
  },"editor.detectIndentation": false,"editor.tabSize": 2
}

外面有人真的有这个工作吗?

lzq0809 回答:Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/396.html

大家都在问