当前位置：首页 > news >正文

前端工程化工具系列（六）—— VS Code(v1.89.1)：强大的代码编辑器

news 2025/7/8 11:34:17

VS Code（Visual Studio Code）是一款由微软开发的强大且轻量级的代码编辑器，支持多种编程语言，并提供了丰富的扩展插件生态系统。

这里主要介绍如何使用配置 ESLint、Stylelint 等插件来提升开发效率。

1 自动格式化代码

最终要达到的效果是：在对文件保存时自动格式化 Vue、JS/TS、CSS/SCSS 等文件中的代码。
很多文章都提出使用 prettier 来做代码格式化，但在使用过程中发现它有一些局限性。比如：从一个模块中导入多个接口时，用 prettier 格式化时后会一个接口放一行，相当难看（如下图），而且还没法被 ESLint 修复。
在这里插入图片描述
这个问题于 2019 年 3 月就在 github 的 issues 中被提出，5 年过去了仍没有解决，遂放弃 prettier 插件，寻找别的解决方案。后来发现 VS Code 自带的格式化工具就挺好，再与 EditorConfig 及其他插件一结合就挺完美的。

在 VS Code 中安装 ESLint、Stylelint、 Vue - Official、EditorConfig for VS Code 插件。
在项目根目录下创建 .editorconfig 文件，填入以下内容：

# top-most EditorConfig file
root = true# All Files
[*]
charset = utf-8                  # Set default charset
indent_style = space             # 2 space indentation
indent_size = 2
end_of_line = lf                 # Unix-style
insert_final_newline = true      # newlines with a newline ending every file
trim_trailing_whitespace = true  # remove any whitespace characters preceding newline characters
max_line_length = 200            # Forces hard line wrapping after the amount of characters specified# Markdown Files
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

在 VS Code 中打开通过快捷键 Crtl + Shift + P ，输入settings.json 打开 settings.json文件。
在这里插入图片描述
在 settings.json 中加入以下内容：

{// 保存时自动格式化"editor.formatOnSave": true,// 保存时自动修复错误"editor.codeActionsOnSave": {"source.fixAll": "explicit"},// 开启对 .vue 等文件的检查修复"eslint.validate": ["javascript","typescript","javascriptreact","typescriptreact","html","vue","markdown"],// 开启对样式文件的检查修复"stylelint.validate": ["css","less","scss","postcss","vue","html"],// 默认使用vscode的css格式化"[css]": {"editor.defaultFormatter": "vscode.css-language-features"},"[scss]": {"editor.defaultFormatter": "vscode.css-language-features"},"[typescript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"[vue]": {"editor.defaultFormatter": "Vue.volar"}
}