关于vscode中settings.json中的设置

关于vscode中settings.json中的设置

为什么会需要有这个文章,因为在整合eslint和prettier出现settings.json文件,究竟哪个配置对应哪个插件?

vscode版本1.93.1

settings.json

json 复制代码
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit"
  },
}

这段 JSONC 配置应用于 VSCode 编辑器,其执行流程如下:

保存文件时:

当用户保存一个文件时,触发后续配置项的检查和应用。

如果文件中有格式化问题,由于 "editor.formatOnSave": true,编辑器会自动进行代码格式化。

要确定 editor.formatOnSave 使用的是哪个格式化工具,可以通过以下几种方式来确认:

1. 查看全局设置:

在 VSCode 中,打开设置 (File > Preferences > Settings 或者使用快捷键 Ctrl + ,)。

查找 Editor: Format On Save 相关的设置,特别是 editor.defaultFormatter 和 editor.formatOnSaveProvider。

2.查看工作区或项目级别的设置:

在项目的 .vscode/settings.json 文件中,查看是否有特定的格式化工具配置。

常见的配置项包括:

editor.defaultFormatter: 指定默认的格式化工具。

具体格式化工具的扩展 ID,例如 esbenp.prettier-vscode 或 dbaeumer.vscode-eslint。

3.安装的扩展:

查看已安装的扩展列表 (Extensions 侧边栏),找到与格式化相关的扩展。

常用的格式化工具扩展有:

Prettier (esbenp.prettier-vscode)

ESLint (dbaeumer.vscode-eslint)

TSLint (ms-vscode.vscode-typescript-tslint-plugin)

TypeScript Formatter (vscode.typescript-language-features)

检查扩展设置:

如果安装了多个格式化工具,可以查看每个扩展的具体设置,例如:

JSON 复制代码
{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这将指定默认的格式化工具为 Prettier。

示例配置

假设你安装了 Prettier 和 ESLint,并希望使用 Prettier 进行格式化,可以在 .vscode/settings.json 中添加以下配置:

JSON 复制代码
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样,VSCode 在保存文件时就会使用 Prettier 进行格式化。

执行代码操作:

检查是否有可以被自动修复的问题。
source.fixAll: "explicit" 这个配置项表示在保存文件时,显式地修复所有可以自动修复的问题。这些问题是通过各种 linting 工具检测到的,不限于 ESLint。
source.fixAll.eslint: "explicit" 这个配置项特别指定使用 ESLint 来修复所有可以自动修复的问题。这意味着只针对 ESLint 报告的问题进行修复。

因此,这两个配置项的作用范围不同:

  • source.fixAll 适用于所有 linting 工具。
  • source.fixAll.eslint 仅适用于 ESLint。
    通常情况下,source.fixAll.eslint 是 source.fixAll 的子集,但为了确保 ESLint 的问题得到特别处理,两者可以同时配置。

总结:

在保存文件时,先自动格式化代码,然后使用 ESLint 和其他 linter 工具尝试自动修复所有能修复的代码问题。

相关推荐
微凉的衣柜2 分钟前
使用 VS Code 远程连接时解决 OpenSSL 版本不匹配及权限问题
服务器·vscode·ubuntu
白萝卜弟弟1 小时前
【MySQL】MySQL函数之JSON_EXTRACT
数据库·mysql·json
B1nna10 小时前
SpringMVC学习记录(三)之响应数据
java·学习·json·springmvc·jsp
1024小神11 小时前
package.json中“type“: “module“是什么含义,es6和commonjs的区别以及require和import使用场景
前端·json·es6
慧都小妮子12 小时前
借助Aapose.Cells ,在 Node.js 中将 Excel 转换为 JSON
node.js·json·excel·aspose.cells
Dreams°12314 小时前
【ECMAScript标准规范】
前端·vscode·前端框架·ecmascript
杜杜的man16 小时前
【go从零单排】JSON序列化和反序列化
golang·json
我是苏苏17 小时前
Web开发:ABP框架6——appsetting.json的读取以及实例的注入
前端·windows·json
Mephisto.java18 小时前
【大数据学习 | HBASE高级】rowkey的设计,hbase的预分区和压缩
大数据·sql·mysql·json·hbase·database
乐闻x19 小时前
ESLint 使用教程(七):ESLint还能校验JSON文件内容?
前端·javascript·json·eslint