「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

vite.config.ts

前端构建工具vite的配置文件，当以命令行方式运行 vite 时，Vite 会自动解析项目根目录下名为 vite.config.js 的文件。

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。

相关文档 👉 入口

windi.config.ts

CSS 框架windcss的配置文件，默认情况下，Windi CSS 将在项目根目录下搜索配置文件。有效文件名是

windi.config.ts
windi.config.js
tailwind.config.ts
tailwind.config.js

Windi CSS是下一代实用程序优先的 CSS 框架。可以将 Windi CSS 视为Tailwind的按需替代品，它提供更快的加载时间、与 Tailwind v2.0 的完全兼容性以及一系列额外的酷功能。

相关文档 👉 入口

tsconfig.json

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

TypeScript 是由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

它的设计目标是开发大型应用，可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

相关文档 👉 入口

stylelint.config.js

CSS代码检查工具stylelint的配置文件，stylelint需要一个配置对象，它将按以下顺序查找以下可能的源：

package.json 中的 stylelint 属性
.stylelintrc 文件
导出JS对象的 stylelint.config.js 文件

stylelint一个强大的，现代的代码检查工具，可以帮助你避免错误并在你的样式中强制执行约定。

相关文档 👉 入口

prettier.config.js

代码格式化工具prettier的配置文件，它将按以下顺序查找以下可能的源：

package.json 中的 prettier
用 JSON 或 YAML 编写的文件.prettierrc
.prettierrc.json, .prettierrc.yml, .prettierrc.yaml,或者 .prettierrc.json等文件
导出对象的.prettierrc.js, .prettierrc.cjs, prettier.config.js或者 prettier.config.cjs等文件
一个.prettierrc.toml 文件

prettier代码格式化工具，支持大量编程语言，已集成到大多数编辑器中。

相关文档 👉 入口

postcss.config.js

postcss配置文件

PostCSS 是一个允许使用 JS 插件转换样式的工具。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

相关文档 👉 入口

jest.config.mjs

JavaScript 测试框架jest的配置文件

相关文档 👉 入口

commitlint.config.js

代码提交校验工具commitlint的配置文件，它的可选配置方案有：

.commitlintrc
.commitlintrc.json
.commitlintrc.yaml
.commitlintrc.yml
.commitlintrc.js
.commitlintrc.cjs
.commitlintrc.ts
commitlint.config.js
commitlint.config.cjs
commitlint.config.ts
commitlint字段package.json

相关文档 👉 入口

.eslintrc.js

ESLint配置文件，ESLint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON -使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig 属性，在那里定义你的配置。

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

相关文档 👉 入口

配置规则 👉 示例

.env

vue cli 工程的环境文件

.env

全局默认配置文件，不论什么环境都会加载合并

.env.development

开发环境下的配置文件

.env.production

生产环境下的配置文件

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载

如果执行npm run serve命令，会自动加载.env.development文件。

果执行npm run build 命令，会自动加载.env.production文件。

.env文件无论是开发还是生成都会加载，这个文件会先加载，优先级比前面两个低（即有相同配置，这个文件的会被前面两个覆盖）

相关文档 👉 入口

.editorconfig

EditorConfig默认配置文件

不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具。

相关文档 👉 入口

使用 Eslint 做代码 lint，那么为什么还要使用 .editorconfig ？

Eslint 虽然包含 .editorconfig 中的一些属性，如缩进等，但并不全部包含，如 .editorconfig 中的 insert_final_newline 属性 Eslint 就没有。Eslint 更偏向于对语法的提示，如定义了一个变量但是没有使用时应该给予提醒。而 .editorconfig 更偏向于代码风格，如缩进等。
Eslint 仅仅支持对 js 文件的校验，而 .editorconfig 既可以检验 js 文件的代码风格，还可以对 .py（python 文件）、.md（markdown 文件）进行代码风格控制。
Eslint 和 .editorconfig 并不冲突，可以根据项目需要，同时配合使用让代码风格更加优雅。