typescript - Vue/TypeScript/ESLint/Prettier/Vetur 格式不起作用
问题描述
试图在 VS Code 中获得 Vue/TypeScript/ESLint/Prettier/Vetur 格式是一场噩梦。在这方面有很多 GitHub 问题和 StackOverflow 帖子,但我向你保证这不是重复的。我遵循了每个教程,但它们都不起作用。其中一些解决了一个问题,但又引入了另一个问题。其中一些不能解决任何问题。其中一些会导致 VS Code 崩溃。大多数在他们规定的建议中相互冲突,包括多个官方来源。许多已经过时,引用过时的配置属性。
我希望 VS Code 在我保存时对我的 .vue 和 .ts 文件进行 lint 和格式化。
我花了几个小时从不同的帖子和教程中尝试了很多很多配置,但这是我得到的最接近有效的配置。然而,使用以下配置,每当保存 .vue 文件时,.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"
}
设置.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
}
有没有人真的有这个工作?
解决方案
为了让 Vue/TypeScript/ESLint/Prettier/Vetur 在 VSCode 中工作,我按照以下步骤操作:
- 通过运行安装 Vue eslint 插件
vue add @vue/cli-plugin-eslint
。注意:如果您有客户端文件夹目录和服务器文件夹目录,则必须先 cd 到客户端目录,然后才能使用vue add
. - 更改了
.eslintrc.js
我的 Vue 项目中的。请查看此帖子以获取更多信息/替代方案。基本上,我创建了一个新的 Vue + Typescript 项目并将 eslint 配置复制到我的真实项目中。样板代码起初并不能完全工作,所以我对其进行了一些修改:
module.exports = {
root: true,
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
},
env: {
browser: true,
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:vue/recommended",
"@vue/prettier",
"plugin:prettier/recommended",
"@vue/typescript",
],
// required to lint *.vue files
plugins: [
"vue",
"@typescript-eslint"
],
// add your custom rules here
rules: {
// allow async-await
"generator-star-spacing": "off",
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
}
- 通过运行安装了以下依赖项
npm i -D eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
有关更多信息,请查看此Github 页面。注意:我不需要eslint-plugin-promise
(当我尝试安装它时它抛出了一个错误,但它可能对你有用)。
- 将我的 VSCode 更改
settings.json
为以下内容:
{
"editor.defaultFormatter": "octref.vetur",
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": [
"source.organizeImports",
"source.fixAll"
],
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx", ".ts" ]
},
"eslint.validate": [ "javascript", "vue", "html", "typescriptvue", "typescript" ],
"eslint.workingDirectories": [
"./client"
]
}
有了这个,我就可以使用 Vue/TypeScript/ESLint/Prettier/Vetur!每次保存时,它都会完美地整理和格式化我的代码,我真的不必担心代码中的小东西。如果您仍然有问题,请告诉我,我会尝试看看我能做些什么。
推荐阅读
- sql-server - DBATools 错误:'无法加载文件或程序集'Microsoft.SqlServer.Replication.dll 或其依赖项之一''
- node.js - 对于产生节点子进程的 Electron 应用程序,子进程没有获得全磁盘访问权限
- python - 如何通过提供值作为条件来获取字典键
- javascript - Javascript:搜索对象数组并从对象中获取链接值
- python - Pyspark:依靠 pyspark.sql.dataframe.DataFrame 需要很长时间
- reactjs - 无法在 React 中缩放 SVG
- npm - PyCharm node.js 服务器在使用 nvm 时使用特定的 npm 版本
- java - 是否可以一次将多个文件上传到 Firebase 存储
- c - 如何在 C 中增加数组中的元素(整数)?
- javascript - 本地存储问题 > 我似乎无法完成这项工作