关于Vscode格式化的问题

站长

2023年06月09日 17:06 · 阅读数 39

了解插件

vscode 下载了很多插件，例如 ESLint Prettier等，那么在格式化代码的时候很可能有些冲突，所以我们先要了解这些插件，才能更好的去配置

我们主要是对比ESLint Prettier两个工具

Prettier 是一款非常简单易用的代码格式化工具，它的特点是强制规范，自动化，而且可以格式化多种代码语言，例如 JavaScript，CSS，HTML 等。ESLint 则是一款语法检查工具，提供了更高级的错误检测和修复建议

ESlint

ESlint插件默认只提供代码风格检测功能，不能开启代码格式化功能，我们需要配置打开该功能，方便我们在开发时帮助我们格式化代码。

不开启代码格式化功能

不开启代码格式化代码时，我们可以用命令行进行格式化，eslint --fix
开启代码格式化功能

当我们使用Shift + Option + F 格式化代码，vscode会提示我们先配置使用哪个插件格式化代码，但是ESLint默认只能检测，所有我们要提前打开ESLint格式化代码的功能，command+, 打开配置

关于Vscode格式化的问题配置好后，vscode 的settings.json里会出现配置信息（这是vscode自动加的）

"eslint.format.enable": true,

按下Shift + Option + F ,vscode 提示你选择一个插件进行格式化

关于Vscode格式化的问题

选择不同的插件会生成不同的配置

ESlint

 "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },

Prettier

   "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

Prettier ESLint

 "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    }

JavaScript和TypeScript

"[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
      },

我们可以选择一个适合的插件进行格式化

第一种ESLint settings.json

{
  "editor.fontSize": 18,
  "sync.gist": "09fdd39e1746270418018e26ee5825f0606adc38",
  "terminal.integrated.fontFamily": "Meslo LG M for Powerline", // 终端字体
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "workbench.colorTheme": "Dracula",
  "window.zoomLevel": 0.8,
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
}

这时候的格式化是按eslint规则去格式化的，我们还可以在.eslintrc.js 配置eslint 规则，配置后格式化会优先根据.eslint.js文件的配置规则进行配置

举个栗子

.eslintrc.js

 rules: {
        'semi': [2, "always"], //语句强制分号结尾
  }

可以看到文件爆红关于Vscode格式化的问题

格式化文档，自动加上分号关于Vscode格式化的问题

如果设置

 rules: {
        'semi': "off", 
 }

这个时候，代码结尾有没有分号都不会出警报，如果结尾有分号，格式化也不会默认去除，也不会自动添加，维持原状

插播一个小技巧

格式化+保存需要两个步骤，对程序员来说太过繁琐了

开启保存时自动根据自己的配置进行格式化代码，省时省力

关于Vscode格式化的问题

在settings.json默认会添加

 "editor.formatOnSave": true,

Prettier

pretter没有对代码的质量进行检查的能力，只关注格式化，并不具有eslint检查语法等能力，其只会对代码风格按照指定的规范进行统一，避免一个项目中出现多种不同的代码风格

settings.json

