全面了解vscode格式化配置

小蓝 • 2024-12-16 13:36 • 编程

一、基础配置

网上大多数有关vscode格式化的文章都会提到Prettier这个插件，而且确实非常好用。但在使用它之前，你需要先进行基础的格式化配置，否则除了英文单词之外，其他的一切都会在保存时一团糟。

在文件->首选项->设置中搜索“Format On Save”，勾选上这一选项即可。此时，保存时就会自动对代码进行格式化。不过注意，这个配置只对语言服务（如JavaScript、TypeScript等）生效，其他的格式化需要使用专属插件。

二、使用Prettier

如果你需要进行更为复杂的格式化，Prettier是一个不错的选择。这个插件可以支持大部分语言，还能自动检测你的文件类型并进行格式化。在使用Prettier之前，你还需要在终端中安装它，可以使用npm或yarn来安装。命令如下：

npm install --save-dev prettier
yarn add --dev prettier

安装完成后，在文件->首选项->设置中进行如下配置：

{
  "editor.formatOnSave": true,
  "[javascript]": {
      "editor.formatOnSave": false
  },
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "files.eol": "\n",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true
}

其中，“prettier.singleQuote”代表是否使用单引号，“prettier.semi”代表是否使用分号，“files. eol”代表使用哪种行尾格式，这些都是可以自己根据情况进行调整的。

三、使用ESLint

ESLint是一款非常出色的代码检查工具，可以保证你的代码质量和规范性。在使用ESLint之前，你还需要在终端中安装它，可以使用npm或yarn来安装。命令如下：

npm install eslint --save-dev
yarn add eslint --dev

安装完成后，你需要创建一个 .eslintrc.json 或 eslintrc.js 文件，根据项目需求进行配置。配置后，你可以将其与Prettier一起使用，来实现更完美的代码格式化效果。

使用ESLint能够帮助我们识别代码中的问题并进行修复，而使用Prettier则能解放我们的双手，让我们不再需要一遍又一遍地手动调整代码格式。

四、使用EditorConfig

不同编辑器的默认字符编码、换行符类型等都不同，这会导致在不同编辑器中打开同一个文件时显示不一致，甚至会影响到代码的运行。而使用 EditorConfig 插件可以解决这个问题，它会创建一个 .editorconfig 文件，并根据其中的规则为文件做出相应的调整。

在使用EditorConfig之前，你需要先在终端中安装它，可以使用npm或yarn来安装。命令如下：

npm install --save-dev editorconfig
yarn add --dev editorconfig

安装完成后，在根目录下创建一个 .editorconfig 文件，然后在其中添加如下样例内容：

root = true

[*]
charset = utf-8
indent_style = tab
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

这样，你就可以为自己的代码配置一些基本规则，保证代码的整洁、一致性。

五、格式化JSON文件

在使用vscode编辑JSON文件时，可能会遇到格式化问题。你可能已经注意到，在JSON文件中缩进时，几个空格和一个tab键的缩进是不能通用的。要解决这个问题，你需要在.vscode/settings.json文件中添加如下代码：

{
  "[json]": {
      "editor.insertSpaces": true,
      "editor.tabSize": 2
  }
}

通过以上配置，你就可以愉快地进行JSON文件的编辑和格式化啦。

总结

vscode的格式化配置非常强大，通过合理的配置可以大大提高我们的代码编写效率。在开始使用前，你需要先进行基础的格式化配置，然后按照需求选择使用Prettier、ESLint和EditorConfig中的哪些工具。希望这篇文章能帮助你更好地了解与使用这些工具。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270364.html