相信有不少人都有为代码格式化这个问题发过愁，自己的代码写的乱七八糟，在团队代码规范管理中这也是一个很常见的一个问题，所以我们迫切需要一个统一的规范来格式化我们的代码，接下来我将介绍一下我从实践中不断总结和完善的格式化规则，该规则支持js、ts、.d.ts、vue、jsonc、jsdoc、html、markdown、css、scss、less等多种文件类型的格式化，同时还支持导入语句排序、样式排序等功能，并且配置极其简单，使用方便，你无需关注其内部实现，可直接使用！
好的话不多说先看实际效果：
安装教程：
1. 先安装以下包，注意Eslint的主版本号不可大于8，否则格式化将无效
// 如果你使用的是 npm 或者 yarn，那么只需把 pnpm 替换即可
pnpm i eslint@8.57.1 prettier prettier-eslint stylelint @dyb-dev/eslint-config @dyb-dev/prettier-config @dyb-dev/stylelint-config -D
2. 在VSCode中搜索EsLint、Prettier ESLint、Stylelint等插件然后下载安装
3. 新建 .vscode/settings.json 文件，将以下配置添加进去
{
// 开启Prettier ESLint保存自动格式化（formatOnSave与codeActionsOnSave冲突，会格式化2次，所以不在codeActionsOnSave中写）
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
// 启用stylelint自动保存格式化,explicit:只会在手动保存时生效
"source.fixAll.stylelint": "explicit",
// 启用markdownlint自动保存格式化
"source.fixAll.markdownlint": "explicit"
},
// 设置全局默认格式化插件，无需手动设置
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
// 设置 prettier格式化 在 eslint格式化 前执行
"vs-code-prettier-eslint.prettierLast": false,
"[scss]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[less]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
// #region CODE: eslint 插件配置
// 启用工作区文件夹的 ESLint,默认:true
"eslint.enable": true,
// 启用调试模式
"eslint.debug": true,
// 对整个工作区文件夹进行 lint 检测
"eslint.lintTask.enable": true,
// 对整个工作区进行 linting 的任务时应用的命令行选项 示例:-c /.eslintrc.json
"eslint.lintTask.options": "",
// 扩展使用 ESLint 类 API
"eslint.useESLintClass": true,
// lint 检查时机,默认: onType:输入代码时
"eslint.run": "onType",
// 是否忽略规则严重程度为 warn 的警告
"eslint.quiet": false,
// 使用系统中安装的 Node.js 版本来执行检查,默认:node
"eslint.runtime": "node",
// 传递额外的参数给 Node.js 运行时,示例：--max_old_space_size 增加 Node.js 运行时的最大堆内存大小，处理大型项目或运行耗费大量内存的操作时防止出现内存不足
"eslint.execArgv": ["--max_old_space_size=4096"],
// 尝试 lingt 检测文件的语言,启用默认值
"eslint.probe": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"],
// 强制 lingt 检测文件的语言,默认:["javascript", "javascriptreact"]
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "json", "jsonc"],
// 启用 ESLint 修复功能，只对lint检查的文件
"eslint.format.enable": true,
// 指定如何计算 ESLint 使用的工作目录,默认:location
// location:指示 ESLint 使用工作区文件夹位置或文件位置（如果没有打开工作区文件夹）作为工作目录
// auto:ESLint 扩展会根据 package.json、.eslintignore 和 .eslintrc* 文件的位置推断工作目录
"eslint.workingDirectories": [{ "mode": "auto" }],
// 配置快速修复菜单
"eslint.codeAction.disableRuleComment": {
// 是否显示禁用 lint 规则的选项
"enable": true,
// 禁用规则的注释位置,注释加在代码的上方
"location": "separateLine"
},
// 在快速修复菜单中是否显示打开 lint 规则文档网页的选项
"eslint.codeAction.showDocumentation": {
"enable": true
},
// 保存时修复所有可能的问题,默认:all
"eslint.codeActionsOnSave.mode": "all",
// 所有规则严重程度强制设置为错误
"eslint.rules.customizations": [{ "rule": "*", "severity": "error" }],
// 发现忽略的文件时，不会生成警告,默认:off
"eslint.onIgnoredFiles": "off",
// 在显示问题时是否将带有下划线的问题的文本范围缩短到第一个相关行,准确定位问题
"eslint.problems.shortenToSingleLine": true,
// 启用扁平化配置的支持（eslint.config.js），由 ESLint 版本 8.21 或更高版本支持,v9将默认支持扁平化配置
"eslint.useFlatConfig": false,
// #endregion
// #region CODE: stylelint 插件配置
// 设置包管理器，以便正常解析stylelint依赖（注意：只在 `stylelint` 依赖全局安装时才会生效） 默认：npm
"stylelint.packageManager": "pnpm",
// 设置stylelint所包含的文件类型
"stylelint.validate": ["css", "sass", "scss", "less", "vue"],
// 设置在这些类型的文件中触发了与 Stylelint 相关的问题，它将会显示代码片段，帮助你快速理解问题所在并进行修复
"stylelint.snippet": ["css", "sass", "scss", "less", "vue", "postcss"],
// 禁用vscode内置 CSS、Less 和 SCSS linter，避免与stylelint冲突
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// #endregion
}
4. 新建 .eslintrc.cjs 文件，然后将以下配置添加进去
module.exports = {
extends: ["@dyb-dev/eslint-config"]
}
5. 新建 .prettierrc.mjs ****文件，然后将以下配置添加进去
import prettierConfig from "@dyb-dev/prettier-config"
export default prettierConfig
6. 新建 .stylelintrc.mjs 文件，然后将以下配置添加进去
export default {
extends: ["@dyb-dev/stylelint-config"]
}
好的，现在你已经能够使用所有格式化功能了，如果格式化没有生效，可重启VSCode一下试试看呢
本文到这里就结束啦，希望能给大家带来帮助！
