VS Code 设置解析及保存代码格式化问题

丿刘先森

已于 2023-03-20 11:24:07 修改

阅读量1.4w

点赞数 5

分类专栏：工具/格式化文章标签： vscode配置详解保存自动删除代码后的空格问题 git新拉取得代码整个文件报错文件无修改git提示文件更改

于 2021-09-09 18:12:06 首次发布

本文链接：https://blog.csdn.net/lwx931449660/article/details/120176961

版权

工具/格式化专栏收录该内容

11 篇文章 0 订阅

订阅专栏

VS Code保存自动删除了代码后的空格问题

Delete `␍`eslint(prettier/prettier)报错问题

git 提示文件有修改，但实际没有任何更改

VS Code 的相关配置解析

extensions.json文件

分享配置

VS Code保存自动删除了代码后的空格问题

问题的由来是这样的，git 上拉去的代码，用vscode打开，随便打开一个vue文件，没有做任何更改，习惯性的 Ctrl + S 保存了，然后 git 显示文件有更改，查看工作树，显示是这样的，明明没有做任何修改，但是提示有修改

这个问题困扰了好久，网上各种查找，各种修改配置，都不起作用，不过最终还是解决了，先上解决办法：

你应该分别修改vscode编辑器设置和 editorconfig 文件配置

1，vscode编辑器

打开settings.json文件，修改下面几项

"editor.formatOnType": false, // 控制编辑器在键入一行后，是否自动格式化该行
"editor.formatOnSave": false, // 保存自动格式化，默认只支持 javascript .js 文件
"files.trimTrailingWhitespace": false, // 保存文件时删除行尾的空格

2，editorconfig 文件修改如下配置

#是否删除换行符之前的空白字符
trim_trailing_whitespace = false
#文件是否应以换行符结尾
insert_final_newline = false

至此，相信你的问题应该能解决了。

Delete `␍`eslint(prettier/prettier)报错问题

在 window 环境新拉取得代码，打开编辑器全是报红的，如下：

网上针对这种问题有比较全面的解释与解决，这里不做赘述。详情请看：

Delete `␍`eslint(prettier/prettier) 错误的解决方案。

这里说一下个人理解：

其实问题的重点在于需要 禁用git的自动换行功能，即：autocrlf = false

命令：

git config --global core.autocrlf false

至此，配合上述文章提供的步骤综合处理，相信你的问题可以解决。

git 提示文件有修改，但实际没有任何更改

原理同第二个问题，细节不赘述了。

执行第二个问题里面的命令，后执行下面命令：

git config --global core.filemode false

如果有问题，执行：

git config --global --replace-all core.filemode true

该项修改的是文件权限 相关问题，忽略文件权限。

关于文件换行符还有一项：

git config --global core.safecrlf true

执行完上述步骤，执行：git config --list ，查看上述修改是否修改完成。

如果执行完上述步骤问题还没有解决，那么你需要从新拉取代码，即可。

VS Code 的相关配置解析

vscode配置相信大家都不陌生了，平时也肯定多多少少都有自己去设置一些内容，VS Code 提供了两种不同的设置范围：

用户设置：

主要是针对 vscode编辑器设置里用户的设置内容，此用户设置是对所有项目都生效的，主要设置路径为：文件 -> 首选项 -> 设置 -> 用户

在此所做的所有设置都是用户设置，是针对当前编辑器，针对你打开的所有项目都生效的，你可以选择在设置编辑器中操作，或者也可以修改 settings.json 文件来修改编辑器设置，如下：

工作区设置

指存储在工作区中的设置，仅在工作区打开时应用，工作区设置会覆盖用户设置。工作区设置特定于项目，可以在项目的开发人员之间共享。

通俗来讲就是说工作区设置是针对某一个项目的独有的设置，既然是针对项目级别的设置，那么设置文件就是存储在项目文件夹中的，在项目根目录中 .vscode 文件夹就是用来保存工作区设置的。

怎么实现工作区设置内：

1，可以在项目根目录新建 .vscode 文件夹，文件夹下新建 settings.json 文件，那么你可以修改当前 settings.json 文件中的配置，便只会对当前项目生效，这就是工作区设置。

2，可以直接修改vscode配置中的工作区设置，vscode会自动生成针对当前项目的配置文件，.vscode 文件夹，用来保存你所做的修改，并只对当前项目生效。如：

更多关于vscode 的配置内容请查看：

史上最全vscode配置使用教程

VS Code 官方文档

extensions.json文件

改文件用来为当前项目推荐扩展插件，用以保持项目所有成员 vscode 编辑器扩展插件统一，具体使用请看：

vue项目配置vscode

分享配置

插曲：对于格式化程序的默认开启关闭及不太常见的一些问题推荐：

详解VSCode 格式化不符合预期的问题 - 知乎

用户配置：