{
  "editor.fontSize": 18,
  "sync.gist": "09fdd39e1746270418018e26ee5825f0606adc38",
  "terminal.integrated.fontFamily": "Meslo LG M for Powerline", // 终端字体
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "workbench.colorTheme": "Dracula",
  "window.zoomLevel": 0.8,
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

Prettier 的配置要和eslint配置一致，不然会导致冲突

举个例子，如下图，格式化不符合eslint规则关于Vscode格式化的问题

解决冲突的方法

插件

npm install eslint-config-prettier --save-dev

.eslintrc.js （ eslint配置中plugins和extends区别）

  extends: ['eslint:recommended', 'standard', 'prettier'],

想知道具体原因到node_modules中找到 eslint-config-prettier/index

手动配置规则，让Prettier的配置要和eslint配置一致

解决图上冲突可以配置 .eslintrc.js 的规则

这样配置是让eslint不再检查上面的报错

// 第一种
'no-multiple-empty-lines': 'on',（当然这是一种不太好的方法）

// 第二种（参考的eslint-config-prettier的配置）
// 解决 array 换行问题
'generator-star-spacing': 'off',
indent: 'off',

.eslintrc.js 是检测代码的文件，而 .prettierrc 则是配置格式化代码的规则

eg: .prettierrc

{
  "tabWidth": 2, //缩进时应该使用多少个空格
  "singleQuote": true, //指定是否使用单引号或双引号作为字符串字面量的标记
  "trailingComma": "all",
  "semi": false
}

prettier官网查看更多配置

当然除了配置eslint规则和prettier规则，我们还可以配置编辑器规则，

编辑器配置

.editorconfig

.editorconfig 是一个用于跨编辑器和 IDE 统一代码风格的配置文件。编辑器和 IDE 配置文件中的代码风格设置因厂商不同而有所区别，这会导致在不同编辑器或 IDE 中打开同一份代码时，代码风格出现不一致的情况。使用 .editorconfig 可以解决这个问题。

常见配置

# 设置统一编码为 utf-8
[*]
charset = utf-8

# 设置缩进为 4 个空格
[*.{js,jsx,ts,tsx,html,css,scss}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

settings.json

settings.json分为用户级别的配置和项目级别的配置

用户级别配置

通过Cmd+,打开配置文件进行配置

其中可以定义一些 VS Code 的编辑器和插件的设置。一旦您在 settings.json 文件中定义了某些值，它们将会覆盖默认值。例如，您可以在该文件中定义一些常用的编码设置、颜色主题、字体等。

在该配置文件中，您可以包含以下内容：

编辑器设置：包括字体、主题、区域填充等。
文件关联：将文件类型关联到某个插件或语言。
文件排除：忽略某些文件或文件夹的文件管理器。
应用程序外观：自定义菜单、窗口等的行为和样式。
代码编辑：包括缩进、自动格式化、保存时格式化等。
插件配置：配置安装的插件的行为和设置。

项目级别配置

settings.json 文件通常是与某个具体项目相关联的，它存储了项目级别的配置信息。这个文件通常存储在项目的根目录下的 .vscode 文件夹中。

该文件中的配置优先级高于全局 settings.json 配置文件以及 VS Code 的默认设置。

项目级别的 settings.json 文件允许您定义一些适用于该项目的编辑器设置，例如缩进大小、代码片段、调试启动配置等。当您与团队共同开发或者将您的项目分享给其他人时，这些设置可以在所有用户之间共享，以确保一致的编辑环境。

常见的配置有

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true
  },
  "launch": {
    "configurations": []
  }
}

就我们目前了解到的，我们有三种配置方式，编译器配置，ESLint配置，Prettier配置三种方式要统一，不然会有冲突

如果同时配置一个属性，例如如下配置

.prettierrc

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false,
   
}

.editorconfig

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

.setting.json 项目级

{
    "cSpell.words": ["Immer"],
    "editor.tabSize": 6
}

.setting.json 用户级别配置

{
  //   "terminal.integrated.fontFamily": "Meslo LG M for Powerline", // 终端字体
  //   "sync.gist": "09fdd39e1746270418018e26ee5825f0606adc38",
  //   "workbench.colorTheme": "Dracula",
  //   //   编译器设置
  "editor.fontSize": 18,
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "editor.renderWhitespace": "all",
  "editor.formatOnSave": true,
  "editor.detectIndentation": false,
  "editor.tabSize": 8,
  "eslint.format.enable": true,
  "window.zoomLevel": 1,
  "editor.guides.indentation": true,
  "prettier.semi": false,
   "prettier.tabWidth": 2,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

在 VSCode 中，如果同时启用了多个代码格式化工具，格式化优先级遵循以下原则：

使用工作区设置中指定的格式化工具来格式化代码。

如果工作区没有指定格式化工具，则使用 VSCode 默认的格式化工具。

如果启用了多个格式化工具，并且它们都可以格式化当前文件，VSCode 将使用最高优先级的格式化工具来进行格式化。

测试没有其他格式化代码工具的情况下，我们要删除vscode 的插件（禁用ESLint,删除prettier格式化工具）删除格式化工具后，prettier的配置就一会失效

优先级 .prettier> .editorconfig >.prettier默认配置 > .setting.json项目级别> .setting.json 用户级别

参考文章

zhuanlan.zhihu.com/p/456547987

zhuanlan.zhihu.com/p/103492877

转载自:https://juejin.cn/post/7241492331953635389