VSCode中官方Svelte插件的一些配置项,在设置面板找不到对应的设置,需要在 setting.json 文件中找到

配置文件

{
  // 启动时要求启用TypeScript插件。
  "svelte.ask-to-enable-ts-plugin": true,
 
  // 启用一个TypeScript插件,为TS/JS文件中的Svelte文件提供智能感知。
  "svelte.enable-ts-plugin": false,
 
  // - 通常情况下,您不需要设置此项 - 为语言服务器启用更详细的日志记录,以便调试语言服务器执行。
  "svelte.language-server.debug": false,
 
  // - 通常情况下,您不需要设置此项 - 语言服务器可执行文件的路径。如果您已经安装了 "svelte-language-server"        npm 包,则其位于 "bin/server.js" 中。路径可以是相对于工作区根目录或绝对路径。仅在您想要使用自定义版本        的语言服务器时才设置此项。这样还将使用工作区中的 TypeScript 版本。出于安全原因,只能在用户设置中更改         此设置。
  "svelte.language-server.ls-path": "",
 
  // - 通常情况下,您不需要设置此项 - 用于生成语言服务器的端口。可用于附加到进程以进行调试和分析性能。如果因为“端口已被占用”而导致崩溃,请尝试设置端口。-1 = 使用默认端口。
  "svelte.language-server.port": -1,
 
  // - 通常情况下,您不需要这个 - 用于生成语言服务器的节点可执行文件的路径。当您依赖本机模块(如node-sass)时,这非常有用,因为如果没有它们将在vscode上下文中运行,意味着可能会出现节点版本不匹配的问题。最低所需的节点版本是12.17。出于安全原因,此设置只能在用户设置中更改。
  "svelte.language-server.runtime": "",
 
  // 为CSS启用颜色选择器
  "svelte.plugin.css.colorPresentations.enable": true,
 
  // 为CSS启用Emmet自动完成功能
  "svelte.plugin.css.completions.emmet": true,
 
  // 启用CSS的自动完成功能
  "svelte.plugin.css.completions.enable": true,
 
  // 启用CSS的诊断消息
  "svelte.plugin.css.diagnostics.enable": true,
 
  // 启用CSS的文档颜色
  "svelte.plugin.css.documentColors.enable": true,
 
  // 启用CSS文档符号
  "svelte.plugin.css.documentSymbols.enable": true,
 
  // 启用CSS插件
  "svelte.plugin.css.enable": true,
 
  // 应该检查哪些 CSS 文件中的全局变量(`--global-var: value;`)。这些变量将添加到 CSS 完成项中。以逗号分隔的文件路径字符串或相对于工作区根目录的通配符。
  "svelte.plugin.css.globals": "",
 
  // 启用CSS的悬停信息
  "svelte.plugin.css.hover.enable": true,
 
  // 启用CSS的选择范围
  "svelte.plugin.css.selectionRange.enable": true,
 
  // 为HTML启用Emmet自动完成功能
  "svelte.plugin.html.completions.emmet": true,
 
  // 启用HTML的自动完成功能
  "svelte.plugin.html.completions.enable": true,
 
  // 启用HTML文档符号
  "svelte.plugin.html.documentSymbols.enable": true,
 
  // 启用HTML插件
  "svelte.plugin.html.enable": true,
 
  // 为HTML启用悬停信息
  "svelte.plugin.html.hover.enable": true,
 
  // 启用HTML的链接编辑功能
  "svelte.plugin.html.linkedEditing.enable": true,
 
  // 启用HTML标签自动闭合
  "svelte.plugin.html.tagComplete.enable": true,
 
  // 为Svelte启用代码操作
  "svelte.plugin.svelte.codeActions.enable": true,
 
  // 忽略或将其视为错误的Svelte编译器警告代码。示例:{ 'css-unused-selector': 'ignore', 'unused-export-let': 'error'}
  "svelte.plugin.svelte.compilerWarnings": {},
 
  // 启用 Svelte 的自动完成功能
  "svelte.plugin.svelte.completions.enable": true,
 
  // 生成新的脚本标签时要使用的默认语言
  "svelte.plugin.svelte.defaultScriptLanguage": "none",
 
  // 启用 Svelte 的诊断消息
  "svelte.plugin.svelte.diagnostics.enable": true,
 
  // 启用Svelte插件
  "svelte.plugin.svelte.enable": true,
 
  // 在尝试分割代码之前的最大行宽。这是Prettier核心选项。如果您已安装了Prettier扩展,将忽略此选项,并改为使用该扩展的相应选项。如果存在任何类型的配置文件(例如`.prettierrc`文件),也会忽略此选项。
  "svelte.plugin.svelte.format.config.printWidth": 80,
 
  // 在可能的情况下,使用单引号而不是双引号。这是一个Prettier核心选项。如果您已安装了Prettier扩展程序,则会忽略此选项,并改为使用该扩展程序的相应选项。如果存在任何类型的配置文件(例如`.prettierrc`文件),也将忽略此选项。
  "svelte.plugin.svelte.format.config.singleQuote": false,
 
  // 如果属性名称和表达式相同,则启用/禁用组件属性简写的选项。 如果存在任何类型的配置文件,例如`.prettierrc`文件,则忽略此选项。
  "svelte.plugin.svelte.format.config.svelteAllowShorthand": true,
 
  // 将多行元素的`>`放在新的一行上。如果存在任何类型的配置文件,例如`.prettierrc`文件,则忽略此选项。
  "svelte.plugin.svelte.format.config.svelteBracketNewLine": true,
 
  // 是否缩进`<script>`和`<style>`标签内的代码。如果存在任何类型的配置文件,例如`.prettierrc`文件,则忽略此选项。
  "svelte.plugin.svelte.format.config.svelteIndentScriptAndStyle": true,
 
  // 格式:按照您希望的顺序,使用-连接键`options`、`scripts`、`markup`和`styles`。如果存在任何类型的配置文件(例如`.prettierrc`文件),此选项将被忽略。
  "svelte.plugin.svelte.format.config.svelteSortOrder": "options-scripts-markup-styles",
 
  // 更严格的HTML语法。如果存在任何类型的配置文件,例如`.prettierrc`文件,则忽略此选项。
  "svelte.plugin.svelte.format.config.svelteStrictMode": false,
 
  // 启用Svelte的格式化(包括css和js)。您可以通过此扩展设置一些格式选项。如果存在任何类型的配置文件,例如`.prettierrc`文件,则会忽略它们。
  "svelte.plugin.svelte.format.enable": true,
 
  // 启用Svelte的悬停信息
  "svelte.plugin.svelte.hover.enable": true,
 
  // 启用重命名/移动Svelte文件功能
  "svelte.plugin.svelte.rename.enable": true,
 
  // 启用Svelte的选择范围
  "svelte.plugin.svelte.selectionRange.enable": true,
 
  // 为TypeScript启用代码操作
  "svelte.plugin.typescript.codeActions.enable": true,
 
  // 启用 TypeScript 的自动完成功能
  "svelte.plugin.typescript.completions.enable": true,
 
  // 启用TypeScript的诊断消息
  "svelte.plugin.typescript.diagnostics.enable": true,
 
  // 启用TypeScript的文档符号
  "svelte.plugin.typescript.documentSymbols.enable": true,
 
  // 启用TypeScript插件
  "svelte.plugin.typescript.enable": true,
 
  // 启用 TypeScript 的悬停信息
  "svelte.plugin.typescript.hover.enable": true,
 
  // 为TypeScript启用选择范围
  "svelte.plugin.typescript.selectionRange.enable": true,
 
  // 为TypeScript启用语义标记(语义高亮)。
  "svelte.plugin.typescript.semanticTokens.enable": true,
 
  // 为TypeScript启用签名帮助(参数提示)
  "svelte.plugin.typescript.signatureHelp.enable": true,
 
  // 跟踪VS Code和Svelte语言服务器之间的通信。
  "svelte.trace.server": "off",
 
  // 显示上下文菜单以生成 SvelteKit 文件。"always" 表示始终显示它。"never" 表示始终禁用它。"auto" 表示在 SvelteKit 项目中显示它。
  "svelte.ui.svelteKitFilesContextMenu.enable": "auto"
}

问题

svelte 中添加事件处理程序的时候,如果使用的是 VSCode并且安装了Svelte官方插件的话,可能会存在一些警告,例如

A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.svelte(a11y-click-events-have-key-events)

A11y:具有 on:click 事件的可见、非交互元素必须伴随着 on:keydown、on:keyup 或 on:keypress 事件。svelte(a11y-click-events-have-key-events)
要求你必须添加 on:keydown、on:keyup 时间才能移除警告,在 eslintec.json文件中尝试使用

"rules": {
	"a11y-click-events-have-key-events": "off"
}

并不生效,后来发现这个警告是 Svelte 的 VSCode 插件报的,所以需要在 .vscode/setting.json 中添加以下配置:

"svelte.plugin.svelte.compilerWarnings": {
	"a11y-click-events-have-key-events": "ignore",
}