{
  // ==================== associations =================
  "files.associations": {
    "*.html": "html",
    "*.wxml": "wxml",
    "*.vue": "vue",
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript"
  },

  // ==================== emmet ==================
  // 配置emmet是否启用tab展开缩写(在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码)
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  // 在默认不支持的语言中启用Emmet缩写。在这里添加语言和Emmet支持的语言之间的映射
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact",
    "wxml": "html"
  },

  // ================= 格式化配置 =================
  // 是否为JavaScript文件开启eslint检测，默认开启
  "eslint.enable": true,
  // 保存时修复来自所有插件的所有可自动修复的ESlint错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 启用/禁用javascript格式化程序
  // 代表vscode默认格式js程序是否开启
  // 用eslint格式化js时需要关闭
  // 无任何其他格式化插件时执行此格式化程序
  "javascript.format.enable": false,
  // 应通过ESLint验证的语言数组
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  // 控制编辑器在键入一行后，是否自动格式化该行
  "editor.formatOnType": false,
  // 在保存时格式化文件,格式化程序必须可用
  // 单纯使用eslint可以不开启，使用prettier时必须开启
  // 使用VSCode自身格式化程序格式化
  "editor.formatOnSave": false,
  // 在保存文件时修剪尾随空格
  "files.trimTrailingWhitespace": false,
  // 当启用时，diff编辑器将忽略前导或尾随空格中的更改
  "diffEditor.ignoreTrimWhitespace": false,
  // 在快速修复菜单中显示打开的 lint 规则文档网页
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 关闭vetur的格式化功能
  "vetur.validation.script": false,
  "vetur.validation.style": false,
  "vetur.validation.template": false,
  // "editor.tabSize": 2

  // =================== 格式化插件选择 ====================
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[javascript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[json]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "editor.formatOnPaste": false,

  // =================== 基础配置 =================
  "editor.fontSize": 14,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // 窗口标题
  "minapp-vscode.disableAutoConfig": true,
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  // "breadcrumbs.enabled": false, // 启用/禁用面包屑导航
  // "git.suggestSmartCommit": false, // 建议启用智能提交(在没有分段更改时提交所有更改)
  // "gitlens.advanced.messages": { // 指定应该抑制哪些消息
  //   "suppressCommitNotFoundWarning": true
  // },
  
  //  - off: 永不换行
	//  - on: 将在视区宽度处换行
	//  - inherit: 将根据 `editor.wordWrap` 设置换行
	"diffEditor.wordWrap": "inherit",
  // 折行方式 on视区宽度
  "editor.wordWrap": "on",
  // 打开新的文件tab页是否覆盖之前打开的tab页
  "editor.rename.enablePreview": false,
}

工作区配置：

vue项目：

{
  // ==================== associations =================
  "files.associations": {
    "*.html": "html",
    "*.wxml": "wxml",
    "*.vue": "vue",
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript"
  },

  // ==================== emmet ==================
  // 配置emmet是否启用tab展开缩写(在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码)
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  // 在默认不支持的语言中启用Emmet缩写。在这里添加语言和Emmet支持的语言之间的映射
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact",
    "wxml": "html"
  },

  // ================= 格式化配置 =================
  // 是否为JavaScript文件开启eslint检测，默认开启
  "eslint.enable": true,
  // 保存时修复来自所有插件的所有可自动修复的ESlint错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  },
  // 应通过ESLint验证的语言数组
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "reacttypescript",
    "reactjavascript",
    "html",
    "vue"
  ],
  // 控制编辑器在键入一行后，是否自动格式化该行
  "editor.formatOnType": true,
  // 在保存时格式化文件,格式化程序必须可用
  // 单纯使用eslint可以不开启，使用prettier时必须开启
  // 会使用模式格式化工具格式化代码
  "editor.formatOnSave": false,
  "editor.tabSize": 2,
  "editor.trimAutoWhitespace": true,
  // 在保存文件时修剪尾随空格
  "files.trimTrailingWhitespace": false,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.eol": "\n",
  // 当启用时，差异编辑器将忽略前导或尾随空格中的更改
  "diffEditor.ignoreTrimWhitespace": false,
  // 在快速修复菜单中显示打开的 lint 规则文档网页
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 关闭vetur的格式化功能
  "vetur.validation.script": false,
  "vetur.validation.style": false,
  "vetur.validation.template": false,

  // =================== 格式化插件选择 ====================
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[javascript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[json]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "editor.formatOnPaste": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // =================== 基础配置 =================
  "editor.fontSize": 14,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // 窗口标题
  "minapp-vscode.disableAutoConfig": true,
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  // "breadcrumbs.enabled": false, // 启用/禁用面包屑导航
  // "git.suggestSmartCommit": false, // 建议启用智能提交(在没有分段更改时提交所有更改)
  // "gitlens.advanced.messages": { // 指定应该抑制哪些消息
  //   "suppressCommitNotFoundWarning": true
  // },

  //  - off: 永不换行
  //  - on: 将在视区宽度处换行
  //  - inherit: 将根据 `editor.wordWrap` 设置换行
  "diffEditor.wordWrap": "inherit",
  // 折行方式 on视区宽度
  "editor.wordWrap": "on",
  // 打开新的文件tab页是否覆盖之前打开的tab页
  "editor.rename.enablePreview": false,
  "git.autofetch": true,
  "workbench.iconTheme": "vscode-icons",
  "create-uniapp-view.style": "scss",
  "git.confirmSync": false,
  "security.workspace.trust.untrustedFiles": "open"
}

微信小程序：

{
  // 配置语言的文件关联
  "files.associations": {
    "*.html": "html",
    // "*.wxml": "html",
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript"
  },
  // 在默认不受支持的语言中启用Emment缩写
  "emmet.includeLanguages": {
    "wxml": "html"
  },

  // 打开编辑器保存格式化功能（会使用当前存在且可用的格式化程序）
  "editor.formatOnSave": true,
  "vetur.validation.template": false, // 关闭 Vetur 的模板验证
  "vetur.validation.script": false, // 关闭 Vetur 的script验证
  "vetur.validation.style": false, // 关闭 Vetur 的style验证
  "vetur.format.enable": true, // 打开或关闭 Vetur 格式化程序

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    // 指定要执行验证的文件
    "javascript",
    "javascriptreact",
    "typescript",
    "reacttypescript",
    "reactjavascript"
  ],

  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[wxml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}