尝试在VS Code中实现Vue/TypeScript/ESLint/Prettier/Vetur格式化是一场噩梦。虽然有许多GitHub问题和StackOverflow帖子,但我向您保证这不是重复的问题。我已经按照每个教程进行了尝试,但没有一个能够正常工作。其中一些可以解决一个问题,但会引入另一个问题。其中一些则无法解决任何问题。其中一些会导致VS Code崩溃。大多数建议存在冲突,并且包括多个官方来源。许多教程已过时,参考了已过时的配置属性。
我希望VS Code在保存时对我的.vue和.ts文件进行lint和格式化。
我已经花费了数小时并尝试了许多不同的配置,但以下配置是我最接近可行的配置。然而,使用以下配置时,每当保存.vue文件时,文件中的元素会暂时换行,然后立即恢复为单行元素:
以下是我的当前配置文件:
.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'
}
};
.prettierrrc
{
"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
}
有人真的让这个工作了吗?